こんにちは。
HTML・CSSコーディングを勉強していると、要素を横並びさせたりする際に、
「display: inline-block;」や「display: flex;」といったCSSを見かけますよね。
このようなことから
と思っていませんか？
実はdisplayプロパティは設定する値によって様々な役割をする万能なCSSプロパティでもあるんです！
今回は、displayプロパティの
・最低限抑えておくべき使い方
を紹介します！
目次
displayとは
displayの読み方
displayは「ディスプレイ」と読みます。そのままですね。(笑)
displayは日本語に訳すと「表示」という意味になります。
displayプロパティ自体も要素の表示に関係するプロパティなので覚えやすいですね！
displayは要素の表示形式を指定するプロパティ
displayプロパティの本来の用途は
です。
例えば、インライン要素であるaタグをブロック要素として使いたいなぁという時に、displayプロパティでブロック要素としてそのaタグを使用できるようにすることができます。
displayで利用できる値
displayでは、その用途によって様々な値を設定することができます。
全て覚える必要はありませんが、どのような用途があるのかだけは覚えておくようにしておきましょう。
インライン要素とブロック要素関連
| 値 | 説明 |
|---|---|
| inline | 表示形式をインライン要素にする。(初期値) |
| block | 表示形式をブロック要素にする。 |
| list-item | liタグのような表示形式にする。 |
| run-in | 文脈に応じてインライン要素かブロック要素かを切り替える。 |
| inline-block | インラインレベルのブロック要素を生成する。高さや幅の指定が可能。 |
テーブル関連
| 値 | 説明 |
|---|---|
| table | tableタグのような表示形式にする。 |
| inline-table | インラインレベルのテーブルとなる。 |
| table-row-group | tbodyタグのような表示形式にする。 |
| table-header-group | theaderタグのような表示形式にする。 |
| table-footer-group | tfooterタグのような表示形式にする。 |
| table-row | trタグのような表示形式にする。 |
| table-column-group | colgroupタグのような表示形式にする。 |
| table-column | colタグのような表示形式にする。 |
| table-cell | tdタグのような表示形式にする。 |
| table-caption | captionタグのような表示形式にする。 |
ルビ関連
| 値 | 説明 |
|---|---|
| ruby | rubyタグのような表示形式にする。 |
| ruby-base | rbタグのような表示形式にする。 |
| ruby-text | rtタグのような表示形式にする。 |
| ruby-base-container | rbcタグのような表示形式にする。 |
| ruby-text-container | rtcタグのような表示形式にする。 |
非表示・継承関連
| 値 | 説明 |
|---|---|
| none | 要素を非表示にする。 |
| inherit | 親要素の表示形式を継承する。 |
フレックスボックス関連
| 値 | 説明 |
|---|---|
| flex | ブロックレベルのフレックスコンテナを生成する。 |
| inline-flex | インラインレベルのフレックスコンテナを生成する。 |
グリッドレイアウト関連
| 値 | 説明 |
|---|---|
| grid | ブロックレベルのグリッドコンテナを生成する。 |
| inline-grid | インラインレベルのグリッドコンテナを生成する。 |
特に run-in はまだほとんどのブラウザで対応していません！
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
開発でよく使うdisplayプロパティの値
指定できる値の多いdisplayプロパティですが、全ての値を覚える必要はありません。
今回は開発でよく使用する値を紹介していきます！
インライン要素とブロック要素を切り替える
まず初めにインライン要素とブロック要素を切り替える方法を紹介します。
サンプルコードをみていきましょう。
|
1 2 3 |
<!-- HTML --> <h1>見出し</h1> <a href="#">リンク</a> |
|
1 2 3 4 5 6 7 8 9 |
// CSS h1 { display: inline; background-color: red; } a { display: block; background-color: blue; } |
こちらはブロック要素のh1タグをインライン要素に、インライン要素のaタグをブロック要素に替えた例です。
このように指定する値によって、タグの役割を簡単に替えることができます。
要素の横並びをする
次に、Webサイトのメニューバーのような横並びでよく使用する inline-block と flex を紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- HTML --> <ul class="inline-block"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> </ul> <ul class="flex"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// CSS .inline-block { margin-bottom:10px; } .inline-block li { display:inline-block; border-bottom: 1px solid red; } .flex { display: flex; } .flex li{ border-bottom: 1px solid blue; } |
このように inline-block や flex を指定するだけで横並びができてしまうので、簡単にメニューの作成ができそうですよね！
特に flex は最近のマークアップでは主流の値になります。
要素を非表示にする
最後に紹介するには要素を非表示にするための値 none です。
例えば、PCの時には表示したいけどスマホの時は非表示にしたいなという時に登場したりします。
サンプルをみてみましょう。
|
1 2 |
<!-- HTML --> <h3 style="display: none;">非表示にしたい要素</h3> |
簡単ですね！このようにして要素を非表示にすることができます。
全部覚える必要はないの？
ここまで様々なdisplayプロパティの値とその使い方を紹介してきましたが、果たして全て覚えられるでしょうか？
筆者からすると、指定できる値全てを覚える必要はないと考えています。
なぜなら、表示形式を指定しなくとも適切なタグが存在するからです。HTMLやCSSの標準化を行うW3Cは、マークアップはそれぞれ適した場所で使うのが望ましいと提唱しています。
例えばdivタグに「display: ruby」をつけてルビを振るよりは、素直にrubyタグを使用する方が望ましいからです。
このように、適材適所のタグが存在するので全ての値を覚える必要はありません！
まとめ
いかがでしたか？
今回はdisplayプロパティの大まかな使い方から開発現場でよく使うdisplayプロパティの値を紹介していきました。
今後、横並びなどは flex を指定するフレックスボックスが主流になってくると考えられているので、このdisplayプロパティの登場回数も増えると思います。
役割に応じて適切に値を使い分けられるようにしておきましょう！
参考文献：http://www.htmq.com/style/display.shtml
