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

CSSのフロートプロパティは、ウェブページのレイアウトを制御するための手法の一つです。かつては広く使用されていましたが、現在ではFlexboxやGridレイアウトなどの新しい技術に取って代わられつつあります。しかし、レガシーコードの理解や互換性の観点から、フロートの仕組みを知ることは依然として重要です。本記事では、フロートを使用した2カラムレイアウトの基本的な実装方法と、その特徴や注意点について説明します。

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

HTML

<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>

CSS

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;
}

コードの特徴

このコードには以下のような特徴があります。

レイアウトにフロートを使用している。サイドバーとメインコンテンツにそれぞれfloat: left;を適用している。
box-sizing: border-box;を使用して、パディングを要素の幅に含めている。
フッターにclear: both;を適用して、フロートの影響を解除している。

注意点

フロートを使ったレイアウトには以下のような注意点があります。

ボックスの幅や余白の計算が複雑になり、意図しないレイアウト崩れが起こりやすくなる。
複雑なレイアウトを作成する場合、コードが複雑になりやすい。
レスポンシブデザインの実装が比較的難しい。

まとめ

フロートを使ったレイアウトは、かつてはウェブデザインで広く使用されていましたが、現代のウェブ制作では、より柔軟で管理しやすいFlexboxやGridレイアウトの使用が推奨されています。ただし、レガシーコードの理解や互換性の観点から、フロートの仕組みを理解しておくことは依然として重要です。

ランキング参加中

プログラミング