継続は力なり＃２８
表示形式を変えるプロパティ
表示形式を変更する
「display プロパティ」は、ナビゲーションを作成する際によく使われるプロパティ
インライン要素をブロックレベル要素のように表示させたり、逆にブロックレベル要素をインライン要素のように表示させられる
以下が、指定できる主な値（表示形式）
displayに指定できる値（基本的なもののみ抜粋）
・inline
インライン要素と同様の表示にする
・block
ブロックレベル要素と同様の表示にする
・inline-block
ボックス自体はインライン要素と同様に配置されているが、その内部はブロックレベル要素のように複数行を表示できるボックスにする
（フォームのテキスト入力欄で複数行を入力できるタイプのものと同様の表示形式になる）
・none
ボックスを消す（ボックスがない状態にする）
displayプロパティの使用例
以下のサンプルでは、インライン要素である「span要素」とブロックレベル要素である「div要素」のペアを４つ配置する
それぞれに、sample1〜sample4 というクラス名をつけている
例
HTML
<span class="sample1">サンプル１<br>span要素</span>
<div class="sample1">サンプル１<br>div要素</div>
<span class="sample2">サンプル２<br>span要素</span>
<div class="sample2">サンプル２<br>div要素</div>
<span class="sample3">サンプル３<br>span要素</span>
<div class="sample3">サンプル３<br>div要素</div>
<sapn class="sample4">サンプル４<br>sapn要素</span>
<div class="sample4">サンプル４<br>div要素</div>「display プロパティ」を指定していない状態
（「span要素」と「div要素」の要素内容に「br要素」を入れて意図的に改行している）
これに対して、「display プロパティ」を使用すると以下になる
サンプル１の「span要素」と「div要素」はともにインライン要素の表示になっている
サンプル２は両方ともブロックレベル要素の表示になる
サンプル３は消えてなくなり、サンプル２の下にはサンプル４のボックスが表示される
サンプル４のように、インライン要素と同様に横に並ぶけれども、その内部がブロックレベル要素のようになっているのが「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