-本日のアジェンダ-
1限目
学科 CSS基礎⑤
リスト装飾プロパティについて
2限目
学科 CSS基礎⑤
画像の配置とトリミングについて
3限目
学科 CSS基礎⑤
バックグラウンド設定プロパティについて
4限目
学科 CSS基礎⑤
CSSのまとめ
5限目
学科 CSS基礎⑤
過去の訓練の復習
本日のテーマ
画像を使いこなしましょう
リスト装飾プロパティについて
- list-style-typeプロパティ（リストマーカーの種類）
- list-style-imageプロパティ（リストマーカーの画像）
- list-style-positionプロパティ（リストマーカーの位置）
- list-styleプロパティ（リストマーカーの一括指定）
参考サイト
- list-style－スタイルシートリファレンス – HTMLクイック …
- list-style-type : <li>のマーカーの種類
- 先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】
リスト や 表 について
リスト項目やテーブル（表）のHTMLのタグに対して、それぞれのCSSがあります。文法と見た目の特徴に合わせて上手に使っていきましょう。
参考サイト
- CSSで作るリストデザイン38選！オシャレな箇条書きを実現
- CSSで表を見やすく美しく! テーブルのデザインを調整しよう …
- 【CSS】tableタグを使わず、ul, liのみで表を作成する – みたぬ …
画像の配置とトリミングについて
- 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だけで画像をトリミング！画像サイズに依存しないサムネイルの表示
本日の課題①
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。
本日の課題②
過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。