CSSで見た目を整える

前の授業で作ったページは、白い背景に黒い文字だけでした。内容は、ちゃんと伝わります。

でも、少し地味です。色や大きさを変えると、同じ中身が、まったく別のページに見えます。

今日は、見た目を整える言葉、CSSを学びます。

CSSは、セレクタ { プロパティ: 値; } の形で書きます。

h1 { color: #003366; } なら、「h1の文字色を、紺色にする」という意味です。

; を最後につけるのを、忘れないでください。

<h1>わたしの自己紹介</h1>
<p>名前は、さくらです。</p>
<p class="hobby">好きなものは、カレーです。</p>

ページの部品は、どれも長方形の箱です。箱には、中身、パディング、枠、マージンがあります。

中身の幅が200ピクセルで、パディングが左右に10、枠が左右に2なら、見える箱の幅は、足し算で決まります。

<div class="card">
  <h2>練習のお知らせ</h2>
  <p>明日は、体育館で練習です。</p>
</div>