-本日のアジェンダ-
1限目
学科 CSS基礎⑥
画像の配置とトリミングについて
2限目
学科 CSS基礎⑥
バックグラウンド設定プロパティについて
3限目
学科 CSS基礎⑥
擬似クラス、擬似要素について
4限目
学科 CSS基礎⑥
CSSのまとめ
5限目
学科 CSS基礎⑥
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を更に効果的に使う為の技術です。ここまで学んだ内容を復習しながら使うと良いでしょう。
疑似クラス系セレクタ
- 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をしっかりと覚えてまずは、「知る」次に「使う」そしてお仕事で「使いこなす」を目指しましょう。
コツとしては、「自分なりにまとめる」をしっかりと定期的に行うと良いでしょう。
参考サイト
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。