CSS レイアウト - フロートの例
このページには、一般的な float の例が含まれています。
ボックスのグリッド/等幅ボックス
ボックス 1
ボックス 2
ボックス 1
ボックス 2
ボックス 3
とともにfloatプロパティを使用すると、コンテンツのボックスを並べてフロートするのは簡単です。
例
ボックスサイジングとは何ですか？
3 つのフローティング ボックスを並べて簡単に作成できます。ただし、各ボックスの幅を拡大するもの (パディングやボーダーなど) を追加すると、ボックスが壊れます。のbox-sizingプロパティを使用すると、ボックスの幅 (および高さ) の合計にパディングと境界線を含めることができ、パディングがボックスの内側にとどまり、壊れないようにすることができます。
box-sizing プロパティの詳細については、こちらをご覧くださいCSS ボックスのサイズ変更の章.
画像を並べて表示
ボックスのグリッドを使用して、画像を並べて表示することもできます。
例
等高ボックス
前の例では、ボックスを同じ幅で並べてフロートする方法を学びました。ただし、同じ高さのフローティング ボックスを作成するのは簡単ではありません。ただし、次の例のように、固定の高さを設定することで簡単に修正できます。
ボックス 1
一部のコンテンツ、一部のコンテンツ、一部のコンテンツボックス 2
一部のコンテンツ、一部のコンテンツ、一部のコンテンツ一部のコンテンツ、一部のコンテンツ、一部のコンテンツ
一部のコンテンツ、一部のコンテンツ、一部のコンテンツ
しかし、これはあまり柔軟ではありません。ボックスに常に同じ量のコンテンツが含まれていることを保証できれば問題ありません。しかし、多くの場合、内容は同じではありません。上記の例を携帯電話で試すと、2 番目のボックスのコンテンツがボックスの外に表示されることがわかります。ここで、CSS3 Flexbox が役立ちます。これは、ボックスを最長のボックスと同じ長さに自動的に引き延ばすことができるためです。
例
使用するフレックスボックスフレキシブル ボックスを作成するには:
ヒント：フレックスボックス レイアウト モジュールの詳細については、こちらをご覧くださいCSS フレックスボックスの章.
ナビゲーションメニュー
使用することもできますfloat水平メニューを作成するためのハイパーリンクのリスト:
Web レイアウトの例
を使用して Web レイアウト全体を行うことも一般的です。float財産：
例
その他の例
段落内で右に浮く境界線と余白のある画像
段落内で画像を右にフロートさせます。画像に枠線と余白を追加します。
キャプションが右に浮く画像
キャプション付きの画像を右にフロートさせます。
段落の最初の文字を左にフロートさせる
段落の最初の文字を左にフロートさせ、文字のスタイルを設定します。
float を使用した Web サイトの作成
float を使用して、ナビゲーション バー、ヘッダー、フッター、左側のコンテンツ、およびメイン コンテンツを含むホームページを作成します。
すべての CSS Float プロパティ
|
財産 |
説明 |
|---|---|
| ボックスサイズ | 要素の幅と高さの計算方法を定義します: パディングとボーダーを含めるかどうか |
| クリア | フローティングの隣にある要素の処理を指定します エレメント |
| 浮く | 要素を左右どちらにフロートさせるかを指定します。 全て |
| オーバーフロー | コンテンツが要素のボックスをオーバーフローした場合の動作を指定します |
| オーバーフロー-X | コンテンツが要素のコンテンツ領域からはみ出した場合、コンテンツの左端/右端をどうするかを指定します |
| オーバーフロー-y | コンテンツが要素のコンテンツ領域からはみ出した場合に、コンテンツの上端/下端をどうするかを指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。