CSS レイアウト - フロートの例
- 前のページ CSS フロートクリア
- 次のページ CSS inline-block
このページでは、一般的な浮动の例を提供しています。
グリッド / 等幅のボックス
使用することで、 float 属性を使用して、簡単に並べて浮动する内容フレームを作成できます：
例
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 3つのボックス（4つのボックスは25%、2つのボックスは50%、など） */
padding: 50px; /* 画像間にスペースが必要な場合 */
}
box-sizingとは何ですか？
3つの浮动ボックスを並べて作成することができます。しかし、各ボックスの幅を広げる内容（例えば、パディングやボーダー）を追加すると、このボックスが壊れます。 box-sizing 属性は、フレームの合計幅（および高さ）にパディングやボーダーを含めることができ、パディングがフレーム内に留まり、壊れないようにします。
私たちの CSS Box Sizing この章では、box-sizing属性に関するより多くの知識を学びます。
画像を並べて
この種のグリッド（ボックスのグリッド）は、画像を並べて表示するのに使われます：
例
.img-container {
float: left;
width: 33.33%; /* 3つのボックス（4つのボックスは25%、2つのボックスは50%、など） */
padding: 5px; /* 画像間にスペースが必要な場合 */
}
等幅のボックス
この例では、等しい幅で並べて浮动するフレームの方法を学びました。しかし、同じ高さを持つ浮动するフレームを作成することは簡単ではありません。しかし、簡単な解決策として、以下の例のように固定の高さを設定します：
Box 1
Some content, some content, some content
Box 2
Some content, some content, some content
Some content, some content, some content
Some content, some content, some content
例
.box {
height: 500px;
}
しかし、これにより、フレックスボックスの柔軟性が失われます。フレックスボックス内に常に同じ数の内容があることを保証できる場合には、それができます。しかし、多くの場合、内容は異なります。上の例を携帯電話で試してみると、第二个のフレックスボックスの内容がフレックスボックスの外に表示されることがあります。これがCSS3 Flexboxが役立つ場所です - なぜなら、それがフレックスボックスを自動的に伸ばして最も長いフレックスボックスと同じ長さにすることができるからです：
例
Flexboxを使用してフレックスボックスを作成します：
Flexboxの唯一の問題は、それがInternet Explorer 10またはそれ以前のバージョンでは動作しないことです。私たちの CSS Flexbox Flexboxのレイアウトモジュールに関する知識をさらに学ぶには、この章を参照してください。
Webレイアウトの例
使用 float 属性は、Webレイアウト全体を完了することもよくあります：
例
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
他の例
- ボーダーとマージン付きの画像を段落の右側にフロートさせます。
- 画像を段落の右側にフロートさせます。画像にボーダーとマージンを追加します。
- タイトル付きの画像を右側にフロートさせます。
- タイトル付きの画像を右にフロートさせます。
- 段落の最初の文字を左にフロートさせます。
- 段落の最初の文字を左にフロートさせ、その文字のスタイルを設定します。
- フロートでウェブサイトを作成する
- フロートを使用して、水平ナビゲーションバー、ヘッダー、フッター、サイドナビゲーションバー、メインコンテンツを持つホームページを作成します。
すべての CSS フロート属性
| 属性 | 説明 |
|---|---|
| box-sizing | 要素の幅と高さの計算方法を定義します：それがインラインパディングとボーダーを含むべきかどうか。 |
| clear | クリアされた要素の横に浮動可能な要素とその側面を指定します。 |
| float | 要素がどのようにフロートするかを指定します。 |
| overflow | 内容が要素のボックス内にオーバーフローした場合に何が起こるかを指定します。 |
| overflow-x | オーバーフローされた要素の内容エリアの左/右エッジの処理方法を指定します。 |
| overflow-y | オーバーフローされた要素の内容エリアの上/下エッジの処理方法を指定します。 |
- 前のページ CSS フロートクリア
- 次のページ CSS inline-block
