【要参考】
①ボックス装飾プロパティ
CSS でレイアウトを作りましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 ※L4.6 その他のプロパティ以下
②テキスト・フォント・リスト装飾
CSS で文字飾りを付けましょう | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 ※L5以下
ボックス装飾プロパティについて
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の記述【リスト】）
サンプルファイル（ CSSの記述【表】）
【参考サイト】
- CSSで作るリストデザイン38選！オシャレな箇条書きを実現
- CSSで表を見やすく美しく! テーブルのデザインを調整しよう …
- 【CSS】tableタグを使わず、ul, liのみで表を作成する – みたぬ …
メモ
・【CSSファイルは、最初に枠をすべて作っておくと書きやすい】
divとかのタグや、クラス、IDなどで細かく大枠だけ作って、そのあとから細かい装飾をしていくようにすると抜けが少ない
・【検証で作業したコードの保存方法】
検証画面で細かい調整をしたあと、「style.css:10」とかの文字をクリックしてコード表示させたら、全コピして元のCSSファイルに上書きする。
最初の一回目は、改行など自分で調整しないといけないけど、二回目以降は反映される。
