学科 CSS基礎⑤

-本日のアジェンダ-

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

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

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

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

5限目
学科 CSS基礎⑤
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プロパティ(空白・改行の表示方法)

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

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

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

参考サイト

リスト や 表 について

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

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

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

参考サイト

本日の課題

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