ホーム プログラミング言語 Web関連 css3 CSS display(要素表示タイプ)

CSS display(要素表示タイプ)


 
 
display 属性は、CSS で最も重要な属性の 1 つです. 主に要素のレイアウトを制御するために使用されます. display 属性を使用して、要素を表示するかどうか、およびどのように表示するかを設定できます.

 

さまざまな要素タイプに応じて、各要素にはデフォルトの表示属性値があります。たとえば、 <div>のデフォルトの表示属性値はブロック (ブロックレベル要素) であり、 <span>のデフォルトの表示属性値はインライン (インライン) です。 element) の場合、要素の表示プロパティを別の値に手動で変換することもできます。表示属性のオプション値は次のとおりです。

価値 説明
none 隠し要素
block 要素をブロックレベル要素として設定する
inline 要素をインライン要素として設定する
list-item 要素をリスト項目として設定する
inline-block 要素をインラインブロック要素として設定します
table ブロック要素レベルで要素をテーブルとして設定します ( <table>と同様)。
inline-table 要素をインラインの要素レベル テーブルとして設定します ( <table>と同様)。
table-caption 要素をテーブルのタイトルとして設定します ( <caption>と同様)
table-cell 要素をテーブルのセルとして設定します ( <td><th>など)
table-row 要素をテーブルの行として設定します ( <tr>など)。
table-row-group 要素をテーブルのコンテンツ部分として設定します ( <tbody>など)
table-column 要素をテーブルの列として設定します ( <col>など)
table-column-group テーブル内の 1 つ以上の列のグループとして要素を設定します ( <colgroup>と同様)。
table-header-group 要素をテーブルのヘッドとして設定します ( <thead>と同様)
table-footer-group 要素をテーブルの足として設定します ( <tfoot>と同様)
box CSS3 の新しい属性値。これは、オブジェクトがフレックス ボックス (フレックス ボックスの最も古いバージョン) として設定されることを意味します。
inline-box オブジェクトがインライン要素レベルのフレックス ボックス (フレックス ボックスの最も古いバージョン) として設定されていることを示す、CSS3 に追加された新しいプロパティ値
flexbox CSS3 の新しい属性値で、オブジェクトがフレックス ボックス (フレックス ボックスの移行バージョン) として設定されていることを示します。
inline-flexbox CSS3 の新しい属性値。これは、オブジェクトがインライン要素レベルのフレックス ボックス (フレックス ボックスの移行バージョン) として設定されることを意味します。
flex オブジェクトがフレックス ボックス (フレックス ボックスの最新バージョン) として設定されていることを示す、CSS3 で追加された新しいプロパティ値
inline-flex オブジェクトがインライン要素レベルのフレックス ボックス (フレックス ボックスの最新バージョン) として設定されていることを示す、CSS3 に追加された新しいプロパティ値
run-in 要素をブロックレベル要素として設定するかインライン要素として設定するかの決定は、コンテキストに依存します
inherit 親要素から表示属性の値を継承する

フレックス ボックス (エラスティック ボックス) は、CSS3 の新しいレイアウト モードです. フレックス ボックスを導入する目的は、ページ内の要素にスペースを配置、整列、および割り当てるためのより効果的な方法を提供することです. ページをさまざまな画面に適応させる必要がある場合レイアウトは、サイズとデバイスの種類に応じて、要素が適切にサイズ設定され、配置されるようにします。

以下は、いくつかの一般的な属性値を使用して、次の表示属性の使用を紹介します。

display:none

属性値 none of display を使用して、要素を非表示にすることができます。これは、「 CSS visibility 」を導入したときに前述したvisibility: hidden;関数に似ていますが、違いはdisplay: none;場所も非表示になることです。 display: none;通常、要素を非表示または表示するために JavaScript と組み合わせて使用​​されます。これを示す例を次に示します。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 350px;
            height: 100px;
            background-color: #AAA;
        }
    </style>
</head>
<body>
    <div id="box"> </div>
    <button onclick="change_box(this)">隠す</button>
    <script>
        function change_box(obj){
            var box = document.getElementById('box');
            if(box.style.display == 'none'){
                box.style.display = "";
                obj.innerHTML = "隠す";
            }else{
                box.style.display = "none";
                obj.innerHTML = "表示";
            }
        }
    </script>
</body>
</html> 

次の図に示すように、上記のコードを実行し、ページの [表示] または [非表示] ボタンをクリックして、指定した要素をページに表示または非表示にします。

図: 表示: なし; プロパティのデモ
図: 表示: なし; プロパティのデモ

display:block

display 属性の属性値ブロックは、要素を強制的にブロック レベルの要素にすることができます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        a{
            display: block;
            width: 150px;
            height: 50px;
            background-color: #ACC;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="">これはリンクです</a>
</body>
</html> 

実行結果は次の図のとおりです。

図: 表示: ブロック; プロパティのデモ
図: 表示: ブロック; プロパティのデモ

display:inline

display 属性の属性値 inline は、要素を強制的にインライン要素に変換することができます。これにより、要素はインライン要素の特性を持ちます。たとえば、他のインライン要素と行を共有することができます。サンプル コード以下のとおりであります:

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 50px;
            height: 50px;
            background-color: #ACC;
            border: 1px solid black;
        }
        .inline {
            display: inline;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="inline">display: inline;</div>
    <div class="inline">display: inline;</div>
</body>
</html> 

実行結果は次の図のとおりです。

図: 表示: インライン; プロパティのデモ
図: 表示: インライン; プロパティのデモ

 

表示: インラインブロック

display 属性の属性値 inline-block により、要素を強制的にインラインブロック要素に変換することができます.インラインブロックは、ブロックが幅と高さを設定できるという特徴だけでなく、インラインが占有しないという特徴もあります.サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 130px;
            height: 50px;
            background-color: #ACC;
            border: 1px solid black;
        }
        .inline-block {
            display: inline-block;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div class="inline-block">display: inline-block;</div>
    <div class="inline-block">display: inline-block;</div>
</body>
</html> 

実行結果は次の図のとおりです。

図: 表示: インライン ブロック; プロパティのデモ
図: 表示: インライン ブロック; プロパティのデモ
 

「CSS display(要素表示タイプ)」についてわかりやすく解説!絶対に観るべきベスト2動画

【Lesson03-6】これができれば脱初心者!position・transformを使った要素の配置/TOP画像の上・中央にキャプションを表示する【cafeホームページ】
【CSS入門】positionで要素の位置を移動させよう! #11