質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

4811閲覧

div floatパズルの組み立て方がわからない

maring

総合スコア41

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

div

HTMLの<div>タグです。<div>要素は特に意味を持っていません。ひとかたまりのコンテンツに使用されるか、(セマンティックとして)他の要素では記述できないコンテンツに使用されることが多いです。

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/04/26 15:32

こちらの→DIVパズル2を組み立てており、答えは下2つのコードになるそうなのですが、
答えを見てもイマイチ仕組みが理解できません。
わからない部分↓

<div class="clearfix"> <div class="green-box"></div> <div class="midright"> <div class="clearfix"> <div class="midright2"> <div class="yellow-box"></div> <div class="lightblue-box"></div> </div> <div class="pink-box"></div> </div> <div class="red-box"></div> </div> </div> 

clearfixはわかっているつもりですが、主にクラスのmidrightやmidright2が何故必要なのかがわかりません。
まずこのパズルを組み立てるときの順序として、divでそれぞれの色のピースを作る(7色)→浮いている部分をfloatで修正するくらいの認識でいますが、考え方としてあっているのでしょうか?
clearfixが2つ出てくる理由も分からず仕舞いです。何かわかりやすい方法はないものでしょうか。

答え↓

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <link rel="stylesheet" href="../../../tools/style/reset.css" /> 8 <link rel="stylesheet" href="./style.css" /> 9 <title>div-puzzle-pc | lesson-2</title> 10 </head> 11 <body> 12 <div class="wrapper"> 13 <div class="blue-box"></div> 14 <div class="clearfix"> 15 <div class="green-box"></div> 16 <div class="midright"> 17 <div class="clearfix"> 18 <div class="midright2"> 19 <div class="yellow-box"></div> 20 <div class="lightblue-box"></div> 21 </div> 22 <div class="pink-box"></div> 23 </div> 24 <div class="red-box"></div> 25 </div> 26 </div> 27 <div class="orange-box"></div> 28 </div> 29 </body> 30</html>

css

1@charset "UTF-8"; 2 3/* clearfix用 */ 4.clearfix::after { 5 content: ''; 6 display: block; 7 clear: both; 8} 9 10.wrapper { 11 width: 400px; 12 margin: auto; 13} 14 15.blue-box { 16 width: 400px; 17 height: 100px; 18 background-color:#141f40; 19} 20 21.green-box { 22 width: 150px; 23 height: 250px; 24 background-color:#80bfa8; 25 float: left; 26} 27 28.midright { 29 width: 250px; 30 float: left; 31} 32 33.midright2 { 34 width: 150px; 35 float: left; 36} 37 38.yellow-box { 39 width: 150px; 40 height: 50px; 41 background-color:#dbd400; 42} 43 44.lightblue-box { 45 width: 150px; 46 height: 100px; 47 background-color:#0093b7; 48} 49 50.pink-box { 51 width: 100px; 52 height: 150px; 53 background-color:#ff9e6b; 54 float: left; 55} 56 57.red-box { 58 width: 250px; 59 height: 100px; 60 background-color:#8c2727; 61} 62 63.orange-box { 64 width: 400px; 65 height: 100px; 66 background-color:#d98d30; 67}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

まず、前提として、フロートを使ったレイアウトは時代遅れのもので、新規サイト作成で使うことはないと思います。
ですので、10年前ならともかく2021年現在で学ぶ必要はなく、既存サイトのメンテナンス案件の際などで必要になった時に調べる程度の理解でいいかと思います。

私見ですが、もっと新しいものに教材を見直した方がいいのではありませんか?


clearfixはわかっているつもりですが、主にクラスのmidrightやmidright2が何故必要なのかがわかりません。

通常フローでは、ボックスは縦に並びます。
フロートレイアウトは、フロートをつけることによって通常フローから外し、後続のコンテンツを回り込ませることによって、横並びを実現するものです。

ここで大切なのは、回り込むのは要素ではなくてコンテンツであるということです。要素を回り込ませたいのであれば、回り込ませたい要素にもフロートをつけなくてはいけません。

(ここまで、大丈夫でしょうか?)

さてしかし、質問のレイアウトのように横並びと縦並びが混在する場合、

  • フロートをつけないと要素は回り込まない
  • フロートをつけると横並びになってしまう

という問題が起きます。

これを解決するために、「縦並びになる要素たちを別の要素に押し込んで、それをフロートで横並びにする」という方法があります。
midrightやmidright2は、この「別の要素」に当たります。


まずこのパズルを組み立てるときの順序として、divでそれぞれの色のピースを作る(7色)→浮いている部分をfloatで修正するくらいの認識でいますが、考え方としてあっているのでしょうか?

個人的には違います。
私がこのレイアウトをフロートで組むときに考えるのは、以下のような感じです。

  1. 全体にサイズ指定があるので、まず、全体を包む要素を用意する
  2. 縦並びで3つのエリアに分割できるので、要素を3つ用意する
  3. 一番上と一番下はサイズと色を付けて終わり
  4. 真ん中は横並びで2つのエリアに分割できるので、要素を2つ用意して全部フロートする
  5. 内部要素が全てフロートしたので、親要素をclearfixする
  6. 左側はサイズと色を付けて終わり
  7. 右側は縦並びで2つのエリアに分割できるので、要素を2つ用意する
  8. 下側はサイズと色を付けて終わり
  9. 上側はは横並びで2つのエリアに分割できるので、要素を2つ用意して全部フロートする
  10. 内部要素が全てフロートしたので、親要素をclearfixする
  11. 右側はサイズと色を付けて終わり
  12. 左側は縦並びで2つの要素なので、要素を2つ用意する
  13. サイズと色を付けて全部終わり

つまり、
「レイアウトを縦並びまたは横並びのエリアに分割し、横並びの場合全てにfloat:leftをつけ、親要素にclearfixをつける」
の繰り返しです。


__clearfixが2つ出てくる理由も分からず仕舞いです。何かわかりやすい方法はないものでしょうか。 __

上記のとおりです。


繰り返しになりますが、以上のような知識は2021年では化石のようなあまり役に立たない上に難解なものなので、理解しなくて問題ないと思います。

現在はもっと楽な方法でレイアウトをしてます。

投稿2021/04/27 01:28

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maring

2021/04/27 11:55

自分が理解していない部分を汲み取って頂いて、すごくわかりやすい解説をありがとうございます。 時代にそぐわないコードだということも知りませんでしたので助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問