-本日のアジェンダ-
1限目
学科 CSS基礎⑤
ボックス装飾プロパティについて
2限目
学科 CSS基礎⑤
テキスト装飾プロパティについて
3限目
学科 CSS基礎⑤
フォント装飾プロパティについて
4限目
学科 CSS基礎⑤
CSSのまとめ
5限目
学科 CSS基礎⑤
CSSのまとめ
本日のテーマ
飾りつけをできるようになりましょう
ボックス装飾プロパティについて
border-radiusプロパティ
ボーダーの丸み（ボックスの4つのコーナーの丸み）を指定します。
参考サイト
- border-radius – CSS3 – HTMLクイックリファレンス
- CSSのborder-radiusを極める！円・角丸自在に実装
- 今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
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プロパティ（リストマーカーの一括指定）
参考サイト
- list-style－スタイルシートリファレンス – HTMLクイック …
- list-style-type : <li>のマーカーの種類
- 先頭にマーカーを表示させよう！CSSのlist-styleの使い方【初心者向け】
リスト や 表 について
リスト項目やテーブル（表）のHTMLのタグに対して、それぞれのCSSがあります。文法と見た目の特徴に合わせて上手に使っていきましょう。
参考サイト
- CSSで作るリストデザイン38選！オシャレな箇条書きを実現
- CSSで表を見やすく美しく! テーブルのデザインを調整しよう …
- 【CSS】tableタグを使わず、ul, liのみで表を作成する – みたぬ …
本日の課題
WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。