【要参考】
①バックグラウンド系プロパティ／疑似クラス・疑似要素セレクタ
CSS で飾りを追加しましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 ※L6.2 L6.4以下
サンプルファイル（ CSSの記述【疑似クラス・疑似要素】）
画像の配置とトリミングについて
object-fitプロパティ
【参考サイト】
- CSSで画像をトリミングする－ウェブ制作小ネタTIPS – HTML …
- 【CSS】CSSだけで画像をトリミングできる「object-fit」
- CSSだけで画像をトリミング！画像サイズに依存しないサムネイルの表示
バックグラウンド設定プロパティ
・background-colorプロパティ（背景色）
・background-attachmentプロパティ（背景画像の位置）
・background-imageプロパティ（背景画像のファイル）
・background-repeatプロパティ（背景画像の繰り返し）
・backgroundプロパティ（背景の一括指定）
・background-sizeプロパティ（背景画像のサイズ）
【参考サイト】
- 【CSS】背景色・背景画像をマスター！backgroundの使い方
- CSSのbackground-imageを使いこなす! 使い方から調整まで徹底解説
- CSSだけで画像をトリミング！画像サイズに依存しないサムネイルの表示
疑似クラス・疑似要素
擬似クラスとは … 擬似クラスとは指定の要素が特定の状態である場合にスタイルを適用させるセレクタです。 文章構造の範囲外にある情報によってスタイルを変化させることができます。
擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。
【ワンポイントアドバイス】
疑似クラス・疑似要素はここまで学んだ基本的なCSSを更に効果的に使う為の技術です。
ここまで学んだ内容を復習しながら使うと良いでしょう。
サンプルファイル（ CSSの記述【疑似クラス・疑似要素】）
疑似クラス系セレクタ
・link 擬似クラス（未訪問リンクスタイル）
・visited 擬似クラス（訪問済リンクスタイル）
・hover 擬似クラス（オンカーソルスタイル）
・active 擬似クラス（アクティブスタイル）
・first-child/last-child 擬似クラス（先頭・最終の子要素指定）
・nth-child 擬似クラス（n 番目の子要素指定）
・nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
・not 擬似クラス（指定値以外の要素指定）
擬似要素系セレクタ
・first-letter擬似要素（要素の 1 文字目を指定）
・first-line擬似要素（要素の 1 行目を指定）
・before/after擬似要素（要素の直前・直後にコンテンツの挿入）
【参考サイト】
様々なCSSについて
ここまで学んだCSS以外にも様々なCSSがあります。また新しいものも出てきます。ただしブラウザによって使えるタグが異なったり、デバイス依存もあります。OSにも影響もあります。日々変わる業界の動向にアンテナを張っていきましょう。
【ワンポイントアドバイス】
まずはこれまで学んだCSSをしっかりと覚えてまずは、「知る」次に「使う」そしてお仕事で「使いこなす」を目指しましょう。
コツとしては、「自分なりにまとめる」をしっかりと定期的に行うと良いでしょう。
【参考サイト】
メモ
◆真ん中配置について（text-align・margin・justify-content:centerの違い）
中央寄せしたい要素がインライン要素かブロック要素かによって使い分ける
・子要素がインライン要素（aタグやimgのように横に並ぶ要素）または inline-blockなら、親要素にtext-align:center;
・ブロック要素（divやpタグのように縦に並ぶ要素）または tableなら、子自身にmargin:auto
・インライン要素でもブロック要素でも関係なく中央寄せする場合は、親要素にdisplay:flexとjustify-content:centerセットで
参考：【CSS】margin:autoとtext-align:centerの違いと使い分け
・text-alignプロパティ
「text-align: center;」
【aやimgなど横に並ぶインライン要素 または inline-block の子要素】を真ん中に配置するとき、【親要素】に使う
条件 ・親要素に指定する
・親要素に余白がある
・子要素がインライン要素 または inline-block
先生より：余白を文字などの左右に割り振ることで、結果的に文字が真ん中に配置される仕組みのため、余白がない場合は真ん中配置にならない
参考：https://html-css.hamaya2020.com/lesson-5.html#L5-2-3
・marginプロパティ
「margin: 0 auto;（margin:auto）」
【divやpタグのように縦に並ぶブロック要素 または table】を真ん中に配置するとき、【子自身】に使う
条件 ・子自身に指定する
・親と子の幅が一致していない（親のpaddingを除いた幅より小さい）
・子自身がブロック要素（またはtable）
先生より：「margin: 0 auto;（0＝上下、auto＝左右）」の考え方を前提とする
※border・親marginは省略、box-sizing: border-box;（width・height = content + padding + border 領域の合計値）の条件で
例えば親要素がwidth: 600px;、padding: 10px;
子自身のブロック（またはtable）がwidth: 200px;、padding: 10px;、margin: 0 auto;の場合こうなる…？
| 親 左 padding | 親 左 content | 子 左 margin | 子 左 padding | 子 content | 子 右 padding | 子 右 margin | 親 右 content | 親 右 padding |
| 10px | 290px (600-(10+10))/2 | auto 親横幅600px- (親padding10px+10px) ＝580px -子width200px =380px /2=片側190px | 10px | 180px (width:200px-10-10) | 10px | auto 190px | 290px | 10px |
参考：https://html-css.hamaya2020.com/lesson-4.html#L4-5-2
・display:flexとjustify-content:centerセット
「display:flex
justify-content:center」
【インライン要素でもブロック要素でも関係なく要素】を真ん中に配置するとき、【親要素】に使う
※この場合、インライン要素が改行されると左寄せになるため、改行しても中央寄せにしたい場合は「text-align:center」を使う
