「CSS で text-align を設定したのに効かない」「CSS で margin:auto; したのに効かない」といった場面に直面したことはないだろうか。このような時に疑うべきものとして、 CSS の display プロパティがある。

今回は比較的よく使う5つを紹介する。これらは他の記事でも頻繁に登場するかもしれない。

• none
• inline
• block
• inline-block
• box

【none】

最も単純。これが割り当てられた要素は表示されない。最初からないものとして配置される。

<div style="font-size: 200%;">
  <span style="color:blue;">→</span>
  <span style="display:none;color:yellow;">●</span>
  <span style="color:red;">←</span>
</div>

見ての通り全く表示されない。

【inline】

span 要素や strong 要素等がデフォルトでこれになっている。テキストの一部分として表示されるので、テキスト中に何か情報を入れたりする際に使う。

配置の際に気を付けたいのは以下。

• height や width が無効
• margin:auto; でセンタリングできない。

<div style="padding: 1em; border:black 2px solid;font-size: 200%; line-height: 130%;">
  <div style="border: blue 2px solid; color: blue;padding:5px; width: 120px;margin:auto;">block のまま。横幅は 120px</div>
  <br/>
  <div style="border: red 2px solid; color:red; height:120px;display:inline;margin:auto;">inline に変更。高さは変わらずセンタリングもされない</div>
</div>

【block】

inline の対。div 要素や p 要素等がこれに該当する。とれるだけの横幅いっぱいと、子要素の高さの合計分だけの縦幅を持つ。しかし、 width/height でサイズを変えられるので、ボタン等を配置する際の取り回しは inline 要素より楽かもしれない。

配置の際に気を付けたいのは以下。

• 親要素に text-align:center; があってもセンタリングされない

<div style="padding: 1em; border:black 2px solid;font-size: 120%;text-align:center;">
  <span style="border: blue 2px solid; color: blue;">inline のまま</span>
  <br/>
  <span style="border: red 2px solid; color:red;display:block;">block に変更。横幅が変化</span>
  <br/>
  <span style="border: red 2px solid; color:red;display:block; width:120px;">block に変更。センタリングされない</span>
</div>

【inline-block】

inline のように配置・表示される。ただし、width や height を設定することができる。その他、block と同じようにふるまうことができる。

<div style="padding: 1em; border: black 2px solid; font-size: 200%; text-align: center;">
  <div style="display: inline-block; border: red 2px solid;padding:5px;">inline-box1</div>
  <div style="display: inline-block; border: red 2px solid;padding:5px; height: 100px; width: 200px;">inline-box2</div>
</div>

【box】

子要素の表示を変更する。子要素の高さは最も高いものに揃えられる(特に指定しない場合)。2～カラム以上のレイアウトをやるのにとても便利。

<div class="boxBase" style="width: 550px; border: 2px yellow solid; color: white;">
  <div style="background-color: #400000; padding: 5px;  width: 100px;">左メニュー</div>
  <div style="background-color: #004000; padding: 5px;  width: 200px;">本文<br/><br/>本文</div>
  <div style="background-color: #000040; padding: 5px;  width: 100px;">右メニュー</div>
  <div style="background-color: #000000; padding: 5px;  width: 50px; height:300px;">高さが指定された要素A</div>
  <div style="background-color: #202020; padding: 5px;  width: 50px; height:200px;">高さが指定された要素B</div>
</div>

参考文献

• CSS basic box - model 4.1. The ‘display’ property
• CSS Flexible Box Layout Module Level 1