✨
この記事は、私自身の Web サイトで公開されている大規模なシリーズの一部です。 CSS 101: シリーズの詳細については、ここをクリックしてください。完全に無料です!

過去からの爆発へようこそ！ Flexbox と Grid が現代の Web デザインのスーパーヒーローのように浸透する前は、float と Clear が CSS の世界を支配していた時代がありました。 Web デザインの初心者であれば、「フロートとクリアとは一体何で、なぜ気にする必要があるの?」と疑問に思うかもしれません。さて、シートベルトを締めて、CSS の歴史を巡るノスタルジックな旅をしようとしているからです。

ネタバレ: 今日から使えるクールなトリックが見つかるかもしれません!

フロート: オリジナル レイアウトのトリックスター

Float が CSS の世界の反抗的なティーンエイジャーであると想像してください。常に一線を越えてちょっとした混乱を引き起こしています。フロートは元々、画像の周りにテキストを折り返すように設計されましたが、賢明な開発者は、フロートを使用してレイアウトを作成することもできることにすぐに気づきました。

img {
    float: left;
    margin-right: 15px;
}

上の例では、float: left; となります。画像を左側に「浮かせ」、テキストを回り込ませることができます。 Flexbox や Grid が登場する前は、Float は複数列レイアウトを作成するための一般的な選択肢でした。ただし、これらは少し扱いに​​くく、注意して使用しないとレイアウトの問題を引き起こす可能性があります。

クリアズ: 平和維持軍

フロートは少し反抗的だったかもしれないが、クリアは彼らの平和維持者だった。クリア プロパティは、フロートが引き起こす可能性のある混乱を解決するために介入する調停者のようなものです。 float を使用していて、要素が重なっていたり、期待どおりに動作していないことがわかった場合は、clear が役に立ちます。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

上記の CSS を使用して clearfix クラスを追加すると、浮動要素が親コンテナ内に確実に含まれるようになります。これは、要素が深淵に漂ってしまうような迷惑なレイアウトの不具合を防ぐための気の利いた方法です。

レガシー レイアウト テクニック: レトロなリバイバル

Flexbox と Grid が注目を集める前に、CSS にはさらにいくつかのトリックがありました。ここではいくつかの古典的なレイアウトテクニックを見てみましょう:

• Inline-Block: 水平レイアウトを作成するための簡単な方法。要素を表示: inline-block; に設定すると、float を使用せずに要素を横に並べることができます。

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• テーブル レイアウト: はい、テーブルは表形式のデータだけを扱うものではありません。 display: table;、display: table-row;、display: table-cell; を使用できます。グリッド状のレイアウトを作成します。

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

これらの手法は現代のレイアウト技術によってほとんど影が薄くなってしまいましたが、それでも Web デザインの進化を垣間見ることができます。

現代の応用: 新旧の融合

それでは、フロートとクリアは現代の Web デザインの世界でもまだ存在しているのでしょうか?絶対に！ Flexbox と Grid は現在、レイアウトを作成するための頼りになるツールですが、単純なレイアウトや従来のコードを使用する場合など、特定のシナリオではフロートとクリアも依然として役立ちます。

たとえば、テキストの折り返しや、少数の要素を簡単な方法で整列させたい場合に、float を使用することがあります。ただし、複雑で応答性の高いレイアウトの場合は、Flexbox と Grid が最適です。

まとめ

フロート、クリア、その他の従来のレイアウト技術は過去の遺物のように見えるかもしれませんが、CSS の豊かな歴史の一部です。これらを理解すると、強固な基礎が得られ、最新のレイアウト システムの威力を理解するのに役立ちます。さらに、これらの昔ながらのテクニックを知っておくと、古いプロジェクトや風変わりなデザインの課題 (または恐ろしい面接ラウンド) に対処するときに役立ちます。

コーディングを楽しんでください!

✨
くっそー！読んだ内容が気に入ったら、ここをクリックして CSS 101: The Series をチェックアウトしてください。完全に無料です!