CSSで見た目を変えてみよう | HTML / CSS入門

前のページでは、HTML を使って文字を表示しました。

しかし、現在の表示はまだシンプルな状態です。

Webサイトでは通常、

文字の色
背景色
余白
文字サイズ
レイアウト

などを調整しています。

その「見た目」を担当するのが CSS です。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
└── index.html

CSSとは？

CSS は、

Cascading Style Sheets

の略です。

HTML が「文章の意味や構造」を作るのに対して、CSS は「見た目」を調整します。

例えば、

赤い文字にする
背景を黒にする
文字を中央寄せにする

などを設定できます。

CSSを書いてみる

前回の index.html を、以下のように変更してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSの練習</title>

  <style>
    h1 {
      color: blue;
    }

    p {
      color: gray;
    }
  </style>

</head>
<body>

  <h1>CSSの練習</h1>

  <p>
    文字の色を変更しています。
  </p>

</body>
</html>

保存したあと、ブラウザを更新してください。

色が変わったことを確認する

更新すると、

h1 の文字が青
p の文字が灰色

になっているはずです。

これは CSS が適用されたためです。

style タグ

今回追加したのは、この部分です。

<style>
  h1 {
    color: blue;
  }

  p {
    color: gray;
  }
</style>

style タグの中に CSS を書いています。

h1 { } の意味

h1 {
  color: blue;
}

これは、

h1タグの文字色を青にする

という意味です。

CSSでは、

どの要素に
どんな見た目を適用するか

を書いていきます。

color の意味

color: blue;

の color は、文字色を変更する設定です。

例えば、

color: red;
color: green;
color: orange;

なども使えます。

実際に変更して試してみましょう。

;（セミコロン）について

CSSでは、

color: blue;

の最後に ; を付けます。

これは、

ここで設定が終わります

という意味です。

波括弧 { } について

h1 {
  color: blue;
}

の { } は、

この中が h1 の設定です

という意味です。

CSSでは頻繁に登場します。

HTMLとCSSの役割の違い

現在は、

HTML → 内容を書く
CSS → 見た目を変える

という役割で動いています。

例えば、

見出しを書く → HTML
青くする → CSS

という分担です。

Web制作では、この役割分担がとても重要になります。

まずは触ってみることが大切

最初は、

何を書けばいいのか
なぜ動くのか
記号の意味

がよくわからなくても問題ありません。

まずは、

色を変える
数字を変える
更新してみる

を繰り返しながら、

「CSSを書くと見た目が変わる」

という感覚をつかむことが大切です。

次のページでは

次のページでは、

背景色
文字サイズ
中央寄せ

など、もう少し CSS の見た目を変更してみます。