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

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

HTMLとCSSは前回のファイルを引き続き使いますので用意しておきましょう。

ここでは、cssの周り込みのプロパティ「float」を使った例を行なっています。

floatは、画像周りこみを制御するプロパティです。

display:flexを使った横並び用のプロパティが誕生する前までは、ボックスを横に並べるプロパティとして使われていたfloatですが、解除するためのclearプロパティや、float 特有の浮いている という仕様で、ボックスの高さが消えてしまい、float で同時に指定したbackground-image やborder、margin-bottomなどが、うまく適用されないという悩みが出てきます。その場合、高さを指定したり、overflow:hidden で任意の高さを指定するなどの苦肉の策がとられていました。

flexは、親要素に指定することで、中の子要素が横に並び、尚且つ解除もいらない、フレックスボックスという仕様でが多く利用されています。

但し、今回の完成見本のような新聞記事にあるような周り込みには欠かせないfloatです。

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

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

HTML側

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

CSS側

.l_float {
     float: left;
     margin-right: 1em;
 }

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

HTML側では、img要素にclass(r_float)を設定しています。このclass名に、css側で、float:rightを指定し、画像と隣あった文章の余白を画像から見て左側に余白をあけます。

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

.r_float {
     float: right;
     margin-left: 1em;
 }

float を解説した動画

動画を参照しながら、float の使い方を覚えましょう。