前回の復習
- リセットCSSについて
- CSSの基本構造
- ボックスモデルについて（本日のメイン）
- margin: ボックスモデルの最外縁（ボーダーの外側）にある余白。
- border: ボックスの枠線。
- padding: ボーダーの内側にある余白。
- content: テキスト・画像・ボタンなどの内容。
- スタイルシートのセレクタについて
- 型セレクタ
- 子孫結合子セレクタ
- 幅・高さの単位
- L3.5.1 px（ピクセル値）
行間無し設定にしてもフォントによっては下部に隙間ができる（ベースラインの関係上） - L3.5.2 ％（要素の割合（百分率））
- L3.5.3 em（要素の割合）
- 親要素のサイズに対する割合
- L3.5.4 rem（ルート要素の割合）
ルート（htmlタグ）のサイズに対する割合。 - 最近はemよりもremを推奨する傾向がある。
- L3.5.5 vw（画面の表示幅の割合）
- L3.5.6 vh（画面の高さの割合）
- L3.5.7 calc関数（値の計算）
固定値のマージンを作成したいときなどに使用する。 - L3.6 色の指定方法
- L3.6.1 色とグラデーション
- カラーネーム
- #rgb
- #rrggbb
- #rrggbba
- rgb(r,g,b)
- rgba(r.g.b.a)
- hsl(h.s,l)
- hsla
- 線形グラデーション
- 放射グラデーション
- L3.8 セレクタの得点
本日の訓練内容
Lesson4 CSSでレイアウトを作りましょう
L4.1 はじめに
L4.1.1 概要
CSSの中でレイアウトを設定するプロパティ
- レイアウト系プロパティ
- ボーダー系プロパティ
- パディング系プロパティ
- マージン系プロパティ
- レイアウト関係その他のプロパティ
L4.2 レイアウト系プロパティ
L4.2 widthプロパティ（内容の幅）
width: 内容の幅;box-sizing プロパティの値により「content」の幅か「content + padding + border」の合計値になるかが決定する。初期値は「auto」。
L4.2.2 max-with プロパティ（幅の最大値）
max-width: 幅の最大値;ウィンドウを拡大したときに指定値以上の幅にならないようにする。初期値は「none」。
L4.2.3 min-width プロパティ（幅の最小値）
min-width; 幅の最小値初期値は「auto」。
L4.2.4 heightプロパティ
box-sizingプロパティの値により「content」の幅か「content + padding + border」の合計値になるかが決定する。初期値は「auto」。
4.2.7 floatプロパティ（回り込み）
ボックスを画面から分離させて移動するイメージ。
floatプロパティを使用した場合は回り込みの解除を指定する必要がある。
- clear: both;プロパティを使用
- clear: both;プロパティを使用（after疑似要素を使用）
- 親要素にoverflow: hidden;プロパティを使用（簡単）
L4.2.9 position/top/left/bottom/right/z-index プロパティ（要素の配置方法）
コンテンツ動詞を重ねる場合はpositionを使う（floatは並べる）。
static（初期値）
relatine
相対配置。staticを指定した場合に表示される位置が基準位置となる。
absolute
絶対配置。親要素にstatic以外の値が指定されている場合は親要素の左上が基準位置地となる。
親要素にstatic以外の値が指定されていない場合はウィンドウの左上が基準位置となる。
fixed
絶対配置。スクロールしても画面上での位置が固定される。
positionプロパティの使用例
- 元の表示位置の相対位置に配置（元の表示位置のデータが保管される）
元の表示位置（position: static;プロパティで表示される位置）
position: relative;プ指定してtop/bottom/left/lightプロパティで元の表示位置からの相対位置を指定する。 - 親要素からの相対位置に配置
親要素にpositon: relateve;プロパティを指定
自要素にposition:absolute;プロパティを指定 - ページ全体からの相対位置に配置
親要素にpositionプロパティを指定しない
自要素にposition: absolute;プロパティを指定する。 - 画面（ウィンドウ）上の固定位置に配置
position: fix;プロパティを指定して配置する位置を指定
画面をスクロールしても表示位置は継承されない。
- block
- inline
- inline-block
- none
- flex
- inline-flex
- grid
- inline-grid
L4.2.11 overflowプロパティ（ボックスからあふれた内容の処理方法）
- visible（初期値）
内容がボックスからはみ出して表示される - HIDDEN
はみ出した部分は非表示になる。 - scroll
- auto
L4.3 ボーダー系プロパティ
L4.1 border-style
L4.6 その他のプロパティ
L4.6.1 border-radiusプロパティ（ボーダーの丸み）
ボックスの４つのコーナーの角丸を指定する。
コーナーの角丸値は、楕円の半径値を「左上水平方向」「右上水平方向」「右下水平方向」「左下水平方向」「/」「左上垂直方向」「右上垂直方向」「右下垂直方向」「左下垂直方向」の順にスペースで区切って指定する。
L4.6.2 box-shadowプロパティ（ボックスの影）
「水平方向の影のオフセット距離」「垂直方向の影のオフセット距離」「ぼかしの距離」「
L4.6.3 box-sizing
L4.6.4 contentプロパティ
Lesson-6 CSSで飾りを追加しましょう
L6.2 バックグラウンド系プロパティ
L6.2.1 background-colorプロパティ（背景色）
L6.2.2 background-attachmentプロパティ（背景画像の位置）
- fixed（スクロール時固定）
- scroll
L6.2.3 background-imageプロパティ（背景画像のファイル）
L6.2.4 background-repeatプロパティ（背景画像の繰り返し）
- repeat（初期値）
- repeat-x
- repeat-y
- no-repeat
L6.2.5 backgroundプロパティ（背景の一括指定）
color, attachment, iamge, repeatプロパティの値を一括して指定する。
順不同でスペースで区切って指定
L6.2.6 background-sizeプロパティ（背景画像のサイズ）
- auto（初期値）
- contain
- cover
- 幅・高さ
- パーセンテージ
本日の訓練内容
メモ
-本日のアジェンダ-
1限目
学科 CSS基礎③
レイアウト作成プロパティについて
2限目
学科 CSS基礎③
横並びのプロパティ（float）について
3限目
学科 CSS基礎③
自由配置のプロパティ（position）について
4限目
学科 CSS基礎③
CSSのまとめ
5限目
学科 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 タグは、コーディングをする時に設計を複雑にしてしまいます。計画的に行うか、最後に行うなどして工夫すると良いでしょう。
参考サイト
本日の課題①
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。
本日の課題②
過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。
