1. ウェブ開発の学習
  2. コア学習モジュール
  3. CSS のレイアウト
  4. 浮動ボックス

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

浮動ボックス

元々は、テキストブロック内の画像を浮動させるためのものだった float プロパティは、ウェブページで段組みのレイアウトを作成するために最もよく使用されるツールの 1 つになりました。フレックスボックスやグリッドの出現により、この記事で説明するように、これで元の目的に戻っています。

前提知識: HTML によるコンテンツの構造化、 CSS によるスタイル設定の基本、 基本的なテキストとフォントのスタイル設定、 CSS レイアウトの基本概念の基礎知識。
学習成果:
  • 浮動ボックスの目的を理解すること。テキストの段組み内に画像を浮動させるため、他にもドロップキャップや浮動インセット情報ボックスのようなテクニックがある。
  • 浮動ボックスはかつては段組みのレイアウトに使用されていましたが、現在ではより有益なツールが利用できるようになったため、その用途は適さなくなったこと。
  • 浮動ボックス プロパティを使用して浮動ボックスを作成すること。
  • clear や display: flow-root 値を使用して浮動を解除すること。

浮動ボックスの背景

float プロパティは、ウェブ開発者がテキストの段の中に画像が浮動し、テキストがその左または右に回り込むようなレイアウトを実装するために導入されました。新聞のレイアウトでよく見られるようなものです。

しかしウェブ開発者はすぐに画像だけでなく何でも浮動させることができることに気づいたので、浮動ボックスの使用は広がりました。例えば、ドロップキャップのような楽しいレイアウト効果です。

浮動ボックスは一般に、互いに並ぶように浮動する、段組みの情報を含むウェブサイト全体のレイアウトを作成するために使用されてきました（既定のふるまいでは、列はソースに表れる順序と同じ順序で上下に配置されます）。 より新しくより良いレイアウトテクニックが利用可能なので、この用途で浮動ボックスを使うことは過去のテクニックとみなされるべきです。

この記事では、浮動ボックスの正しい使い方に集中します。

簡単な浮動ボックスの例

浮動ボックスの使い方を探りましょう。要素の周りにテキストのブロックを浮かべることを含む本当に簡単な例から始めましょう。 コンピューター上に新しい index.html ファイルを作成し、簡単な HTML テンプレートを使ってそれを埋め、適切な場所に以下のコードを挿入することで、追いかけていくことができます。節の最後では、最終的なコードがどのようになるべきかの実例を見ることができます。

まず、簡単な HTML から始めましょう。 HTML の body に次のコードを追加し、それまでの内部にあるものはすべて削除します。

html
<h1>浮動ボックスの例</h1>

<div class="box">浮動ボックス</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet.
</p>

<p>
  Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
  orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
  ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
  ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis
  ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
  a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

これで、以下の CSS を HTML に適用します。（<style> 要素を使用するか、 <link> を使用して別個の .css ファイルでするかです。任せます。）

css
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font:
    0.9em/1.2 "Helvetica",
    "Arial",
    sans-serif;
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207 232 220);
  padding: 1em;
}

保存して更新すると、期待通りのものが表示されます。ボックスはテキストの上にあり、通常フローになっています。

ボックスを浮動させる

ボックスを浮動させるには、次のように float と margin-right プロパティを .box ルールに追加します。

css
.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207 232 220);
  padding: 1em;
}

これで保存して更新すると、次のように表示されます。

浮動ボックスがどのように機能するかを考えてみましょう。 float が設定されている要素（この場合は <div> 要素）は、文書の通常のレイアウトフローから除かれ、その親コンテナー（この場合は <body>）の左側に固定されます。通常のレイアウトフローで浮動した要素の下に来るコンテンツは、これで浮動ボックスの周りを回り込み、浮動した要素の上まで右側の空間を埋めます。そこで、コンテンツは停止します。

コンテンツを右に浮動させると、まったく同じ効果が得られますが、逆になります。 つまり、浮動した要素は右に固定され、コンテンツはその左側を回り込みます。 float の値を right に変更し、最後のルールセットで margin-right を margin-left に置き換えて、結果がどうなるかを確認してください。

浮動ボックスを視覚化

テキストを遠ざけるために浮動ボックスにマージン（margin、余白）を追加することはできますが、テキストを浮動ボックスから遠ざけるためにテキストにマージンを追加することはできません。 これは、浮動ボックスは通常フローから外され、後続アイテムのボックスが実際には浮動ボックスの背後にあるためです。例にいくつかの変更を加えることによってこれを実証することができます。

テキストの最初の段落、つまり浮動ボックスの直後の段落に special のクラスを追加してから、CSS に次のルールを追加します。 これらは続く段落に背景色を設定します。

css
.special {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
}

効果を見やすくするために、浮動ボックスの margin-right を margin に変更すると、浮動ボックスの全周にマージンができます。 以下の例のように、浮動ボックスの真下にある段落の背景を見ることができます。

続く要素の行ボックスが短くなっているので、テキストは浮動ボックスを回り込みますが、浮動ボックスは通常フローから除かれるため、段落の周りのボックスは全幅のままになります。

浮動ボックスの解除

浮動ボックスは通常フローから除かれ、他の要素がその横に表示されることを見てきました。したがって、続く要素が上方向に移動するのを止めたい場合は、それを解除する必要があります。これは clear プロパティによって実現できます。

前の例の HTML では、浮動しているアイテムの下の 2 番目の段落に cleared のクラスを追加します。 次に、 CSS に以下を追加してください。

css
.cleared {
  clear: left;
}

続く段落では浮動ボックスがクリアされ、並んで現れなくなったことがわかります。 clear プロパティは次の値を受け入れます。

  • left: 左に浮動しているアイテムをクリアします。
  • right: 右に浮動しているアイテムをクリアします。
  • both: 左や右に浮動しているアイテムをどちらもクリアします。

浮動ボックスを回り込むボックスのクリア

これで、浮動ボックスに続く何かをクリアする方法はお分かりいただけたと思いますが、背の高い浮動ボックスと短い段落があり、両方の要素を含むボックスがある場合、どうなるかを見てみましょう。

問題

文書を変更して、最初の段落と浮動ボックスを、<div> に wrapper クラスがついた要素で囲むようにします。

html
<div class="wrapper">
  <div class="box">Float1</div>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet.
  </p>
</div>

CSS で、.wrapper クラスに次のルールを追加してからページを再読み込みします。

css
.wrapper {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
}

加えて、元の .cleared クラスを削除します。

css
.cleared {
  clear: left;
}

段落に背景色を付けた例と同じように、背景色は浮動ボックスの後ろに来ることがわかります。

繰り返しになりますが、これは浮動ボックスが通常のフローから外れているためです。浮動ボックスと、浮動ボックスに回り込む最初の段落のテキストを一緒に囲めば、その後のコンテンツはボックスから外されると思うかもしれません。しかし、上記のようにそうではありません。

display: flow-root

この問題を解決するには、値 flow-root を display プロパティに使用します。これはハックを用いずに BFC を作成するためだけに存在するもので、使用することで意図しない結果を招くことはありません。

css
.wrapper {
  background-color: rgb(148 255 172);
  padding: 10px;
  color: purple;
  display: flow-root;
}

まとめ

浮動ボックスについて知っておく必要があることは以上です。次の記事では、この知識をどれだけ理解し、定着させられたかを調べるためのテストをいくつかご紹介します。

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告