CSSで最小限の見た目を整える

前回作った HTML ページは、構造はできていますがブラウザの初期設定のまま表示されています。CSS を追加すると、色やフォントサイズ、余白などの見た目をコントロールできます。

CSS のない状態を確認する

前回のまとめで作った index.html をブラウザで開くと、黒い文字が白い背景に並んでいるだけの画面です。HTML は「何があるか」を書き、CSS は「どう見えるか」を書く、という役割分担になっています。

style タグで CSS を書く

最初に HTML ファイルの中に直接 CSS を書いて、すぐに変化を確認します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS のテスト</title>
  <style>
    h1 {
      color: #2563eb;
    }
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Java Web 開発 学習メモ</h1>
  <p>変数、条件分岐、繰り返し、クラスなど Java の基礎を学びました。</p>
</body>
</html>

保存してブラウザを再読み込み（F5）すると、見出しが青くなり、段落の文字が少し大きくなります。

h1 が青くなり段落テキストが大きくなった状態

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

部分	例	意味
セレクタ	`h1`	「すべての h1 タグに対して」
プロパティ	`color`	「文字の色を」
値	`#2563eb`	「この青色に設定する」

外部ファイルに分ける

CSS が増えてくると HTML ファイルが長くなります。CSS だけ別ファイルに切り出すのが一般的です。

同じフォルダに style.css を作り、さきほどの <style> タグの中身を移します。

h1 {
  color: #2563eb;
}

p {
  font-size: 18px;
}

HTML 側では <style> タグを消して、代わりに <link> タグで読み込みます。

<head>
  <meta charset="UTF-8">
  <title>CSS のテスト</title>
  <link rel="stylesheet" href="style.css">
</head>

見た目は変わりません。HTML は構造、CSS は見た目と、ファイルの役割が分かれました。

外部ファイルに分けても見た目は変わらない

基本プロパティ

よく使うプロパティをまとめます。

プロパティ	効果	例
`color`	文字の色	`color: #333;`
`background-color`	背景色	`background-color: #f5f5f5;`
`font-size`	文字の大きさ	`font-size: 16px;`
`margin`	要素の外側の余白	`margin: 20px;`
`padding`	要素の内側の余白	`padding: 16px;`

margin と padding の違いは、「箱の外側の隙間」と「箱の中の隙間」です。

body {
  margin: 0 auto;
  padding: 24px;
  max-width: 800px;
  font-family: sans-serif;
  color: #333;
  background-color: #fafafa;
}

h1 {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
  padding-bottom: 8px;
}

p {
  line-height: 1.8;
}

この CSS を style.css に書いて保存・再読み込みすると、ページの印象が変わります。

余白・背景色・見出し下線が加わったレイアウト

クラスセレクタ

タグセレクタ（h1, p など）だと、そのタグすべてに同じスタイルが当たります。特定の要素だけ変えたいときは、クラスセレクタを使います。

HTML 側で class 属性をつけます。

<p class="highlight">この段落だけ目立たせたい。</p>
<p>この段落はふつうのまま。</p>

CSS 側ではクラス名の前に .（ドット）をつけます。

.highlight {
  background-color: #fef3c7;
  padding: 12px;
  border-left: 4px solid #f59e0b;
}

.highlight は「class=“highlight” がついた要素だけ」に適用されます。

highlight クラスが当たった段落だけ黄色背景になる

次の回へ

HTML で骨組みを作り、CSS で見た目を整えました。次は JavaScript で「ボタンを押したら何か起こる」という動きを追加します。