学科 CSS基礎⑤

-本日のアジェンダ-

1限目
学科 CSS基礎⑤
リスト装飾プロパティについて

2限目
学科 CSS基礎⑤
画像の配置とトリミングについて

3限目
学科 CSS基礎⑤
バックグラウンド設定プロパティについて

4限目
学科 CSS基礎⑤
CSSのまとめ

5限目
学科 CSS基礎⑤
過去の訓練の復習

本日のテーマ

画像を使いこなしましょう

リスト装飾プロパティについて

  • list-style-typeプロパティ(リストマーカーの種類)
  • list-style-imageプロパティ(リストマーカーの画像)
  • list-style-positionプロパティ(リストマーカーの位置)
  • list-styleプロパティ(リストマーカーの一括指定)

参考サイト

リスト や 表 について

リスト項目やテーブル(表)のHTMLのタグに対して、それぞれのCSSがあります。文法と見た目の特徴に合わせて上手に使っていきましょう。

サンプルファイル( CSSの記述【リスト】)

サンプルファイル( CSSの記述【表】)

参考サイト

画像の配置とトリミングについて

  • object-fitプロパティ

参考サイト

バックグラウンド設定プロパティについて

  • background-colorプロパティ(背景色)
  • background-attachmentプロパティ(背景画像の位置)
  • background-imageプロパティ(背景画像のファイル)
  • background-repeatプロパティ(背景画像の繰り返し)
  • backgroundプロパティ(背景の一括指定)
  • background-sizeプロパティ(背景画像のサイズ)

参考サイト

本日の課題①

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

本日の課題②

過去の訓練の復習として訓練内容を「投稿ページ」にまとめてください。
投稿日は、該当する訓練の日時にしてください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。