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

前のページでは、CSS を使って文字の色を変更しました。

今回はさらに、

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

などを変更してみます。

少しずつ「Webページっぽさ」が出てきます。

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

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

html-practice/
└── index.html

index.html を変更してみよう

以下のように変更してみてください。

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

  <style>

    body {
      background-color: #f3f4f6;
      text-align: center;
      padding-top: 60px;
    }

    h1 {
      color: #2563eb;
      font-size: 40px;
    }

    p {
      color: #4b5563;
      font-size: 18px;
    }

  </style>
</head>
<body>

  <h1>CSSの練習</h1>

  <p>
    見た目を変更しています。
  </p>

</body>
</html>

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

背景色が変わる

今回追加したのは、

background-color: #f3f4f6;

です。

これは背景色を変更する設定です。

text-align: center;

text-align: center;

は、文字を中央寄せにする設定です。

そのため、

見出し
文章

が中央に表示されるようになります。

font-size

font-size: 40px;

は、文字サイズを変更する設定です。

px は pixel（ピクセル）という単位です。

数字を変えると、文字サイズも変わります。

例えば、

font-size: 60px;

にすると、かなり大きく表示されます。

padding-top

padding-top: 60px;

は、上側の余白を作る設定です。

現在は、

画面の上から60px空ける

という意味になります。

CSSは「見た目の設定を追加していく」もの

CSS は、

見た目のルールを追加していく

イメージです。

例えば、

color: blue;
font-size: 40px;
text-align: center;

のように複数の設定を書けます。

#f3f4f6 のような記号は？

#f3f4f6

のような値は「カラーコード」と呼ばれます。

色を細かく指定するときによく使います。

現在は、

こういう書き方もあるんだな

くらいでOKです。

ブラウザを更新しながら試してみよう

CSS学習では、

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

ことがとても重要です。

例えば、

font-size: 100px;

にしたらどうなるか。

color: red;

にしたらどうなるか。

実際に試してみることで、少しずつ感覚が身についていきます。

「動かしながら覚える」が大切

最初は、

なぜそうなるのか
なぜこの名前なのか
どのCSSを使えばいいのか

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

まずは、

CSSを書く
ブラウザが変化する

という体験を増やすことが大切です。

次のページでは

次のページでは、

class 属性
複数の要素へCSSを適用する方法

を学んでいきます。

実際のWeb制作で非常によく使う重要な内容です。