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

本日の課題②

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

学科 CSS基礎④

-本日のアジェンダ-

1限目
学科 CSS基礎④
ボックス装飾プロパティについて

2限目
学科 CSS基礎④
テキスト装飾プロパティについて

3限目
学科 CSS基礎④
フォント装飾プロパティについて

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

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

本日のテーマ

飾りつけをできるようになりましょう

ボックス装飾プロパティについて

border-radiusプロパティ

ボーダーの丸み(ボックスの4つのコーナーの丸み)を指定します。

参考サイト

box-shadowプロパティ

ボックスに対して1つまたは複数の影を指定します。

参考サイト

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

  • colorプロパティ(文字の色)
  • opacityプロパティ(透明度)
  • text-alignプロパティ(文字の配置)
  • text-decorationプロパティ(文字の飾り)
  • text-shadowプロパティ(文字の影)

フォント装飾プロパティについて

  • font-familyプロパティ(フォントの種類)
  • font-sizeプロパティ(フォントのサイズ)
  • font-weightプロパティ(フォントの太さ)
  • font-styleプロパティ(フォントのスタイル)
  • line-heightプロパティ(行の高さ)
  • fontプロパティ(フォント一括指定)
  • white-spaceプロパティ(空白・改行の表示方法)

参考サイト(テキスト装飾プロパティ+フォント装飾プロパティ)

本日の課題①

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

本日の課題②

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