最終更新日

displayプロパティ

displayは、要素の表示に関連して生成されるボックスの表示形式を、キーワードなどを使って指定します。通常、要素のボックスは対応する表示形式に応じて自動的に作成されますが、displayを使用することで表示形式を変更できます。

displayの初期値はinlineですが、明示的に値を指定しない限り、要素の表示形式はブラウザの既定スタイルシートによってあらかじめ設定されたものが使用されます。

■フレキシブルボックスを利用する

CSS3では、従来のCSSのボックス様式とは異なり、要素のボックスを左から右、あるいは右から左へ配置したり、ボックスの配置順を指定したりというように、柔軟にボックス配置を設定可能な「フレキシブルボックス」という新しいボックス様式が導入されています。

フレキシブルボックスを利用するには、まずそのための領域を確保する必要があります。それには、フレキシブルボックスとして表示したい要素全体をdiv要素などで囲み、そのdiv要素のdisplayプロパティの値として、「flex」または「inline-flex」を指定します。それにより、div要素のボックスをフレキシブルボックスとして構成することができ、その領域内に含まれる各要素のボックスを、水平方向へ配置できるようになります。

<div style="width:300px; display:flex;">
	<p style="width:100px;">BOX1</p>
	<p style="width:100px;">BOX2</p>
	<p style="width:100px;">BOX3</p>
</div>

フレキシブルボックス

CSS3での変更点
・別モジュールの、CSS Flexible Box Layout Moduleでは、displayプロパティで使うための「flex」「inline-flex」というキーワードが新しく用意されており、それらを指定することにより、CSS3から導入された「フレキシブルボックス」を利用することができるようになりました。
初期値 適用先 継承
inline すべての要素 なし
説明
inline インラインボックスとして表示(初期値
block ブロックボックスとして表示
inline-block ブロックボックスだが、インラインボックスとしても扱うことができる
list-item 1個以上のブロックボックスと1個のマーカーボックスからなるリスト項目
run-in ランインボックス。状況によりブロックボックスまたはインラインボックスとして表示される
compact ブロックボックスまたはマーカーボックスとして表示される
テンプレートを示す値 文字列の並びで表示形式を表しテンプレートとして利用できる
none 要素を表示しない
table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption 表のパーツとして表示される(詳細はCSS3のTablesモジュールで既定される予定)
ruby|ruby-base|ruby-text|ruby-base-group|ruby-text-group ルビのパーツとして表示される(詳細はCSS3のRubyモジュールで既定される)
CSS Flexible Box Layout Module の値 説明
flex フレキシブルボックスとして表示されます。
inline-flex インラインレベルのフレキシブルボックスとして表示されます。
サンプルコード
display: inline;
display: block;
display: inline-block;
display: list-item;
display: run-in;
display: compact;

/* CSS Flexible Box Layout Module で用意されているキーワード */
display: flex;
display: inline-flex;
参考文献:CSS basic box model外部リンク
参考文献2:CSS Flexible Box Layout Module外部リンク
HOME