displayの練習

インライン ⇄ ブロック

1.#display1 aに{display: block; height: 50px;}を設定

→ピンクの帯が横幅いっぱいになり、文字のないところに重ねてもリンクが効く

2.#display1 pに{display: inline;}を設定

→水色の箱が文字のあるところだけの帯になり、高さの設定も効かなくなる

3.#display1 aの{display: block;}を削除(inlineに戻す)

→ピンクの帯が文字のあるところだけの帯になり、高さの設定も効かなくなる

a要素にdisplay: block;を指定してブロックレベルに変更すると、クリックできる領域が大きくなり短いテキストや画像などを直接クリックしなくてもリンクが機能するようになります。
ナビゲーションボタンなどによく使うので覚えておいてください。

インラインブロック

親ボックス：700px

1.#display2 .inlineblock-itemに{display: inline-block;}を設定

→横並びになるが隙間が空いて、その分収まりきれなかった5番目の.inlineblock-itemが下に落ちる。
これはソースコード中の改行が半角スペースとして認識されることによるもの。

<div id="display2">
	<div>子要素item1</div>←改行
	<div>子要素item2</div>←改行
	<div>子要素item3</div>←改行
	<div>子要素item4</div>←改行
	<div>子要素item5</div>←改行
</div>

解消法その1

→改行せず続けて記述する

<div id="display2">
	<div>子要素item1</div><div>子要素item2</div><div>子要素item3</div><div>子要素item4</div><div>子要素item5</div>
</div>

解消法その2

→</div>と<div>の間をコメントアウトする

<div id="display2">
	<div>子要素item1</div><!--
	--><div>子要素item2</div><!--
	--><div>子要素item3</div><!--
	--><div>子要素item4</div><!--
	--><div>子要素item5</div>
</div>

解消法その3

親要素にfont-size: 0;を設定し、子要素に改めてfont-sizeを指定する

フレックスボックス

親ボックス：700px

1.#display3(親のボックス=700px)に{display:flex;}を設定

→横並びになるが、150pxあるはずのitemが親のボックスに収まるよう少し小さくなってしまう。

2.#display3に続けて{flex-wrap: wrap;}を設定する。

→要素が折り返して2行になる

3.#display3に{justify-content: space-around;}を設定する

→余白が均等に割り振られて要素の間が開く

4.{justify-content: space-between;}に変更する

→左右の余白なしの均等になる。

フレックスボックスはとてもたくさんのプロパティがあるので、全てを解説するのは難しいのですが、便利なサイトがあるのでご紹介しておきます。
Webクリエイターボックス /日本語対応！CSS Flexboxのチートシートを作ったので配布します

グローバルナビゲーション

<nav>
	<ul>
		<li><a href="#">TOPページ</a></li>
		<li><a href="#">モーニング</a></li>
		<li><a href="#">ランチ</a></li>
		<li><a href="#">ディナー</a></li>
		<li><a href="#">アクセス</a></li>
	</ul>
</nav>

まずはこのナビゲーションの構造(何のタグを使っているか、どんなふうに入れ子になっているか)を分解してみましょう。
そしてそれぞれが「インライン要素なのかブロックレベル要素なのか」を考えてみましょう。