学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
float について

2限目
学科 CSS基礎④
clear について

3限目
学科 CSS基礎④
横並びについて

4限目
学科 CSS基礎④
CSSのまとめ

5限目
学科 CSS基礎④
グラフィックツールの復習

本日のテーマ

回り込みについて

float について

floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。

clear について

clearプロパティは、floatの回り込みを解除するプロパティです。 clearプロパティは、float指定した要素の次の要素に指定します。 float要素が連続している場合、一番最後のfloat要素の次の要素に指定します。

https://samplesdl.me/training_html-css/layout_sample20210806.zip

ワンポイントアドバイス

floatは約十数年ぐらいの間、CSSのレイアウトで横並びをさせる手法として多くのサイトで利用されていました。現在ではそれに代わる手法がいくつか用意されていますが、長い間多くのデザイナーさん達が使ってきているので、現サイトの更新業務としては、まだまだ遭遇する可能性が高いので、しっかりとその仕組みを理解しておきましょう。

参考サイト

float を clear する方法について

floatを解除する方法はいくつかありますが、抑えておきたい方法として３つはしっかり覚えておきましょう。

① float を clear する方法について「 clear 」を使う

floatを指定した要素の後に来る要素にclearを指定する
関係性は必ず同階層である事（親子関係では適用されない）

② float を clear する方法について「 clearfix 」を使う

float している要素の親要素に、疑似要素の:afterを利用し下記のように記述します。
※①のようにclear出来ない場合にこちらを使うと良いでしょう。

セレクタ:after {
display: block;
clear: both;
content: “”;
}

③ float を clear する方法について「 overflow: hidden;  」を使う

float している要素の親要素に、overflow: hidden;を使うと適用できます。
※ただし厳密には文法として変であるという説もありますので、仕様変更やバグに気を付けて利用しましょう。

参考サイト

サンプルページ（レイアウト見本）

サンプルページ（横並びについて）

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。