-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑤
CSSの記述・検証ツールの活用
2限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
3限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて
4限目
学科 HTML/CSS基礎⑤
Webページ制作実践
5限目
学科 HTML/CSS基礎⑤
本日の講義のまとめ
セレクタの得点について
セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。
| CSSセレクタの優先順位の計算方法 | 得点 | 例 |
|---|---|---|
| 全称セレクタ | 0 | * すべての要素に適用 |
| 要素名 | 1 | h1 p div span table など |
| 擬似要素 | 1 | :after など |
| 擬似クラス | 10 | :hover など |
| class | 10 | .main-text |
| id | 100 | #header |
| style属性 | 1000 | <div style=”font-size:140%;”> |
| !important | 合わせて使用したプロパティを最優先 | font-size:140%!important; |
Chrome検証ツールについて
ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。
CSS：バックグランド系プロパティ
- background-color プロパティ（背景色）
- background-attachment プロパティ（背景画像の位置）
- background-image プロパティ（背景画像のファイル）
- background-repeat プロパティ（背景画像の繰り返し）
- background プロパティ（背景の一括指定）
- background-size プロパティ（背景画像のサイズ）
- background-position プロパティ（背景画像の表示開始位置）
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 プロパティ（タブ文字の表示幅指定）
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 プロパティ（マージン一括措定）
- マージンの相殺
- マイナスマージン
- ボックスの中央配置（
margin:0 auto;） - ボックスの右端配置
～授業内容～
１）検証〉
Elements＝要素HTML
Style＝見た目CSS
２）アクティブにしてカーソールを合わせる
タグのハイライトが見える
▶＝まだ中にある
▼＝中が開かれている状態
また、アクティブにして選択（クリック）するとアクティブは解除され、選択部分がElementsで背景色が付く。
3)色の変更や幅などを変更できる
４）マージン・パディング系プロパティ
マージン：外に付く余白
パディング：中に付く余白
パディング50PXにすると、要素が広がってしまうのでbox-sizingを入力すると、
350pxになるところ300pxになる。
※『box-sizing: border-box;』要素の幅と高さの計算方法を指定
〈ショートハンド〉
padding：50px 50px(上下50px/左右50px)
top・right・bottom・leftの順で時計周りで指定可能
コメント