CSSで見た目を変える

導入

HTML が骨組みなら、CSS は「装飾」です。同じHTMLでも、CSS を変えるだけで色や大きさを自由に変えられます。

説明

CSS は <style> 要素の中に書けます。「どの要素に（セレクタ）」「何を（プロパティ）」を、次の形で指定します。

<h1>色のついた見出し</h1>

<style>
  h1 {
    color: crimson;
    font-size: 40px;
  }
</style>

h1 { … } の h1 が セレクタ（対象の要素）、{ } の中の color や font-size が プロパティ です。color は文字色、font-size は文字サイズを表します。

やってみよう

下のエディタに上の例を打ち込み、プレビューで見出しの色と大きさが変わることを確かめましょう。crimson を blue や green に変えて、変化を観察してみてください。

演習

<style> の中で、段落 <p> の文字色を青（blue）にする指定を書いてください。