スキルテスト: 浮動ボックス

このスキルテストの目的は、 CSS の浮動ボックスを理解しているかを評価するために、 float と clear プロパティと値、そして浮動ボックスをクリアするその他の方法を使用することです。今までに扱った素材のさまざまな要素を使用する、 3 つの小さな課題に取り組んでいただきます。

メモ: 以下のコードブロックで "Play" をクリックすると、 MDN Playground で例を編集することができます。コードをコピー（クリップボードアイコンをクリック）し、CodePen、JSFiddle、Glitch などのオンラインエディターに貼り付けることもできます。行き詰まった場合は、コミュニケーションチャンネルのいずれかに連絡してください。

課題 1

この課題では、クラスが float1 と float2 の 2 つの要素をそれぞれ左右に浮動させる必要があります。テキストは下記の画像のように 2 つのボックスの間に現れるはずです。

テキストの左と右に表示されている 2 つのブロック。

以下のライブコードを更新して、完成例を再現してみてください。

html

<div class="box">
  <div class="float float1">One</div>
  <div class="float float2">Two</div>
  <p>2 つのボックスを、このテキストの左右に浮動ボックスとして配置してください。</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}
.box {
  padding: 0.5em;
}
.float {
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rebeccapurple;
  color: #fff;
  padding: 1em;
}

css

.float1 {
}

.float2 {
}

ここをクリックすると、解決策を表示します。

次のように、両方のボックスに float を使用します。

css

.float1 {
  float: left;
}

.float2 {
  float: right;
}

課題 2

この課題では、クラスが float の要素を左に浮動させてください。そして、最初の行のテキストはその要素の隣に表示し、続く行のテキスト（クラス below を持つ）はその下に表示していただきたいです。

最終結果は下記の画像のようになるはずです。

テキスト行の左側に表示されるボックスで、下記にもテキストが表示されます。

以下のライブコードを更新して、完成例を再現してみてください。

html

<div class="box">
  <div class="float">浮動ボックス</div>
  <p>この文は浮動ボックスの隣に現れます。</p>
  <p class="below">この文を浮動ボックスの下記に現れるようにしてください。</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}
.box {
  padding: 0.5em;
}
.float {
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rebeccapurple;
  color: #fff;
  padding: 1em;
}

css

.float {
}

.below {
}

ここをクリックすると、解決策を表示します。

アイテムを左に配置し、 2 つ目の段落のクラスに clear: left を追加する必要があります。

css

.float {
  float: left;
}

.below {
  clear: left;
}

課題 3

この課題では、浮動ボックスがあります。浮動ボックスとテキストを包むボックスは、浮動ボックスの後ろに表示されています。利用できる最新の方法を使用して、下記の画像のようにボックスの背景を浮動ボックスの下まで拡張させてください。

テキストの右に表示されるブロックで、どちらも背景色のボックスで囲まれています。

以下のライブコードを更新して、完成例を再現してみてください。

html

<div class="box">
  <div class="float">浮動ボックス</div>
  <p>この文は浮動ボックスの隣に現れます。</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
* {
  box-sizing: border-box;
}

.box {
  padding: 0.5em;
}

.float {
  margin: 15px;
  width: 150px;
  height: 150px;
  border-radius: 5px;
  background-color: rgb(207 232 220);
  padding: 1em;
  color: #fff;
}

.box {
  background-color: rebeccapurple;
  padding: 10px;
  color: #fff;
}

css

.float {
  float: right;
}

.box {
}

ここをクリックすると、解決策を表示します。

浮動ボックスの下にあるボックスを解除するには、 .box のクラスに display: flow-root を追加します。他にも、 overflow や clearfix ハックを使用する方法もありますが、教材では、この目的を達成するための最新の方法として、 flow-root メソッドについて詳しく説明しています。

css

.box {
  display: flow-root;
}

課題 1

課題 2

課題 3

関連情報