https://shiroyuki2020.hatenablog.com/entry/introduction_to_css

レイアウトを作るのに複数の方法があります。本記事では、テーブルタグ、フロートプロパティ、Flexbox、Gridレイアウトの使い分けについて説明します。また、2カラムのレイアウトを各手法で実装したコード例も紹介します。

使い分け

テーブルタグ

表形式のデータを表示する場合に使用する
レイアウト目的での使用は非推奨

フロートプロパティ

テキストの回り込みを実現する場合に使用する
例:ブログ記事内の画像周りにテキストを配置する場合

Flexbox

1次元的なレイアウト(横方向または縦方向)に適している
ナビゲーションメニューやカードレイアウトなど、柔軟な配置が必要な場合に使用する

Gridレイアウト

2次元的なレイアウト(行と列)に適している
複雑なページ構造や格子状のレイアウトを作成する場合に使用する

使い分けのポイント

表形式のデータ表示にはテーブルタグを使用
テキストの回り込みが必要な場合はフロートを使用
単純な横並びのレイアウトはFlexboxを使用
複雑な格子状のレイアウトはGridを使用
FlexboxとGridレイアウトを組み合わせて使用することも効果的

2カラムレイアウトのコード比較

各手法で2カラムレイアウトを実装したコード例を紹介します。これらを比較することで、それぞれの特徴をより深く理解できます。

テーブルを使ったレイアウトの例

テーブルを使用したレイアウトは、かつてよく使われていました。しかし、現在はセマンティックな観点から非推奨とされています。ここでは、レガシーコードの理解や過去のウェブサイトのメンテナンスのために、参考例として紹介します。

<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2" height="100" id="header">
      <h1>ウェブサイトのヘッダー</h1>
    </td>
  </tr>
  <tr>
    <td width="20%" valign="top" id="sidebar">
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </td>
    <td width="80%" valign="top" id="content">
      <h2>メインコンテンツ</h2>
      <p>ここにメインコンテンツが入ります。</p>
    </td>
  </tr>
  <tr>
    <td colspan="2" height="50" id="footer">
      <p>フッター &copy; 20XX</p>
    </td>
  </tr>
</table>

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

table {
  border-collapse: collapse;
}

td {
  padding: 10px;
}

#header {
  background-color: #f0f0f0;
}

#sidebar {
  background-color: #e0e0e0;
}

#content {
  background-color: #ffffff;
}

#footer {
  background-color: #f0f0f0;
  text-align: center;
}

現在のウェブデザインでは、テーブルタグは本来の目的である表形式のデータ表示にのみ使用し、レイアウトにはFlexboxやGridを使用することが推奨されています。

フロートを使ったレイアウトの例

フロートを使用したレイアウトは、テキストの回り込みに適していますが、複雑なレイアウトを作成する場合には注意が必要です。

<div id="container">
  <header>
    <h1>ウェブサイトのヘッダー</h1>
  </header>
  <nav id="sidebar">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </nav>
  <main id="content">
    <h2>メインコンテンツ</h2>
    <p>ここにメインコンテンツが入ります。</p>
  </main>
  <footer>
    <p>フッター &copy; 20XX</p>
  </footer>
</div>

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#container {
  width: 100%;
}

header {
  background-color: #f0f0f0;
  padding: 20px;
}

#sidebar {
  float: left;
  width: 20%;
  background-color: #e0e0e0;
  padding: 20px;
  box-sizing: border-box;
}

#content {
  float: left;
  width: 80%;
  background-color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
}

footer {
  clear: both;
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}

Flexboxを使ったレイアウトの例

Flexboxは1次元的なレイアウトに適しており、柔軟な配置が可能です。特に、要素を行または列方向に並べる際に便利です。

<div id="container">
  <header>
    <h1>ウェブサイトのヘッダー</h1>
  </header>
  <div id="main-content">
    <nav id="sidebar">
      <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
      </ul>
    </nav>
    <main id="content">
      <h2>メインコンテンツ</h2>
      <p>ここにメインコンテンツが入ります。</p>
    </main>
  </div>
  <footer>
    <p>フッター &copy; 20XX</p>
  </footer>
</div>

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #f0f0f0;
  padding: 20px;
}

#main-content {
  display: flex;
  flex: 1;
}

#sidebar {
  flex: 0 0 20%;
  background-color: #e0e0e0;
  padding: 20px;
}

#content {
  flex: 1;
  background-color: #ffffff;
  padding: 20px;
}

footer {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}

Gridレイアウトを使ったレイアウトの例

Gridレイアウトは2次元的なレイアウトに適しており、複雑なページ構造や格子状のレイアウトを作成する場合に適しています。

<div id="container">
  <header>
    <h1>ウェブサイトのヘッダー</h1>
  </header>
  <nav id="sidebar">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
    </ul>
  </nav>
  <main id="content">
    <h2>メインコンテンツ</h2>
    <p>ここにメインコンテンツが入ります。</p>
  </main>
  <footer>
    <p>フッター &copy; 20XX</p>
  </footer>
</div>

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 20% 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header {
  grid-area: header;
  background-color: #f0f0f0;
  padding: 20px;
}

#sidebar {
  grid-area: sidebar;
  background-color: #e0e0e0;
  padding: 20px;
}

#content {
  grid-area: content;
  background-color: #ffffff;
  padding: 20px;
}

footer {
  grid-area: footer;
  background-color: #f0f0f0;
  padding: 10px;
  text-align: center;
}

まとめ

各レイアウト手法には、それぞれ適した使用場面があります。モダンなウェブデザインでは、FlexboxとGridレイアウトを組み合わせて使用することが多くなっています。フロートの使用は限定的になっていますが、テキストの回り込みには依然として有効です。テーブルタグは表形式のデータ表示に限定して使用するのが望ましいでしょう。

適切な手法を選択することで、効率的で保守性の高いレイアウトを実現できます。プロジェクトの要件やターゲットデバイスを考慮しながら、最適なレイアウト手法を選択することが重要です。また、ウェブ標準とアクセシビリティを念頭に置いたデザインを心がけることで、より多くのユーザーにとって使いやすいウェブサイトを作成できます。

ランキング参加中

プログラミング