-本日のアジェンダ-
1限目
学科 CSS基礎④
レイアウト作成プロパティについて
2限目
学科 CSS基礎④
横並びのプロパティ（float）について
3限目
学科 CSS基礎④
自由配置のプロパティ（position）について
4限目
学科 CSS基礎④
CSSのまとめ
5限目
学科 CSS基礎④
CSSのまとめ
本日のテーマ
自由にレイアウトを作れるようになりましょう
displayについて
displayタグを使う事で、様々なレイアウトを可能にします。まずはブロックレベル要素とインライン要素の違いと特徴をしっかりと確認しておきましょう。
参考サイト
- display－スタイルシートリファレンス
- 【フレックスボックス】CSS display:flexの使い方を解説 …
- display noneとvisibility hiddenとの違いとSEO上の注意点まとめ
width と height について
単純にボックスに幅と高さを持たせるタグになります。ただし、幅と高さが持てるのは、ブロックレベル要素になります。また、Webサイトの性質上細かなルールがいくつも存在します。まずはしっかりとボックスモデルの基礎となるという事を意識しておきましょう。
ワンポイントアドバイス
幅（width）については、ある程度指定した数値が反映されますが、高さ（height）の指定については、複雑なルールがあります。高さ（height）は、基本ニュートラルに設定し、やむを得ない場合のみ絶対値を指定すると覚えておくと、よいかもしれません。
参考サイト
border と padding と margin について
要素の中身（内容）があり、そのまわりの余白がpaddingです。 そのまわりにはborder（線）があり、それより外側の余白がmarginです。 … この図のようなCSSの余白の考え方はボックスモデルと呼ばれます。 なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。
ワンポイントアドバイス
CSSで最も理解度が求められるタグが「border」「padding」「margin」です。CSSの理解の最重要ポイントになりますので、しっかりと理解と確認をしておきましょう。また、役割を分けるのも制作のコツです。
borderは、罫線の装飾
paddingは、内側の余白
marginは、ボックスとボックスとの距離
というように、役割を明確にしておきましょう。
参考サイト
ボックスモデルについて
英語から翻訳-Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。 ウィキペディア（英語)
ボックスモデルとは HTMLのすべての要素は高さ、幅を持った四角形の中心にコンテンツ（文章、画像等）が入っています。 … ボックスモデルは、コンテンツを中心に4つの要素（コンテンツ, border, magrin, padding)で構成されています。
参考サイト
背景について
backgroundプロパティは、背景に関する指定をまとめて行う際に使用します。 指定の順序は問われません。また、必要のない指定は省略可能です。
参考サイト
「img」と「background」の違いについて
コーディングをする時「img」と「background」で画像をどちらとして使用するのかがとても重要になります。「img」はHTMLなので文法の意味を持ち、「 background 」はCSSなので、見た目の話しだけになります。
サイトデザインの重要ポイントになりますので注意しておきましょう。
横並び（float）について
floatプロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、その反対側に回り込みます。
clear について
clearプロパティは、floatの回り込みを解除するプロパティです。 clearプロパティは、float指定した要素の次の要素に指定します。 float要素が連続している場合、一番最後のfloat要素の次の要素に指定します。
ワンポイントアドバイス
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;を使うと適用できます。
※ただし厳密には文法として変であるという説もありますので、仕様変更やバグに気を付けて利用しましょう。
参考サイト
- いろいろと便利なoverflow:hidden;についてのあれこれ | CRA …
- 【CSS】今更clearfixについて解説してみる | アライド …
- CSS 回り込みと解除のサンプル(floatとclear) | ITSakura
positionについて
positionについては、使い方を誤るとややこしくなりますので、基本的な3つの使い方と使い分けをしっかりと覚えておきましょう。
- position: relative; （相対位置）
- position: absolute; （絶対位置）
- position: fixed; （固定位置）
ワンポイントアドバイス
position タグは、コーディングをする時に設計を複雑にしてしまいます。計画的に行うか、最後に行うなどして工夫すると良いでしょう。
参考サイト
- position …… ボックスの配置方法（基準位置）を指定する
- positionプロパティを身に着けよう！基本的な知識と使い方を …
- positionプロパティの正しい使用方法を図解で詳しく紹介 …
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。