[初回公開] 2021年09月10日
ウェブサイトのレイアウトやデザインで利用される CSS で div タグ内に記載した内容やリストタグの内容を横並びにするために float を利用することがあるが、float を設定した要素の後ろのパーツも一緒に横並びになってしまう場合の原因と解決方法について紹介する。
1.CSS の float とは
ウェブサイトのレイアウトやデザインで利用される CSS には HTML に記載したパーツ(要素)を横並びにする float と呼ばれるプロパティがある。
HTML に記載したタグは基本的に縦方向に並ぶが、float により横に並ぶため例えば div タグをブロックに見立てている場合や、リストタグの内容に対して用いられることが多い。
float を利用すると要素をの左右どちらかの側に沿うように配置され、テキストやインライン要素がその周りを回りこむようになる。
2.CSS の float を使うメリット
CSS の float を使うメリットとしては、要素を横並びにしたい場合に画面サイズに合わせて改行して表示されることである。
float がブラウザに実装されていない時代は TABLE タグで横並びを実現していたが、コンテンツが画面サイズ内に収まらない場合は横スクロールが発生して利便性が落ちるデメリットがあった。
しかし、CSS でレイアウトすることが主流になってからは table タグによるレイアウトから float を利用されることが多くなり、利用者の画面サイズに応じてレイアウトが自動的に変わるため利便性が上がっている。
3.CSS の float で全て横並びになる原因
CSS の float を利用すると意図しない要素も回り込んでしまい全て横並びになることがあり、その原因としては float させたい範囲が明確になっていないからである。
今回、下図のように個々の画像を div タグで囲み、float で横並びになるように行った。
上図でコーディングした HTML と CSS は下記となり、親となる div タグ内にさらに子となる div タグによる要素を配置し、その子に対して float を指定している。
<div class=”cardData”>
<div class=”card”><img src=”./01.png”></div>
<div class=”card”><img src=”./02.png”></div>
<div class=”card”><img src=”./03.png”></div>
<div class=”card”><img src=”./04.png”></div>
</div>
.cardData {
}
.cardData .card {
float: left;
margin: 3px 3px 3px 3px;
padding: 6px 6px 6px 6px;
border: 2px solid #C4E3EE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
全て横並びになる事象としては float の指定をしている子の div となる class=”card” のみだが、その下にある文字も一緒に横並びになってしまっている。
float していなければ class=”cardData” がある div タグ内に収まって縦の並びを維持できていたパーツが、class=”card” を float で浮かせたことにより class=”cardData” が無くなったと見なされてそれ以降のパーツがせり上がって来ているためである。
4.指定した箇所のみ float を指定する方法
float した後ろのパーツも横並びになってしまう場合の解決方法としては、float したパーツの親になる div タグにも同じ float の指定を行うことで float したパーツとその親のパーツが「前面」「背面」を示す Z 軸に対して同じ高さとなり縦並びが維持されるようになる。
.cardData {
float: left; → ここを追加
}
.cardData .card {
float: left;
margin: 3px 3px 3px 3px;
padding: 6px 6px 6px 6px;
border: 2px solid #C4E3EE;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
下図は class=”card” にも float を設定して全て横並びになるのを防いだ様子である。
float は「浮かせる」の意味があるように親と子の Z 軸の位置関係を合わすことで横並びを制御することができる。
関連記事
X(旧 Twitter)で同じ Wi-Fi を利用する家族や社員に「おすすめユーザー」に表示されるのを防ぐ方法
X(旧 Twitter)で知り合いとしてフォロー相手の候補が表示される機能があるが、この知り合いが同じ Wi-Fi を利用する家族や社員が表示される現象が発生していると報告があり、原因と「知り合い」に表示されるのを防ぐ方法を紹…
フリーランスも一読しておくべき「EC サイト構築・運用セキュリティガイドライン」について
EC サイトは商品を仕入れて販売する卸業者だけでなく、製造者もウェブサイトを設けて直接販売できる売上に直結する重要なツールだが、会員情報の漏洩や EC サイトの改ざんなど素人が見様見真似で構築して被害に遭うと会社の名…
GPS の無いパソコンでも Google はあなたの自宅や会社が割り出せる理由
パソコンで Google など検索サイトを利用していると画面下部に自分の現在いる住所がかなり特定された状態で表示されることがあり、位置情報を特定する GPS が無い環境下で Google はどのように所在地を特定しているのかと、そ…