はじめに

HTML学習その1 - 基本編: https://blog.yexca.net/archives/146
HTML学習その2 - リスト、テーブル、フォーム: https://blog.yexca.net/archives/150
HTML学習その3 - Webページのレイアウト: https://blog.yexca.net/archives/195

標準フローはドキュメントフローとも呼ばれてて、要素がページ内でデフォルトで配置されるルールを指すよ。例えば、ブロック要素は1行を占有し、インライン要素は1行に複数表示できるって感じ。

標準フローじゃないレイアウトにするなら、フロートかFlexレイアウトを使えばOK。

フロート

役割：ブロック要素を横に並べること。プロパティ名はfloatで、値はleftとrightの2つがあるよ。

フロートを設定したボックスは標準フローから外れるから注意ね。

フロートの影響をクリアする

フロート要素は標準フローから外れちゃうから、親要素に高さがない場合、自分で親の高さを確保できなくなって、ページのレイアウトがぐちゃぐちゃになる可能性があるんだ。

フロートをクリアする一般的な方法は4つあるよ。

追加タグを使う方法

親要素の最後にブロック要素を追加して、CSSプロパティのclear:bothを設定するんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<style>
    .clearfix {
        clear: both;
    }
</style>

<div>
    <div></div>
    <div class="clearfix"></div>
</div>

シングル疑似要素を使う方法

原理は上と同じ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<style>
	.clearfix::after {
    	content: "";
    	display: block;
    	clear: both;
	}
</style>

<div class="clearfix">
    <div></div>
    <div></div>
</div>

ダブル疑似要素を使う方法

この方法は、高さの崩れとフロートの影響を同時に解決できるんだ。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<style>
	.clearfix::before, /* 高さの崩れを解決 */
	.clearfix::after {
        content: "";
        display: table;
    }
    .clearfix::after { /* フロートの問題を解決 */
        clear: both;
    }
</style>

<div class="clearfix">
    <div></div>
    <div></div>
</div>

overflowプロパティを使う方法

親要素にCSSプロパティのoverflow: hidden;を追加するだけ。

Flex

Flexレイアウトは、フレキシブルボックスレイアウトとも呼ばれてて、ブラウザが推奨してるレイアウトモデルなんだ。構造化されたレイアウトにすごく適していて、強力な空間分布と配置（アライメント）機能を提供してくれるよ。

それに、Flexモデルはフロートレイアウトみたいに標準フローから外れるってことがないから、Webページのレイアウトがもっとシンプルで柔軟になるんだ。

構成要素

Flexには4つの構成要素があるよ。

• フレックスコンテナ
• フレックスアイテム
• 主軸（メインアクシス）：デフォルトでは水平方向
• 側軸（クロスアクシス）：デフォルトでは垂直方向

親要素にdisplay: flex;を設定すると、それがフレックスコンテナになって、子要素はフレックスアイテムになるんだ。すると自動的に縮んだり伸びたりしてくれるようになるよ。

Flexレイアウト

主軸の配置方法

プロパティ名：justify-content

側軸の配置方法

プロパティ名

• align-items：現在のフレックスコンテナ内の全フレックスアイテムの側軸方向の配置方法（フレックスコンテナに設定する）
• align-self：特定のフレックスアイテム単独の側軸方向の配置方法を制御（フレックスアイテムに設定する）

主軸の方向を変更

主軸はデフォルトで水平方向で、側軸はデフォルトで垂直方向になってるよ。

プロパティ名：flex-direction

フレックスアイテムの伸縮比率

役割：フレックスアイテムの主軸方向のサイズを制御すること。プロパティ名：flexで、子要素（フレックスアイテム）に追加するよ。

プロパティ値：整数値で、親要素の残りサイズをどれくらいの割合で占有するかを表すよ。

フレックスアイテムの折り返し

フレックスアイテムは自動的に縮んだり伸びたりするけど、デフォルトでは全部のアイテムが1行に表示されるんだ。プロパティ名：flex-wrapで、親要素（フレックスコンテナ）に追加するよ。

値にはwrap（折り返す）とnowrap（折り返さない、デフォルト）があるよ。

行の配置方法

プロパティ名：align-content

プロパティ値は主軸の配置方法と同じで、複数行のフレックスアイテムにのみ適用されるんだ。