CSSで重要なプロパティに「display」というものがあります。
displayは要素の表示に関するプロパティであり、Web表示の基本でもあります。
今回はそんなCSSのdisplayとはなにか？について基本と実務での使用注意点などを解説していきたいと思います。
CSS displayとは？
css displayとは、要素の表示方法に関するプロパティです。
要素というのは以下のようなものになります。
<div>なんとかかんとか</div>上記のように、括弧で囲まれた要素のことを言います。これらの表示の仕方を変更したりすることができるのがdisplayプロパティになります。
CSSのボックスモデルについて
CSSのdisplayの理解ですが、まずはCSSのボックスモデルについておさらいしましょう。ドキュメントツリーにおけるすべての要素は以下のようなエリアを持つ長方形のボックスとして構成されています。
田中くん
この4つの描画エリアに対して、どんな感じで表示するかを決められるのがdisplayプロパティです
displayはこれらエリアに対して、どのような振る舞いを行うかを指定するものになります。たとえば、noneを指定すればすべてが非表示となり、contentsを設定すればコンテンツエリアを残して周りは非表示になるなどします。
displayの種類一覧と概要
代表的な「block」「inline」「inline-block」「flex」「none 」あたりでしょうか。おそらく経験者の方などでもすべてを把握している方は少ないかもしれません。
| display: block | ブロック要素を形成する |
|---|---|
| display: inline | インライン要素を形成する |
| display: inline-block | インラインレベルのブロック要素を生成する。形態としてはインライン要素として扱われるが、横幅や高さや作られる |
| display: inline-table | インラインレベルのテーブルを形成する |
| display: contents | ボックスの要素を残しつつ周囲のボックスを省略する。 例： <div>ボックス</div> → ボックス |
| display: flex | ブロックレベルでフレックスコンテナのボックスを形成する |
| display: grid | ブロックレベルでグリッドコンテナボックスを形成する |
| display: ruby | ルビのコンテナボックスを形成する |
| display: list-item | li要素のようなリスト形式のマーカーボックスを形成する |
| display: none | 要素を非表示にする |
| display: inherit | 親要素の値を継承する |
| display: table | tableのような要素を形成する |
| display: table-caption | captionのような要素を形成する |
| display: table-cell | tableのセル（td）のような要素形成する |
| display: table-column | tableのcolのような要素を形成する |
| display: table-column-group | tableのcolgroupのような要素を形成する |
| display: table-footer-group | tableのtfootのような要素を形成する |
| display: table-header-group | tableのtheadのような要素を形成する |
| display: table-row | tableのrowのような要素を形成する |
| display: table-row-group | tableのrowgroupのような要素を形成する |
実際には使うシーンなどは限られている値のdisplayも多いですが、概要を把握しておくといざという時にマークアップの選択肢が大幅に増えます。
displayプロパティの実務での注意点
CSSのdisplayプロパティは、要素の表示に直結する要素のため、実務でも念頭に置いておくべきポイントがいくつかあります。
floatを使うか、display:flexを使うか
CSSプロパティにはfloatというものがあるのをご存じでしょうか？
横並びなどをさせるプロパティなのですが、display flexの登場によりfloatの必要性がほぼなくなりました。
floatはCSSの拡張性や保守性の観点から見ると欠陥があり、昨今では使用する機会がなくなりました。floatにするかdisplay flexを採用するかなどは、あらかじめプロジェクト設計段階で決めておくと良いでしょう。
ブラウザ対応に気をつける
CSSのdisplayプロパティの値によっては古いブラウザに対応していないものもいくつかあり、それらについてはベンダープレフィックスをつけるなどをする必要があります。
ブラウザが対応しているかどうかなどは以下で調べてみましょう。
セマンティックWebになるかを考える
田中くん
セマンティックWebとは、機械などから見ても、構造が意味的に正しく設計されているWebのことを言います。
こちらも設計段階で考えることですが、レスポンシブデザインなどではdisplayプロパティを多用します。
特に「display: block」「display: inline-block」「display: none」などは、表示に関して多用することになります。
スマホなどでは非表示に、といったように安易に「display: none」を使用しているとセマンティックが損なわれます。
これらについてもWebの設計段階で実際のCSSをどのように書くか、まで落とし込んでおくのがベストでしょう。
CSS displayまとめ
いかがでしょうか。以外と知らないdisplayプロパティもあったのではないでしょうか。表示に関わるCSSプロパティのため、その基本については正しく理解しておく必要があります。
よければCSSの参考にしてください。
