今日の教材：Lesson-4 CSS でレイアウトを作りましょう
　　　　　　Lesson-5 CSS で文字飾りを付けましょう
　　　　　　Lesson-6 CSS で飾りを追加しましょう

object-fitプロパティ（画像のトリミング）

L4.6.5 object-fit プロパティ（画像トリミング）https://webst8.com/blog/css-object-fit/

ボックスにはまるように画像をトリミングする。指定しないとボックスがはみ出た状態で表示になったりする。ポートフォリオの画像の縦横合わせたいときとか使えるが、乱用しない！基本はPhotoshopやIllustratorでやってから！大量の写真をトリミングしてギャラリー作成して、など頼まれた時くらい。よく使うのはcover：ボックスにはめようとする。教材例：カメ参照。coverで、カメのはめ込みたい場所を変えたいとき、position使う。

object-fit: はめ込み方法;

img タグや video タグの中身のはめ込み方法を指定します。

はめ込み方法は、以下の値で指定します。
contain　コンテンツのアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小してはめ込みます。
cover　コンテンツのアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトの方が合うように切り取られます。
fill　要素のコンテンツボックス全体を埋めるように拡大縮小してはめ込みます。オブジェクトコンテンツと要素のコンテンツボックスのアスペクト比が合わない場合は、オブジェクトが合うように拡大縮小されます。（初期値）none　コンテンツは、拡大縮小されません。
scale-down　コンテンツは、none または contain が指定されたかのようにサイズが決められ、オブジェクトの実際のサイズが小さい方を採用します。

L4.6.6 object-position プロパティ（画像の配置位置指定）

object-position: 横方向配置位置 縦方向配置位置;

iframe タグ、img タグ、video タグの中身の配置位置を指定します。

配置位置は、以下の値で指定します。
初期値は、「50% 50%」で、指定は、片方を省略することも可能です。横方向配置位置横方向の配置位置を以下の値で指定します。

  • left、right、center
  • left、right 数値（単位付き）
  • 数値（単位付き）

縦方向配置位置縦方向の配置位置を以下の値で指定します。

  • top、bottom、center
  • top、bottom 数値（単位付き）
  • 数値（単位付き）

画像がはみ出した場合は、はみ出した部分は非表示（トリミング）になります。

擬似クラス・擬似要素 について

擬似クラスとは … 指定したセレクタにおまじないをかける！クラスを使わなくても適用できる！擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。
 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTML​の要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。

https://samplesdl.me/training_html-css/sample-pseudo.html

L6.4 擬似クラス系セレクタ

セレクタとの間は：1つ！

L6.4.1 link 擬似クラス（未訪問リンクスタイル）

セレクタ:link { プロパティ名: 値; }

未訪問リンクのスタイルを指定します。検索で、未訪問は青色になるやつ。

L6.4.2 visited 擬似クラス（訪問済リンクスタイル）

セレクタ:visited { プロパティ名: 値; }

訪問済リンクのスタイルを指定します。検索で、1回見たら紫色になるやつ。

L6.4.3 hover 擬似クラス（オンカーソルスタイル）

セレクタ:hover { プロパティ名: 値; }

オンカーソル時（要素にカーソルが乗った時）のスタイルを指定します。カーソルが乗った時。スマホの場合は対象の要素をタップしてから他の要素をタップするまでの間になります。検証ツール右上:hovを使うと、作りやすい。hoverにチェックすると、hoverのタグを作ってくれる。

L6.4.4 active 擬似クラス（アクティブスタイル）

セレクタ:active { プロパティ名: 値; }

要素がアクティブになった時のスタイルを指定します。アクティブとは要素をクリックしてから離すまでの状態を示します。クリックした時。スマホの場合はタップしている間になります。

L6.4.5 first-child/last-child 擬似クラス（先頭・最終の子要素指定）

セレクタ:first-child { プロパティ名: 値; }
セレクタ:last-child { プロパティ: 値; }

先頭（first-child）・最終（last-child）の子要素にスタイルを指定します。
子にclass名を書かなくても指定できる。

nth-child 擬似クラス（n 番目の子要素指定）

セレクタ:nth-child(n) { プロパティ名: 値; }

n 番目の子要素にスタイルを指定します。

n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定することができます。

n の各値は、以下の型式で指定します。
（整数）　n 番目の子要素が対象になります。
odd（奇数）奇数番目の子要素が対象になります。
even（偶数）偶数番目の子要素が対象になります。
（数式）　子要素の対象を数式で指定します。例えば奇数の子要素の場合は「2n+1」、偶数の子要素の場合は「2n+0」となります。

L6.4.7 nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）

セレクタ:nth-of-type(n) { プロパティ名: 値; }

n 番目の子要素にスタイルを指定します。nth-child 擬似クラスとの違いは、nth-child 擬似クラスは、n 番目の子要素が対象になりますが、nth-of-type 擬似クラスは同一のセレクタを持つ n 番目の子要素が対象になります。例：divのn番目の子

n の部分は「（整数）・odd（奇数）・even（偶数）・（数式）」を指定することができます。

n の各値は、以下の型式で指定します。（整数）n 番目の子要素が対象になります。odd（奇数）奇数番目の子要素が対象になります。even（偶数）偶数番目の子要素が対象になります。（数式）子要素の対象を数式で指定します。例えば奇数の子要素の場合は「2n+1」、偶数の子要素の場合は「2n+0」となります。

L6.4.8 not 擬似クラス（指定値以外の要素指定）

セレクタ :not(x) { プロパティ名: 値; }

親要素内で x を含まない要素を指定します。例えば、「div :not(p) { color: #f00; }」と指定すると、親要素（div タグ）内にある子要素の中で p タグ以外の要素が対象になります。
これを使わないと、河川の例だとborder:none;を書かないといけなくなる。

L6.5 擬似要素系セレクタ

セレクタとの間は：：2つ！

L6.5.1 first-letter 擬似要素（要素の 1 文字目を指定）

セレクタ::first-letter { プロパティ: 値; }

要素の 1 文字目を指定します。1文字目を大きくしたり。

L6.5.2 first-line 擬似要素（要素の 1 行目を指定）

セレクタ::first-line { プロパティ: 値; }

要素の 1 行目を指定します。

L6.5.3 before/after 擬似要素（要素の直前・直後にコンテンツの挿入）

セレクタ::before { プロパティ: 値; }
セレクタ::after { プロパティ: 値; }

要素の直前（::before）または直後（::after）へのコンテンツの挿入を指定します。

実際に挿入するコンテンツは、content プロパティで指定します。