6日でできる 新HTML&CSS入門｜Webページを装飾するCSS
HTMLで作ったページに、色・余白・文字の表情を加える。CSSを学んで、Webページを見やすく美しく整えよう。
HTMLは、Webページの文章や見出し、画像、リンク、表などを配置し、ページの構造を作るための言語です。これまで学んできたHTMLでは、どこが見出しなのか、どこが段落なのか、どこに画像を表示するのかといった「意味」や「骨組み」を作ってきました。
しかし、HTMLだけで作ったページは、基本的にはブラウザの標準表示に近い見た目になります。文字の大きさ、色、背景、余白、配置などを細かく整えるには、HTMLだけでは十分ではありません。
そこで登場するのがCSSです。CSSは、Cascading Style Sheetsの略で、Webページの見た目を指定するための仕組みです。文字色を変える、背景色を付ける、見出しを中央に寄せる、ボタンらしい見た目にする、リンクにマウスを重ねたときの色を変えるなど、ページの装飾やレイアウトに関わる多くのことをCSSで指定できます。
HTMLが「ページの構造」を作る役割だとすれば、CSSは「ページの見た目」を整える役割です。この2つを分けて考えることで、Webページは管理しやすくなります。文章の内容を変えずにデザインだけを変更したり、複数ページの見た目をまとめて変更したりしやすくなるからです。
この記事では、CSSとは何か、なぜスタイルシートと呼ばれるのか、CSSを書く場所にはどのような種類があるのか、セレクタとプロパティの基本、内部スタイルを使ったサンプル、ボタンのホバー効果までを順番に解説していきます。
CSSは、Webページをただ表示するだけでなく、読みやすく、使いやすく、印象に残るページへ変えるための大切な技術です。ここから、HTMLで作ったページにデザインを加える考え方を学んでいきましょう。
CSSはWebページの見た目を指定する仕組み
CSSは、Webページの見た目を指定するための言語です。HTMLで作った見出し、段落、リスト、表、ボタンなどに対して、色、文字サイズ、背景、余白、配置などを指定します。
| 役割 | 担当する内容 | 例 |
|---|---|---|
| HTML | ページの構造を作る | 見出し、段落、画像、リンク、表 |
| CSS | ページの見た目を整える | 色、文字サイズ、背景、余白、配置 |
| ブラウザ | HTMLとCSSを読み込んで表示する | Webページとして画面に表示する |
たとえば、HTMLではh1を使って大きな見出しを作れます。ただし、その見出しを緑色にしたり、中央に配置したり、文字サイズをさらに大きくしたりするにはCSSを使います。
HTMLとCSSを分けると、ページの内容とデザインを別々に管理できます。これはWeb制作でとても重要な考え方です。
文章や画像などの中身はHTMLで管理し、色や配置などの見た目はCSSで管理することで、あとから修正しやすいページになります。
図1：HTMLとCSSの役割の違い
この図から分かること
この図から、HTMLとCSSは役割が異なることが分かります。
HTMLは、見出し、段落、画像、リンクなど、ページの部品と構造を作ります。一方、CSSは、その部品をどのように見せるかを指定します。
同じHTMLでも、CSSを変えるだけで、落ち着いた印象のページにも、明るく楽しい印象のページにもできます。
HTMLとCSSを分けて考えることは、Web制作の基本です。ページの内容と見た目を整理して管理できるため、あとから修正しやすく、複数ページに同じデザインを適用しやすくなります。
スタイルシートとは
スタイルシートとは、HTMLなどの構造化された文書に対して、見た目を指定するための仕組みです。
HTMLが文章の意味や構造を表すのに対して、スタイルシートは見た目を担当します。文字色、背景色、フォント、余白、配置、サイズなどを指定することで、ページを読みやすく整えます。
| 項目 | 内容 |
|---|---|
| スタイルシート | 文書の見た目を指定する仕組み |
| CSS | Webページで広く使われるスタイルシート |
| 目的 | 内容とデザインを分けて管理する |
| 利点 | 再利用しやすく、一括変更しやすい |
CSSを使うと、HTMLのタグ構造はそのままに、デザインだけを変更できます。
たとえば、複数ページの見出しをすべて青にしたい場合、HTMLを1ページずつ直すのではなく、CSSを変更することでまとめて見た目を変えられます。
このように、CSSはWebページを効率よく管理するためにも役立ちます。
CSSがカスケードと呼ばれる理由
CSSの正式名称はCascading Style Sheetsです。Cascadingは、滝のように流れ落ちるという意味を持ちます。
CSSでは、ブラウザが最初から持っている標準のスタイル、制作者が書いたスタイル、ユーザーが設定したスタイルなどが重なり合い、最終的にどの見た目を適用するかが決まります。
| 種類 | 内容 |
|---|---|
| ブラウザ既定のスタイル | ブラウザがもともと持っている表示 |
| 制作者のCSS | Web制作者が指定した見た目 |
| ユーザー側の設定 | 利用者が設定する文字サイズなど |
たとえば、ブラウザはh1を最初から大きな太字で表示します。これはブラウザ既定のスタイルです。
そこに制作者がCSSでh1の色や配置を指定すると、その指定が反映されます。同じ要素に複数のCSSが当たる場合は、どの指定を優先するかを決める仕組みがあります。
CSSでは、主に次のような考え方で優先順位が決まります。
| 考え方 | 内容 |
|---|---|
| 詳細度 | より具体的な指定が優先されやすい |
| 後勝ち | 同じ強さの指定なら後に書いたものが優先される |
| 継承 | 親要素の指定が子要素に受け継がれることがある |
このように、複数の指定が重なりながら最終的な見た目が決まるため、CSSはカスケードと呼ばれます。
CSSを書く3つの方法
CSSを書く方法には、大きく分けて3つあります。インラインスタイル、内部スタイル、外部スタイルです。
| 方法 | 書く場所 | 主な用途 |
|---|---|---|
| インラインスタイル | HTMLタグのstyle属性に書く | 1か所だけ例外的に指定したい場合 |
| 内部スタイル | head内のstyle要素に書く | 学習用や小さなページ |
| 外部スタイル | 別のCSSファイルに書いてlinkで読み込む | 実務や複数ページの管理 |
インラインスタイルは、HTMLタグに直接style属性を書いて見た目を指定する方法です。手軽ですが、HTMLの中にデザイン指定が混ざるため、多用すると管理しにくくなります。
内部スタイルは、HTMLファイルのhead内にstyle要素を書き、その中にCSSをまとめる方法です。1つのHTMLファイルだけで動作を確認できるため、学習では扱いやすい方法です。
外部スタイルは、CSSだけを別ファイルに分けて管理する方法です。複数ページで同じCSSを使い回せるため、実際のWeb制作ではよく使われます。
学習では内部スタイルから始めると分かりやすい
CSSを学び始めるときは、内部スタイルを使うと分かりやすいです。
HTMLとCSSを1つのファイルの中で確認できるため、どのCSSがどのHTMLに影響しているのかを見つけやすいからです。
| 方法 | 学習しやすさ | 管理しやすさ |
|---|---|---|
| インラインスタイル | すぐ試せるが整理しにくい | 低い |
| 内部スタイル | 1ファイルで確認しやすい | 中程度 |
| 外部スタイル | 実務向き | 高い |
最初は内部スタイルでCSSの基本を学び、慣れてきたら外部スタイルへ進むとよいでしょう。
実務では、HTMLファイルとCSSファイルを分けて、複数のページに同じデザインを適用することが多くなります。
CSSの基本形
CSSは、どの要素に、どの見た目を、どの値で指定するかを書きます。
基本の形は、セレクタ、プロパティ、値の組み合わせです。
セレクタ {
プロパティ: 値;
}| 名前 | 役割 | 例 |
|---|---|---|
| セレクタ | どの要素に適用するかを指定する | h1、p、.note |
| プロパティ | 何を変更するかを指定する | color、background、font-size |
| 値 | どのように変更するかを指定する | red、#008000、220% |
たとえば、h1の文字色を緑にしたい場合は、h1をセレクタにし、colorで文字色を指定します。
CSSでは、セレクタで対象を選び、プロパティと値で見た目を指定します。この形を覚えると、さまざまな装飾を理解しやすくなります。
図2：CSSの基本形と3つの記述方法
この図から分かること
この図から、CSSはセレクタ、プロパティ、値の組み合わせで書くことが分かります。
セレクタは、どのHTML要素にスタイルを適用するかを決めます。プロパティは、文字色や背景色、文字サイズなど、何を変更するかを表します。値は、そのプロパティにどのような設定をするかを表します。
また、CSSを書く場所には、インライン、内部スタイル、外部スタイルの3種類があります。学習では内部スタイルが確認しやすく、実務では外部スタイルが管理しやすい方法です。
内部スタイルで色と文字を変えてみる
ここでは、内部スタイルを使って、ページ全体の背景色、本文の文字色、見出しの色や大きさ、配置を指定します。
ファイル名： lesson22_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのスタイルシート</title>
<style>
body {
background: #e8f7ff;
color: #222222;
font-family: "Segoe UI", sans-serif;
}
h1 {
color: #008000;
font-size: 220%;
text-align: center;
}
</style>
</head>
<body>
<h1>スタイルシート入門</h1>
<p>HTMLで作ったページに、CSSで色や文字の見た目を加えています。</p>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、ページ全体の背景が淡い水色になり、見出しは緑色で大きく中央に表示されます。本文は濃いグレーで表示されます。
| 対象 | 指定内容 | 表示のイメージ |
|---|---|---|
| body | background | ページ全体の背景色を淡い水色にする |
| body | color | 基本の文字色を濃いグレーにする |
| body | font-family | 使用する書体を指定する |
| h1 | color | 見出しの文字色を緑にする |
| h1 | font-size | 見出しを大きくする |
| h1 | text-align | 見出しを中央に配置する |
このサンプルでは、head内にstyle要素を置き、その中にCSSを書いています。
bodyに指定したCSSは、ページ全体の基本的な見た目に影響します。h1に指定したCSSは、h1だけに適用されます。
HTMLの構造は変えずに、CSSだけで見た目を変更できることが分かります。
backgroundは背景を指定する
backgroundは、背景に関する指定を行うためのプロパティです。ここでは、背景色を指定するために使っています。
背景色を変えると、ページ全体の印象が大きく変わります。白い背景はシンプルで読みやすく、淡い色の背景はやわらかい印象を与えます。
| 指定対象 | 効果 |
|---|---|
| bodyにbackground | ページ全体の背景が変わる |
| h1にbackground | 見出し部分の背景が変わる |
| pにbackground | 段落部分の背景が変わる |
CSSでは、背景色だけでなく、背景画像なども扱えます。ただし、最初は背景色の指定から理解すると分かりやすいです。
colorは文字色を指定する
colorは、文字の色を指定するためのプロパティです。
bodyにcolorを指定すると、ページ全体の基本の文字色として使われます。h1など別の要素にcolorを指定すると、その要素だけ別の色にできます。
| 指定例 | 役割 |
|---|---|
| bodyのcolor | ページ全体の基本文字色 |
| h1のcolor | 見出しだけの文字色 |
| pのcolor | 段落だけの文字色 |
文字色を選ぶときは、背景色との読みやすさも大切です。薄い背景には濃い文字、濃い背景には明るい文字を組み合わせると読みやすくなります。
font-familyは書体を指定する
font-familyは、文字の書体を指定するプロパティです。
Webページを見る人の環境によって、使えるフォントは異なる場合があります。そのため、font-familyでは複数のフォント候補を順番に指定することがあります。
font-family: "Segoe UI", sans-serif;この指定では、まずSegoe UIが使えるかを確認し、使えない場合はsans-serif系のフォントを使います。
| 指定 | 内容 |
|---|---|
| Segoe UI | 具体的なフォント名 |
| sans-serif | ゴシック体のような系統を表す指定 |
フォントはページの印象に大きく関わります。やわらかい印象、ビジネスらしい印象、読みやすさ重視の印象など、目的に合わせて選ぶことが大切です。
font-sizeは文字サイズを指定する
font-sizeは、文字の大きさを指定するプロパティです。
見出しを大きくしたり、補足説明を小さくしたりすることで、ページ内の情報に強弱を付けられます。
| 指定 | 内容 |
|---|---|
| 100% | 基本サイズ |
| 150% | 基本より大きめ |
| 220% | かなり大きめ |
| 16px | ピクセル単位で指定 |
文字サイズを変えると、ページの読みやすさが大きく変わります。
見出しは本文より大きくすると、どこが重要な情報なのか分かりやすくなります。一方、本文の文字が小さすぎると読みづらくなります。
CSSでは、文字サイズを見た目だけでなく、情報の階層を伝えるためにも使います。
text-alignは文字の配置を指定する
text-alignは、文字やインライン要素の横方向の配置を指定するプロパティです。
| 値 | 表示のイメージ |
|---|---|
| left | 左寄せ |
| center | 中央寄せ |
| right | 右寄せ |
見出しを中央に配置すると、ページのタイトルとして目立たせやすくなります。本文は左寄せのほうが読みやすいことが多いため、用途に合わせて使い分けます。
CSSでは、同じ文章でも配置を変えるだけで印象が変わります。
CSSセレクタの基本
CSSセレクタは、どのHTML要素にスタイルを適用するかを指定する部分です。
代表的なセレクタには、要素セレクタ、クラスセレクタ、IDセレクタがあります。
| セレクタ | 対象 | 例 |
|---|---|---|
| 要素セレクタ | 同じタグ名の要素すべて | p、h1、body |
| クラスセレクタ | class属性が指定された要素 | .note、.btn |
| IDセレクタ | id属性が指定された要素 | #header、#main |
要素セレクタは、指定したタグ名すべてに適用されます。たとえばpを指定すると、すべてのp要素に同じスタイルが適用されます。
クラスセレクタは、特定のグループにスタイルを当てたいときに使います。同じclass属性を複数の要素に付けることで、まとめて同じ見た目を指定できます。
IDセレクタは、ページ内で一意の要素を指定したいときに使います。id属性は、同じページ内で重複しないようにします。
要素セレクタ・クラスセレクタ・IDセレクタの違い
セレクタの違いを整理すると、次のようになります。
| 種類 | 書き方 | 向いている使い方 |
|---|---|---|
| 要素セレクタ | h1、pなど | 同じ種類の要素全体に指定する |
| クラスセレクタ | .btn、.noteなど | 複数の要素に同じデザインを付ける |
| IDセレクタ | #headerなど | 特定の1か所だけを指定する |
たとえば、すべての段落の文字色を変えたい場合はpを使います。
複数の場所にある注意文だけを目立たせたい場合は、class属性にnoteなどを付け、.noteで指定します。
ページのヘッダー部分だけを特別に指定したい場合は、id属性にheaderを付け、#headerで指定することがあります。
CSSを使いこなすには、どの範囲にスタイルを当てたいのかを考えて、適切なセレクタを選ぶことが大切です。
図3：セレクタで装飾する対象を選ぶ
この図から分かること
この図から、CSSセレクタはスタイルを適用する対象を選ぶための仕組みであることが分かります。
要素セレクタは、同じタグ名の要素すべてを対象にします。クラスセレクタは、同じclass属性を持つ要素をまとめて対象にします。IDセレクタは、特定のid属性を持つ1つの要素を対象にします。
CSSで思った通りの見た目にならない場合は、セレクタが正しい対象を選んでいるかを確認することが大切です。
セレクタは組み合わせて使える
CSSセレクタは、単独で使うだけでなく、組み合わせて使うこともできます。
| セレクタの例 | 意味 |
|---|---|
| ul li | ulの中にあるliを対象にする |
| nav a | navの中にあるaを対象にする |
| nav > a | navの直下にあるaだけを対象にする |
| a:hover | リンクにマウスが重なったときだけ対象にする |
ul liのような指定は、ある要素の内側にある要素を対象にします。これを子孫セレクタと呼びます。
nav > aのような指定は、navの直下にあるaだけを対象にします。内側のさらに深い場所にあるaは対象になりません。
a:hoverは、リンクにマウスを重ねたときの状態を表します。このような状態に応じた指定を疑似クラスと呼びます。
セレクタを組み合わせることで、ページ全体ではなく、特定の場所や状態だけにCSSを適用できます。
ホバー効果とは
ホバー効果とは、マウスカーソルを要素の上に重ねたときに見た目を変える表現です。
たとえば、ボタンにマウスを重ねたときに背景色が少し明るくなると、ユーザーは「ここは操作できる場所だ」と分かりやすくなります。
| 状態 | 表示の例 |
|---|---|
| 通常時 | オレンジ色のボタン |
| ホバー時 | 少し明るいオレンジ色のボタン |
| クリック前 | 操作できることが分かる |
| クリック後 | 処理が実行される |
ホバー効果は、リンクやボタンでよく使われます。
ただし、スマートフォンではマウスホバーがないため、ホバー効果だけに重要な情報を持たせるのは避けましょう。ボタンであることは、通常時の見た目だけでも分かるようにしておくことが大切です。
ボタンにホバー効果を付けるサンプル
次のサンプルでは、buttonにclass属性を付け、CSSでボタンらしい見た目を指定します。さらに、マウスを重ねたときに背景色が変わるようにします。
ファイル名： lesson22_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンのホバー効果</title>
<style>
.btn {
display: inline-block;
padding: 0.6em 1.2em;
background: #ff8c00;
color: #ffffff;
border: none;
border-radius: 6px;
transition: background 0.3s ease;
}
.btn:hover {
background: #ffb347;
}
</style>
</head>
<body>
<h1>ボタンの見た目を変える</h1>
<button class="btn">クリック</button>
</body>
</html>ブラウザの表示例
ブラウザで表示すると、「クリック」と書かれたオレンジ色のボタンが表示されます。ボタンにマウスを重ねると、背景色が少し明るいオレンジ色に変わります。
| 指定 | 内容 |
|---|---|
| .btn | class属性がbtnの要素を対象にする |
| display | 表示の性質を指定する |
| padding | 内側の余白を指定する |
| background | 背景色を指定する |
| color | 文字色を指定する |
| border | 枠線を指定する |
| border-radius | 角丸を指定する |
| transition | 変化をなめらかにする |
| .btn:hover | マウスを重ねたときの見た目を指定する |
このサンプルでは、class属性にbtnを指定したbuttonに対して、.btnというクラスセレクタでCSSを適用しています。
通常時はbackgroundでオレンジ色を指定し、.btn:hoverではホバー時の背景色を少し明るくしています。
transitionを指定することで、背景色が一瞬で切り替わるのではなく、少しなめらかに変化します。
class属性は同じ見た目を再利用するときに便利
class属性は、同じデザインを複数の要素に適用したいときに便利です。
たとえば、ページ内に複数のボタンがある場合、すべてにclass属性でbtnを付けておけば、CSSの.btnでまとめて同じ見た目を指定できます。
| 使い方 | 利点 |
|---|---|
| 複数のボタンに同じclass属性を付ける | 同じデザインを再利用できる |
| CSSで.btnを指定する | まとめて見た目を変更できる |
| class名を意味のある名前にする | 役割が分かりやすくなる |
class属性を使うと、HTMLの構造とCSSの装飾をつなげられます。
同じ見た目を繰り返し使う場合は、タグに直接スタイルを書くよりも、class属性とクラスセレクタを組み合わせるほうが管理しやすくなります。
transitionで変化をなめらかにする
transitionは、CSSの値が変化するときに、その変化をなめらかにするためのプロパティです。
ボタンのホバー効果では、通常時の背景色からホバー時の背景色へ切り替わります。このときtransitionを指定しておくと、色がふわっと変わるように見えます。
| 指定する内容 | 役割 |
|---|---|
| 変化させるプロパティ | backgroundなど |
| 変化にかける時間 | 0.3sなど |
| 変化の進み方 | easeなど |
transitionは、ボタンやリンクなど、操作に反応する部品でよく使われます。
ただし、動きが多すぎるとページが落ち着かなく見えることもあります。小さな変化を自然に見せるくらいから使い始めるとよいでしょう。
内部スタイルと外部スタイルの使い分け
学習では内部スタイルが便利ですが、実際のWeb制作では外部スタイルがよく使われます。
内部スタイルは、1つのHTMLファイルの中でCSSも確認できるため、練習に向いています。しかし、ページ数が増えてくると、同じCSSを何度も書くことになり、管理が大変になります。
外部スタイルでは、CSSを別ファイルにまとめます。複数のHTMLページで同じCSSファイルを読み込めば、全ページのデザインを一括で変更しやすくなります。
| 方法 | 向いている場面 |
|---|---|
| 内部スタイル | CSSの学習、小さなサンプル |
| 外部スタイル | 複数ページのサイト、実務制作 |
| インラインスタイル | 一時的な確認や例外的な指定 |
CSSを本格的に使うようになると、外部CSSファイルを作成し、HTMLからlinkで読み込む方法が重要になります。
CSSでできる主な装飾
CSSでできることはとても多くあります。最初は、文字、色、背景、余白、配置などの基本から学ぶと分かりやすいです。
| 分類 | CSSでできること |
|---|---|
| 文字 | 色、サイズ、書体、太さ、行間 |
| 背景 | 背景色、背景画像、背景の位置 |
| 余白 | 内側の余白、外側の余白 |
| 枠線 | 線の太さ、種類、色、角丸 |
| 配置 | 左寄せ、中央寄せ、横並び、縦並び |
| 動き | ホバー効果、なめらかな変化 |
| レイアウト | ヘッダー、メニュー、カード、グリッド |
CSSを使うと、HTMLで作った要素を見やすく整えられます。
たとえば、見出しの色を変えるだけでも、ページの印象は変わります。余白を整えると、文章が読みやすくなります。ボタンの見た目を整えると、操作できる場所が分かりやすくなります。
使用するタグ・属性・CSSを整理する
この記事で登場した主なタグ、属性、CSSの考え方を整理しておきましょう。
| 種類 | 名前 | 用途 |
|---|---|---|
| タグ | style | HTML内にCSSを書く |
| タグ | link | 外部CSSファイルを読み込む |
| タグ | h1 | 大きな見出しを表す |
| タグ | p | 段落を表す |
| タグ | button | ボタンを表す |
| 属性 | class | CSSでまとめて指定するための名前を付ける |
| 属性 | id | ページ内で一意の名前を付ける |
| 属性 | style | インラインスタイルを書く |
| CSS | background | 背景を指定する |
| CSS | color | 文字色を指定する |
| CSS | font-family | 書体を指定する |
| CSS | font-size | 文字サイズを指定する |
| CSS | text-align | 文字の横方向の配置を指定する |
| CSS | padding | 内側の余白を指定する |
| CSS | border | 枠線を指定する |
| CSS | border-radius | 角丸を指定する |
| CSS | transition | 変化をなめらかにする |
| CSS | :hover | マウスが重なったときの状態を指定する |
最初に大切なのは、CSSはセレクタ、プロパティ、値の組み合わせで書くということです。
どの要素に適用するのかをセレクタで選び、何を変えるのかをプロパティで指定し、どのように変えるのかを値で指定します。
CSSを学ぶときに意識したいこと
CSSは、見た目を自由に変えられる便利な技術です。ただし、最初からすべてのプロパティを覚える必要はありません。
まずは、文字色、背景色、文字サイズ、中央寄せ、余白、ボタンの装飾など、よく使う基本から少しずつ慣れていくとよいでしょう。
| 意識したいこと | 内容 |
|---|---|
| HTMLとCSSの役割を分ける | 構造はHTML、見た目はCSS |
| セレクタを正しく選ぶ | どの要素に適用するかを明確にする |
| プロパティと値をセットで考える | 何をどう変えるかを理解する |
| 内部スタイルで練習する | 1ファイルで動きを確認しやすい |
| 実務では外部スタイルを使う | 複数ページを管理しやすい |
| 読みやすさを優先する | 色や動きを使いすぎない |
CSSを使えるようになると、HTMLだけでは表現しにくかったデザインができるようになります。
背景色を変える、見出しを目立たせる、ボタンを分かりやすくする、余白を整える。このような小さな装飾の積み重ねが、読みやすく使いやすいWebページにつながります。
CSSは、Webページに表情を与えるための大切な技術です。HTMLで作った構造にCSSでデザインを加えることで、ページはより伝わりやすく、魅力的なものになります。