CSS レイアウトテクニック - フロート、クリア、レガシーレイアウト: オールドスクールクール-CSSチュートリアル-php.cn

CSS レイアウトテクニック - フロート、クリア、レガシーレイアウト: オールドスクールクール

王林

リリース： 2024-08-17 14:54:31

オリジナル

889 人が閲覧しました

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

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

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

CSS Layout Techniques - Floats, Clears, and Legacy Layouts: The Old School Cool

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

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 の豊かな歴史の一部です。これらを理解すると、強固な基礎が得られ、最新のレイアウトシステムの威力を理解するのに役立ちます。さらに、これらの昔ながらのテクニックを知っておくと、古いプロジェクトや風変わりなデザインの課題 (または恐ろしい面接ラウンド) に対処するときに役立ちます。

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