フロート関連のCSSプロパティ
この記事ではフロート関連のCSSプロパティについて説明します。
floatとclearプロパティについて、利用用途や記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 <section style="height: auto; color: black;">
38 <header><h4>float: right</h4></header>
39 <section class="sample-view">
40 <div class="float-right">float right</div>
41 <div class="content">
42 <p>
43 paragraph 1-1
44 paragraph 1-2
45 </p>
46 <p>paragraph 2</p>
47 </div>
48 <div class="clearfix"></div>
49 </section>
50 </section>
51 </article>
52 </main>
53</body>
54</html>フロート関連のCSSプロパティ
floatとclearプロパティ
1.content {
2 width: 300px;
3 height: 100px;
4}
5
6.content p {
7 background-color: lightblue;
8 margin: 10px;
9}
10
11.float-left {
12 float: left;
13 width: 150px;
14 margin-right: 20px;
15 background-color: lightblue;
16}
17
18.float-right {
19 float: right;
20 width: 150px;
21 margin-right: 20px;
22 background-color: lightblue;
23}
24
25.clearfix {
26 clear: both;
27 display: none;
28}float は、CSSのプロパティの1つで、要素を親要素内で左右に浮かせて配置し、他の要素がその横に回り込むレイアウトを作るために使用されます。floatプロパティは特に、テキストの周りに画像やボックス要素を配置するためによく使われますが、現在ではflexやgridなどの新しいレイアウト手法が主流となっており、floatの使用は減少しています。
float-leftクラスでは、floatプロパティにleftが指定されています。適用された要素が親要素の左側に浮かび、次の要素が右側に回り込みます。float-rightクラスでは、floatプロパティにrightが指定されています。適用された要素が親要素の右側に浮かび、次の要素が左側に回り込みます。clearfixクラスでは、clearプロパティにbothが指定されています。このクラスを使うことで、次の要素が浮いた要素に回り込むことを防ぎます。
floatの使い方
値
left: 要素を左に浮かせ、他の要素を右側に回り込ませます。right: 要素を右に浮かせ、他の要素を左側に回り込ませます。none: これはデフォルト値で、要素を浮かせません。inherit: 親要素からfloatプロパティの値を継承します。
clearプロパティ
floatを使う際には、次の要素が浮いた要素に回り込むことがあります。それを防ぐためにclearプロパティを使用します。clearの値は次のとおりです。left: 左側に浮いた要素を回避します。right: 右側に浮いた要素を回避します。both: 両方（左と右）に浮いた要素を回避します。none: 要素が回り込むことを許可します。デフォルト値です。
注意点
floatを使うと、親要素の高さが浮かせた要素の高さを無視してしまう問題が発生することがあります。これを回避するためには、親要素にclearfixテクニックやoverflow: hidden;を使用します。- レスポンシブデザインや複雑なレイアウトでは、
floatはflexやgridに比べて扱いが難しくなることが多いため、flexやgridの利用が推奨されます。
まとめ
floatは要素を左右に浮かせて、テキストや他の要素をその周りに配置するための古い手法ですが、今でも簡単なレイアウトや画像の回り込みなどに使われることがあります。しかし、より柔軟で簡単なレイアウトを作るには、flexboxやgridが推奨されます。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。