![見出し画像](https://assets.st-note.com/production/uploads/images/21650087/rectangle_large_type_2_2a3e5c8a44be346fb42ddf83e6021c7d.jpeg?width=1200)
継続は力なり#28
表示形式を変えるプロパティ
表示形式を変更する
「display プロパティ」は、ナビゲーションを作成する際によく使われるプロパティ
インライン要素をブロックレベル要素のように表示させたり、逆にブロックレベル要素をインライン要素のように表示させられる
以下が、指定できる主な値(表示形式)
displayに指定できる値(基本的なもののみ抜粋)
・inline
インライン要素と同様の表示にする
・block
ブロックレベル要素と同様の表示にする
・inline-block
ボックス自体はインライン要素と同様に配置されているが、その内部はブロックレベル要素のように複数行を表示できるボックスにする
(フォームのテキスト入力欄で複数行を入力できるタイプのものと同様の表示形式になる)
・none
ボックスを消す(ボックスがない状態にする)
displayプロパティの使用例
以下のサンプルでは、インライン要素である「span要素」とブロックレベル要素である「div要素」のペアを4つ配置する
それぞれに、sample1〜sample4 というクラス名をつけている
例
HTML
<span class="sample1">サンプル1<br>span要素</span>
<div class="sample1">サンプル1<br>div要素</div>
<span class="sample2">サンプル2<br>span要素</span>
<div class="sample2">サンプル2<br>div要素</div>
<span class="sample3">サンプル3<br>span要素</span>
<div class="sample3">サンプル3<br>div要素</div>
<sapn class="sample4">サンプル4<br>sapn要素</span>
<div class="sample4">サンプル4<br>div要素</div>
「display プロパティ」を指定していない状態
(「span要素」と「div要素」の要素内容に「br要素」を入れて意図的に改行している)
これに対して、「display プロパティ」を使用すると以下になる
サンプル1の「span要素」と「div要素」はともにインライン要素の表示になっている
サンプル2は両方ともブロックレベル要素の表示になる
サンプル3は消えてなくなり、サンプル2の下にはサンプル4のボックスが表示される
サンプル4のように、インライン要素と同様に横に並ぶけれども、その内部がブロックレベル要素のようになっているのが「inline-block」
例
CSS
span, div { color: #fff; }
span { background: #f6b; }
div { background: #69e; }
.sample { display: inline; }
.sample { display: block; }
.sample { display: none; }
.sample { display: inline-blo