Webサイトでは、コンテンツが複数の列に表示されることがよくあります(雑誌や新聞など)。

HTMLレイアウト要素

HTMLには、Webページのさまざまな部分を定義するセマンティック要素がいくつかあります。

<header>- ドキュメントまたはセクションのヘッダーを定義します
<nav>- 一連のナビゲーションリンクを定義します
<section>- ドキュメント内のセクションを定義します
<article>- 独立した、自己完結型のコンテンツ
<aside>- コンテンツ以外のコンテンツを定義する(サイドバーなど)
<footer>- ドキュメントまたはセクションのフッターを定義します
<details>- ユーザーがオンデマンドで開閉できる追加の詳細を定義します
<summary>- <details>要素の見出しを定義します

<header>- ドキュメントまたはセクションのヘッダーを定義します <nav>- 一連のナビゲーションリンクを定義します <section>- ドキュメント内のセクションを定義します <article>- 独立した自己完結型を定義します コンテンツ <aside>- コンテンツ以外のコンテンツを定義する(サイドバーなど) <footer>- ドキュメントまたはセクションのフッターを定義します <details>- ユーザーがオンデマンドで開閉できる追加の詳細を定義します。 <summary>- <details>要素の見出しを定義します セマンティック要素の詳細については、HTMLセマンティクスの章を参照してください。

HTMLレイアウトのテクニック

複数列のレイアウトを作成するには、4つの異なる手法があります。各手法には長所と短所があります。

• CSSフレームワーク
• CSSfloat プロパティ
• CSSフレックスボックス
• CSSグリッド

CSSフレームワーク

レイアウトをすばやく作成したい場合は、p.xやBootstrapなどのCSSフレームワークを使用できます。

CSSフロートレイアウト

CSSのfloatプロパティを使用してWebレイアウト全体を行うのが一般的です。Floatは簡単に習得できます。floatプロパティとclearプロパティがどのように機能するかを覚えておくだけで済みます。短所:フローティング要素はドキュメントフローに結び付けられているため、柔軟性が損なわれる可能性があります。
floatについて詳しくは、CSS floatとclearの章をご覧ください。

CSSフレックスボックスのレイアウト

フレックスボックスを使用すると、ページレイアウトがさまざまな画面サイズやさまざまなディスプレイデバイスに対応する必要がある場合に、要素が予測どおりに動作することが保証されます。

フレックスボックスについて詳しくは、CSSフレックスボックスの章をご覧ください。

CSSグリッドレイアウト

CSSグリッドレイアウトモジュールは、行と列を含むグリッドベースのレイアウトシステムを提供し、フロートや配置を使用せずに Webページを簡単にデザインできるようにします。

CSSグリッドの詳細については、CSSグリッドの概要の章をご覧ください。