08 ホームページ中級講座 floatを使った周り込み

2020年4月13日2024年12月29日

URLをコピーしました！

CSSの周り込みプロパティ「float」を使った例

前回「07 ホームページ中級講座」の続きとなります。

ここで使用するHTMLファイルとCSSファイルは下記のページを参照ください。

動画で学ぶWebデザイン教室　 Fuku…

07ホームページ中級講座　CSSで作成するロゴとグラデーションを使ったナビゲーション | 動画で学ぶWebデザ… HTMLコードネットワークサービス　株式会社

前回「07 ホームページ中級講座」に引き続き、今回はCSSのプロパティ「float」を使用した例を学習します。floatは、画像やテキストの周り込みを制御するためのプロパティであり、新聞や雑誌のレイアウトのようなデザインを実現する際に欠かせません。

`float`プロパティの特徴と黒歴史

floatプロパティは、元々は画像やテキストの回り込みを制御するために作られたプロパティですが、親要素の高さが消える問題が発生し、回り込みを解除するためのclearや、clearfixと呼ばれるテクニックが必要だったり、意図しないレイアウト崩れが頻発し、デザインの保守性が低下する原因となっていました。これらの問題を解決するために、現代ではflexやgridが主流となり、floatの利用は主に画像やテキストの回り込みに限定されています。

`display: flex`との比較

floatの短所
- 親要素の高さが消える問題や、clearの指定が必要になる点が手間。
- レイアウトを細かく制御しづらい。
flexの長所
- 親要素にdisplay: flex;を指定するだけで、子要素が横並びになる。
- clear不要、回り込みの解除も自動的に行われる。
- 柔軟なレイアウト制御が可能（例：均等配置、余白の調整）。

`float`が必要な場面

現代のCSSではflexやgridが主流となっていますが、以下のような場合にはfloatが適しています：

新聞や雑誌のような「画像の周りにテキストを回り込ませるレイアウト」を実現したい場合。
特定の古いブラウザやレガシーコードのメンテナンスでfloatを使う必要がある場合。

完成見本のように、新聞記事風のデザインでは、floatを使用して画像の周りにテキストを配置することが重要です。では、floatを使用して画像の周りにテキストを配置することが重要です。

floatプロパティで画像を左に配置し、文章側は右に周り込み

この例では、画像を左側に配置し、右側の文章が自然に画像に回り込むようにデザインします。

HTMLの構造

HTMLでは、img要素にclass="f_left"を設定しています。このクラスに対して、CSSでfloat: left;を指定することで画像が左側に寄り、文章が右側に回り込むようになります。また、画像と文章が密着して見えるのを防ぐために、画像の右側に余白（margin-right）を設定しています。

HTML側では、img要素にclass(l_float)を設定しています。このclass名に、css側で、float:left を指定し、画像と隣あった場合に文章とひっついて見えるので、そのための余白を画像側から右側に余白(margin-right)をあけています。

<p>
    <img src="images/laptop.png" alt="パソコン" class="f_left">
    枠組みも対象文を列挙し記事ますんため、引用するられるフリーを検証毎厳格の活用内容をするれても満たすあっ、記事の原則は、利用作るメディアと陳述しこととして著作自由ないでてなりますあれ。しかし、疑義の出版作も、ペディアの決議即し前記有効ある原則を一見し、そのルールであたりてtheで依頼掲げることが決議よれれます。ただしで、引用下が利用されるている文章をそのままさ満たすことは、決議でなけれ、場合に対しては該当日の既存としてライセンス上の問題は含むことに、本投稿会は、可能の引用をするて要件に制裁さたておきます。
</p>

.f_left {
    float: left;         /* 画像を左側に配置 */
    margin-right: 1em;   /* 右側に余白を設定して文章との間隔を調整 */
    max-width: 50%;      /* レスポンシブ対応のため最大幅を設定 */
    height: auto;        /* アスペクト比を維持 */
}

float: leftの利用
- 画像を左側に寄せ、文章が右側に回り込むように設定。
- 左寄せ（または右寄せ）の回り込みは、記事やブログ形式のレイアウトに最適。
余白の調整
- margin-right: 1em;を設定して、画像と文章が密着しないように調整。
- 必要に応じてmargin-bottomも指定すると、回り込み解除後の配置が整います。
レスポンシブ対応
- max-width: 50%;を設定し、画面サイズに応じて画像が幅を超えないように制御。
- height: auto;で画像のアスペクト比を保持しつつ調整可能。

folatで画像が右、文章が左の周りこみ

HTMLの構造：HTMLでは、img要素にclass="r_float"を設定します。このクラスにCSSでfloat: right;を指定することで、画像を右側に寄せ、文章が左側に回り込むようになります。また、画像と文章が密着して見えないように、画像の左側に余白（margin-left）を設定します。

<p>
    <img src="images/line_chart.png" alt="グラフ" class="r_float">
    方針の方針が公開するれる以下を重要ます目的ですばとするから、企業を著作するます状態を文章ないを既存するて、さらにありななか。著作権が削除あるれん言語だあるば問題はたかもしなます。ただし、既存権と該当さればください文章を主題なで修正行わば、「文献が、これでも著作が明瞭」ますFree文字をしに対する条件の形式を引用示しでます。
</p>

.r_float {
    float: right;        /* 画像を右側に配置 */
    margin-left: 1em;    /* 左側に余白を設定して文章との間隔を調整 */
    max-width: 50%;      /* レスポンシブ対応のため最大幅を設定 */
    height: auto;        /* アスペクト比を維持 */
}

float: rightの利用
- 画像を右側に寄せ、文章が左側に回り込むように設定。
- 右寄せの回り込みは、グラフや図表などが記事内で補足情報として配置される場合に有効。
余白の調整
- margin-left: 1em;を設定して、画像と文章が密着しないように調整。
- 必要に応じてmargin-bottomも追加することで、回り込み解除後の配置が整います。
レスポンシブ対応
- max-width: 50%;を設定することで、画像がデバイスの幅を超えないように調整。
- height: auto;を指定してアスペクト比を保持。