HTML/CSS基礎⑤
CSSの記述・検証ツールの活用
デベロッパーツールで検証。
セレクタを先に記載しておく。
Chrome検証ツールについて
＊は始めの行に書くことが多い。
「詳細度」CSS・得点・計算
検証ツールで色々試しても上書きしなければ反映されない。
デベロッパーツール・検証ツールなど、言い方が色々あるが同意語。
CSS：バックグランド系プロパティ
- background-color プロパティ（背景色）
- background-attachment プロパティ（背景画像の位置）
- background-image プロパティ（背景画像のファイル）
- background-repeat プロパティ（背景画像の繰り返し）
- background プロパティ（背景の一括指定）…あまり使わないので、あることは知っておく。
- background-size プロパティ（背景画像のサイズ）
- background-position プロパティ（背景画像の表示開始位置）
none…（読み方）なん。WEBページの要素を非表示にする。
coutain…要素とそのコンテンツが文書ツリーの残りの部分から可能な限り独立していること。
cover…要素の横幅・高さに合わせて背景画像を引き伸ばしたり、切り取ったりする指定。
はよく使うので覚えておく。
継承…親要素を引き継ぐ場合が多い。（そうでない場合もある）
CSS：テキスト系プロパティ
- color プロパティ（文字の色）
- opacityプロパティ（透明度）
- text-align プロパティ（文字の配置）
- text-decoration-color プロパティ（文字飾りの色）
- text-decoration-style プロパティ（文字飾りの線種）
- text-decoration-thickness プロパティ（文字飾りの線の太さ）
- text-decoration プロパティ（文字の飾りの一括指定）
- text-shadow プロパティ（文字の影）
CSS：フォント系プロパティ
- font-family プロパティ（フォントの種類）
- font-size プロパティ（フォントのサイズ）
- font-weight プロパティ（フォントの太さ）
- font-style プロパティ（フォントのスタイル）
- line-height プロパティ（行の高さ）
- font プロパティ（フォント一括指定）
- white-space プロパティ（空白・改行の表示方法）
- word-wrap プロパティ（単語の途中での改行方法）
- word-break プロパティ（テキストや単語の改行方法）
- tab-size プロパティ（タブ文字の表示幅指定）
web font…表示に時間がかかるが、世界観は失われない。Google・Adobeが有名だが、Googleは無料だが、Adobeは有料なので、注意。
CSS：リスト系プロパティ
- list-style-type プロパティ（リストマーカーの種類）
- list-style-image プロパティ（リストマーカーの画像）
- list-style-position プロパティ（リストマーカーの位置）
- list-style プロパティ（リストマーカーの一括指定）
CSS：レイアウト系プロパティ
- width プロパティ（内容の幅）
- max-width プロパティ（幅の最大値）
- min-width プロパティ（幅の最小値）
- height プロパティ（内容の高さ）
- max-height プロパティ（高さの最大値）
- min-heightプロパティ（高さの最小値）
- float プロパティ（回り込み）
- clear プロパティ（回り込みを解除）
- display プロパティ（要素の表示方法）
- overflow プロパティ（ボックスからあふれた内容の処理方法）
高さに関しては固定値で入れない方がよい。
CSS：パディング系プロパティ
- padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
- padding プロパティ（パディング一括指定）
CSS：マージン系プロパティ
- margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
- margin プロパティ（マージン一括措定）
- マージンの相殺
- マイナスマージン
- ボックスの中央配置
- ボックスの右端配置
※サンプルコードがあるので色々試してみる。
こまめに確認をしていくことが大切。
わからなかったら次へ と進めていく。
感想
とにかく、数多くCSSを書いてみて、色々試すことが大切かなと思った。アプリの習得と変わらないかなと思うので、Webに関してもとにかく「いじる」というのが必要と感じた。