セレクタや定義場所といった記述やルールについて、ポイントを押さえて理解しましょう。
CSSのセレクタ
下の [ HTML ] と [ CSS ] のボタンを切り替えて、CSSのセレクタとHTMLのデザインする場所を照らし合わせながら、デザインを確認しましょう。
See the Pen 2-4 by Rayout-gw (@Rayout-gw) on CodePen.
- ブラウザ全体 <body>の、背景色を黒色
- 段落<p>の、文字の色を白色
- クラス名 redの付いた見出し<h1>~<h3>の、文字の色を赤色
- id名 cautionの付いた見出し<h2>の、背景色を黄色
CSSの定義場所
定義場所は、CSSを記述する場所です。
エンベディングスタイルを使って、HTMLをデザインしてみましょう。
See the Pen 2-4-2 by Rayout-gw (@Rayout-gw) on CodePen.
練習ではエンベディングスタイルを使いますが、最終的にはリンキングスタイルを使って作成します
この章のポイント
CSSのデザインする場所と書き方と書く場所を知る
セレクタ・書き方・定義場所について理解を深めておきましょう。
セレクタ：デザインする場所（タグ名・クラス名・id名の3種類から選択）
書き方：記述ルール（セレクタ{プロパティ：値；} の形で記述）
書く場所：CSSを記述する場所（インラインスタイル・エンベディングスタイル・リンキングスタイルから選択）