6日でできる 新HTML&CSS入門｜スタイルシートの基本形

CSSは、セレクタで相手を選び、プロパティと値で見た目を決める。基本形を理解して、HTMLにデザインを加える第一歩を踏み出そう。

HTMLは、見出し、段落、画像、表、リンクなどを使って、Webページの構造を作るための言語です。どこが大きな見出しなのか、どこが本文なのか、どこに画像を置くのかといった、ページの骨組みを作る役割があります。

しかし、HTMLだけで作ったページは、基本的にはブラウザの標準的な見た目で表示されます。文字の色を変えたり、背景に色を付けたり、見出しを大きくしたり、余白を整えたりするには、CSSを使います。

CSSは、Webページの見た目を指定するためのスタイルシートです。HTMLの構造はそのままに、色、文字サイズ、背景、余白、配置などを変更できます。

CSSを書くときにまず覚えたいのが、セレクタ、プロパティ、値の3点セットです。セレクタは、どのHTML要素にスタイルを当てるかを指定します。プロパティは、何を変更するかを示します。値は、どのように変更するかを指定します。

たとえば、見出しの文字色をオレンジにしたい場合は、h1を対象にして、colorというプロパティに色の値を指定します。このように、CSSは「どこを」「何を」「どうするか」という形で書いていきます。

この記事では、CSSのコメント、セレクタ、プロパティと値、内部スタイルの書き方、色や文字サイズの変更方法を、シンプルなサンプルHTMLを使って丁寧に解説します。

ここからCSSの基本に入るため、サンプルではstyle要素内にCSSを記述して、HTMLとCSSの関係を確認していきます。大きなサイトで使う外部CSSファイルについては、CSSファイルの使い方に関する記事でさらに詳しく学んでいきましょう。

スタイルシートはHTMLの見た目を整える仕組み

スタイルシートは、HTMLなどの文書に対して、見た目を指定するための仕組みです。

HTMLがページの内容や構造を表すのに対して、CSSはページの見た目を担当します。文字色、背景色、フォント、文字サイズ、余白、配置などを指定することで、ページを読みやすく整えられます。

役割担当する内容例
HTMLページの構造を作るh1、p、img、table
CSSページの見た目を整えるcolor、font-size、background-color
ブラウザHTMLとCSSを解釈して表示するWebページとして表示する

HTMLだけでもページは表示できます。しかし、見た目を整えるにはCSSが必要です。

たとえば、同じHTMLでも、CSSを変えるだけで、明るく親しみやすいページにも、落ち着いたビジネス向けのページにもできます。

HTMLとCSSを分けて考えると、文章の内容を変えずにデザインだけを変更できます。これはWeb制作でとても大切な考え方です。

図1：HTMLの構造にCSSで見た目を加える

この図から分かること

この図から、HTMLとCSSの役割の違いが分かります。

HTMLは、ページの内容や構造を作ります。見出し、段落、画像などを配置し、文書としての意味を表します。

CSSは、そのHTMLに対して見た目を加えます。背景色を付けたり、見出しの文字色を変えたり、文字サイズを大きくしたりできます。

つまり、HTMLはページの骨組み、CSSはページの装飾を担当します。2つを分けて考えることで、あとからデザインを変更しやすくなります。

CSSの基本形は3つの要素で考える

CSSの基本形は、セレクタ、プロパティ、値の3つで考えます。

セレクタ {
  プロパティ: 値;
}
名前役割例
セレクタどの要素に指定するかを選ぶbody、h1、p
プロパティ何を変更するかを指定するcolor、font-size、background-color
値どのように変更するかを指定する#333、240%、#fff8e1

セレクタは、CSSを当てる相手を選ぶ部分です。たとえば、h1をセレクタにすると、h1要素に対してスタイルを指定できます。

プロパティは、変更したい項目です。文字色を変えるならcolor、背景色を変えるならbackground-color、文字サイズを変えるならfont-sizeを使います。

値は、プロパティに対して指定する内容です。色なら#ff6600のようなカラーコード、文字サイズなら240%のような値を指定します。

CSSを書くときは、「どこを変えるのか」「何を変えるのか」「どの値にするのか」を順番に考えると分かりやすくなります。

コメントはCSSの補足説明を書くために使う

CSSには、コメントを書くことができます。コメントは、コードの説明やメモを残すために使います。

コメントはブラウザには表示されません。ページの見た目にも影響しません。あくまで、コードを読む人のための説明です。

/* これはコメントです */

/* 複数行にわたって
   説明を書くこともできます */
コメントの使い方目的
何の指定かを書く後から見たときに分かりやすい
色の意味を書く例：ブランドカラー、背景色など
一時的なメモを書く修正予定や確認事項を残す
セクションを分けるCSSが長くなったときに整理しやすい

CSSは、ページが大きくなるほど行数が増えます。どの部分が何を指定しているのか分かりにくくなることもあります。

そのため、コメントを使って「ページ全体の設定」「見出しの設定」「ボタンの設定」のように補足しておくと、あとから修正しやすくなります。

ただし、コメントを書きすぎると逆に読みにくくなることもあります。必要なところに短く分かりやすく書くのがよいでしょう。

セレクタはスタイルを当てる対象を選ぶ

セレクタは、CSSをどのHTML要素に適用するかを指定する部分です。

たとえば、bodyをセレクタにすると、ページ全体に関係する指定ができます。h1をセレクタにすると、h1要素にだけ指定できます。

セレクタ対象使い方の例
bodyページ全体背景色や基本文字色を指定する
h1大きな見出し見出しの色や文字サイズを指定する
p段落本文の文字色や行間を指定する
.noteclass属性がnoteの要素注意文などをまとめて装飾する
#mainid属性がmainの要素特定の1か所を装飾する

最初に学ぶ段階では、body、h1、pのような要素セレクタから覚えると分かりやすいです。

要素セレクタは、同じタグ名の要素すべてにスタイルを当てます。たとえば、pを指定すると、ページ内のすべてのp要素に同じスタイルが適用されます。

クラスセレクタやIDセレクタは、さらに細かく対象を選びたいときに使います。

プロパティと値は見た目の内容を決める

プロパティは、変更したい見た目の項目です。値は、その項目に設定する内容です。

書き方は、プロパティ、コロン、値、セミコロンの順です。

color: #ff6600;
font-size: 240%;
background-color: #fff8e1;
用語役割例
プロパティ変更したい項目color
値指定する内容#ff6600
コロンプロパティと値をつなぐ:
セミコロン指定の終わりを示す;

たとえば、color: #ff6600;は、文字色をオレンジ系にする指定です。

font-size: 240%;は、文字サイズを大きくする指定です。

background-color: #fff8e1;は、背景色を淡いクリーム色にする指定です。

CSSでは、このようなプロパティと値の組み合わせを複数書くことで、1つの要素にいくつもの見た目を指定できます。

複数の指定は波括弧の中にまとめる

CSSでは、同じ対象に複数のスタイルを指定できます。その場合は、セレクタの後ろに波括弧を書き、その中にプロパティと値を並べます。

h1 {
  color: #ff6600;
  font-size: 240%;
}

この例では、h1に対して、文字色と文字サイズの2つを指定しています。

セレクタプロパティ値効果
h1color#ff6600見出しの文字色を変える
h1font-size240%見出しの文字サイズを大きくする

CSSを書くときは、1行に詰め込むこともできますが、学習段階では1つのプロパティを1行ずつ書くと読みやすくなります。

インデントをそろえると、どの指定がどのセレクタに含まれているのか分かりやすくなります。

図2：CSSの基本形を分解する

この図から分かること

この図から、CSSはセレクタ、プロパティ、値の組み合わせでできていることが分かります。

セレクタは、スタイルを当てる対象を選びます。h1であれば、h1要素が対象になります。

プロパティは、変更したい項目です。colorは文字色、font-sizeは文字サイズを指定します。

値は、具体的な指定内容です。#ff6600は色、240%は文字サイズの大きさを表します。

CSSはこの基本形を何度も組み合わせて、Webページ全体の見た目を作っていきます。

内部スタイルでCSSを書く

CSSを書く場所にはいくつかの方法がありますが、学習では内部スタイルが分かりやすいです。

内部スタイルでは、HTMLファイルのhead内にstyle要素を書き、その中にCSSを記述します。

方法書く場所特徴
内部スタイルhead内のstyle要素1つのHTMLファイルで確認しやすい
外部スタイル別のCSSファイル実務で管理しやすい
インラインスタイルHTMLタグのstyle属性1か所だけ指定したい場合に使う

内部スタイルは、HTMLとCSSを同じファイルで確認できるため、CSSを学び始めた段階では便利です。

ただし、ページ数が増えると、同じCSSを複数のHTMLファイルに書くことになり、管理が大変になります。そのため、実際のWeb制作では外部CSSファイルを使うことが多くなります。

ここでは、CSSの基本形を理解するために、内部スタイルでサンプルを作成します。

基本形を使ってページを装飾する

最初のサンプルでは、ページ全体の背景色、基本文字色、フォント、見出しの色、見出しの文字サイズを指定します。

ファイル名： lesson23_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>スタイルシートの基本形</title>
  <style>
    /* ページ全体と見出しの見た目を定義 */
    body {
      background-color: #fff8e1;
      color: #333333;
      font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    }

    h1 {
      color: #ff6600;
      font-size: 240%;
    }
  </style>
</head>
<body>
  <h1>CSSは3つの基本で考える</h1>
  <p>セレクタ、プロパティ、値を組み合わせると、HTMLの見た目を変更できます。</p>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、ページ全体の背景が淡いクリーム色になり、見出しは大きなオレンジ色の文字で表示されます。本文は濃いグレーで表示されます。

対象指定表示のイメージ
bodybackground-color背景が淡いクリーム色になる
bodycolor基本の文字色が濃いグレーになる
bodyfont-familyゴシック系の書体で表示される
h1color見出しがオレンジ色になる
h1font-size見出しが大きく表示される

このサンプルでは、bodyとh1に対してCSSを指定しています。

bodyに指定したbackground-colorは、ページ全体の背景色に影響します。bodyに指定したcolorは、ページ全体の基本文字色として使われます。

h1に指定したcolorとfont-sizeは、見出しだけに適用されます。そのため、本文は濃いグレーのまま、見出しだけがオレンジ色で大きく表示されます。

bodyへの指定はページ全体に影響しやすい

bodyは、ブラウザに表示される内容全体を包む要素です。

そのため、bodyに背景色や基本の文字色を指定すると、ページ全体の見た目に影響します。

bodyに指定する例効果
background-colorページ全体の背景色を変える
colorページ全体の基本文字色を変える
font-familyページ全体の書体を指定する

ただし、すべてが必ずそのまま受け継がれるわけではありません。別の要素に個別のCSSを指定した場合は、その要素だけ別の見た目にできます。

たとえば、bodyにcolorで濃いグレーを指定しても、h1にcolorでオレンジを指定すれば、h1だけはオレンジ色になります。

このように、全体の基本設定はbodyに書き、特別に変えたい部分はh1やpなどに個別指定する、という考え方がよく使われます。

h1への指定で見出しを目立たせる

h1は、ページの大きな見出しを表す要素です。CSSを使うと、h1の色や文字サイズを変更できます。

プロパティ役割
color文字色を指定する
font-size文字サイズを指定する
text-align文字の配置を指定する
background-color背景色を指定する

見出しは、ページの内容を伝える重要な部分です。本文よりも少し大きくしたり、色を変えたりすることで、読者がページのテーマをすぐに理解しやすくなります。

ただし、見出しを大きくしすぎたり、色を強くしすぎたりすると、ページ全体のバランスが崩れることもあります。見やすさを意識しながら指定しましょう。

値を変えるだけでページの印象は変わる

CSSの便利なところは、HTMLの構造を変えずに見た目だけを変更できることです。

たとえば、見出しの色をオレンジから青に変えたい場合、HTMLのh1やpを書き換える必要はありません。CSSのcolorの値だけを変更します。

変更する場所変更前変更後
h1のcolor#ff6600#0066cc
HTML本文変更なし変更なし
表示結果オレンジの見出し青い見出し

このように、CSSの値を書き換えるだけで、ページの雰囲気を変えられます。

HTMLは文章や構造を担当し、CSSは見た目を担当する。この分担ができると、Webページの修正がとても楽になります。

見出しの色だけを変更するサンプル

次のサンプルでは、HTMLの内容は似たまま、h1の色だけを青系に変更します。CSSの値を変えるだけで印象が変わることを確認しましょう。

ファイル名： lesson23_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>見出しの色を変える</title>
  <style>
    body {
      background-color: #fff8e1;
      color: #333333;
    }

    h1 {
      color: #0066cc;
      font-size: 240%;
    }
  </style>
</head>
<body>
  <h1>色を変えるのはCSSの値</h1>
  <p>HTMLの構造を変えなくても、CSSの値を変更すると見た目の印象が変わります。</p>
</body>
</html>

ブラウザの表示例

ブラウザで表示すると、背景は淡いクリーム色のまま、見出しが青系の色で表示されます。本文は濃いグレーで表示されます。

対象指定表示のイメージ
bodybackground-color背景は淡いクリーム色
bodycolor本文は濃いグレー
h1color見出しは青系
h1font-size見出しは大きく表示

1つ目のサンプルでは、h1のcolorに#ff6600を指定していました。2つ目のサンプルでは、h1のcolorに#0066ccを指定しています。

この違いにより、見出しの色がオレンジ系から青系に変わります。

HTMLの基本構造は大きく変えていません。CSSの値を変えるだけで、ページの印象を切り替えられることが分かります。

図3：CSSの値を変えると見た目が変わる

この図から分かること

この図から、CSSの値を変えるだけで、Webページの見た目が変わることが分かります。

どちらの例でも、対象はh1で、プロパティはcolorです。しかし、値が#ff6600の場合はオレンジ系の見出しになり、#0066ccの場合は青系の見出しになります。

HTMLの構造を変更しなくても、CSSの値を変えるだけで印象を変えられるのがCSSの大きな特徴です。

この仕組みを理解すると、デザイン調整をHTMLではなくCSSで行う理由が分かりやすくなります。

サンプルで使ったプロパティを整理する

2つのサンプルで使ったCSSプロパティを整理しておきましょう。

セレクタプロパティ値効果
bodybackground-color#fff8e1背景を淡いクリーム色にする
bodycolor#333333基本の文字色を濃いグレーにする
bodyfont-familyHiragino Kaku Gothic ProN、sans-serifページ全体の書体を指定する
h1color#ff6600見出しをオレンジ系にする
h1color#0066cc見出しを青系にする
h1font-size240%見出しを大きくする

background-colorは背景色を指定します。ページ全体の背景を変えたい場合は、bodyに指定します。

colorは文字色を指定します。bodyに指定すると基本の文字色になり、h1に指定するとh1だけ別の文字色にできます。

font-familyは書体を指定します。font-sizeは文字サイズを指定します。

background-colorは背景色を指定する

background-colorは、背景色を指定するためのプロパティです。

指定対象効果
bodyページ全体の背景色が変わる
h1見出し部分の背景色が変わる
p段落部分の背景色が変わる

サンプルでは、bodyにbackground-colorを指定して、ページ全体を淡いクリーム色にしています。

背景色を変えると、ページ全体の印象が大きく変わります。白い背景はシンプルで読みやすく、淡い色の背景はやわらかい印象を与えます。

ただし、背景色を付けるときは、文字色との組み合わせも大切です。背景と文字の差が小さいと、読みにくくなることがあります。

colorは文字色を指定する

colorは、文字色を指定するためのプロパティです。

サンプルでは、bodyにcolorを指定して、ページ全体の基本文字色を濃いグレーにしています。また、h1にもcolorを指定して、見出しだけ別の色にしています。

指定対象効果
bodyのcolorページ全体の基本文字色
h1のcolor見出しだけの文字色
pのcolor段落だけの文字色

CSSでは、親要素に指定した文字色が、内側の要素に受け継がれることがあります。これを継承と呼びます。

bodyにcolorを指定すると、その内側にある文字の基本色として使われます。ただし、h1に別のcolorを指定すると、h1だけはその色になります。

font-familyは書体を指定する

font-familyは、文字の書体を指定するプロパティです。

サンプルでは、bodyにfont-familyを指定しています。これにより、ページ全体の文字に指定した書体が使われます。

font-family: "Hiragino Kaku Gothic ProN", sans-serif;

この指定では、まずHiragino Kaku Gothic ProNが使えるかを確認し、使えない場合はsans-serif系の書体が使われます。

指定意味
Hiragino Kaku Gothic ProN具体的なフォント名
sans-serifゴシック体のような書体の種類

Webページを見る環境によって、使えるフォントは異なります。そのため、font-familyでは複数の候補を用意することがあります。

書体はページの印象を大きく変えます。読みやすさを意識しながら指定することが大切です。

font-sizeは文字サイズを指定する

font-sizeは、文字の大きさを指定するプロパティです。

サンプルでは、h1にfont-sizeを指定して、見出しを大きく表示しています。

値の例意味
100%基本の大きさ
150%基本より大きい
240%基本の2.4倍程度
16pxピクセル単位で指定

見出しを本文より大きくすると、ページの構造が読み取りやすくなります。

ただし、文字を大きくしすぎると、画面内でバランスが悪くなることがあります。見出し、本文、補足説明の大きさに差を付けながら、全体として読みやすいサイズに整えることが大切です。

CSSを書くときの見やすい整え方

CSSは、正しく書くことだけでなく、読みやすく整えることも大切です。

書き方のポイント理由
セレクタごとに分けるどの要素への指定か分かりやすい
プロパティを1行ずつ書く指定内容を確認しやすい
インデントをそろえる波括弧の内側が見やすい
コメントを適度に使う何のための指定か分かりやすい
色の値を統一するデザインの管理がしやすい

CSSは、ページが大きくなるほど長くなります。

最初から読みやすい書き方を意識しておくと、あとから修正するときに迷いにくくなります。

特に、セレクタ、波括弧、プロパティ、値、セミコロンの位置をそろえると、CSS全体が見やすくなります。

内部スタイルと外部スタイルの違い

この記事では、学習しやすいように内部スタイルを使っています。

内部スタイルは、HTMLファイルの中にCSSを書く方法です。小さなサンプルや練習では便利ですが、実際のWeb制作では外部スタイルを使うことが多くなります。

方法特徴向いている場面
内部スタイルHTMLファイル内にCSSを書く学習、小さなページ
外部スタイルCSSを別ファイルに分ける実務、複数ページの管理
インラインスタイルHTMLタグに直接CSSを書く一時的な確認、例外的な指定

外部スタイルでは、main.cssのようなCSSファイルを作り、HTMLから読み込みます。

外部スタイルにすると、複数のHTMLページで同じCSSを使い回せます。デザインを変更したいときも、CSSファイルを修正するだけで、複数ページの見た目をまとめて変えられます。

使用するタグ・属性・CSSを整理する

今回登場したタグ、属性、CSSの考え方を整理しておきましょう。

種類名前説明
タグstyleHTML内にCSSを書くための要素
タグbodyブラウザに表示する内容全体
タグh1ページの大きな見出し
タグp段落
属性langHTML文書の言語を指定する
属性charset文字コードを指定する
CSSセレクタスタイルを当てる対象
CSSプロパティ変更したい見た目の項目
CSS値プロパティに指定する内容
CSSbackground-color背景色を指定する
CSScolor文字色を指定する
CSSfont-family書体を指定する
CSSfont-size文字サイズを指定する
CSSコメントCSS内に補足説明を書く

CSSの基本は、セレクタで対象を選び、プロパティと値で見た目を指定することです。

style要素は、HTML内にCSSを書くために使います。学習段階では、HTMLとCSSを同じファイル内で確認できるため便利です。

スタイルシートの基本形を覚えるとできること

スタイルシートの基本形を理解すると、Webページの見た目を少しずつ変えられるようになります。

できること例
背景色を変えるページ全体を淡い色にする
文字色を変える見出しをオレンジや青にする
文字サイズを変える見出しを大きくする
書体を変えるページ全体の印象を整える
HTMLを変えずにデザインを変えるCSSの値だけを変更する

最初は、background-color、color、font-sizeのような基本的なプロパティから練習すると分かりやすいです。

見出しの色を変える、背景色を変える、文字サイズを変える。このような小さな変更を試しながら、CSSの基本形に慣れていきましょう。

スタイルシートを書くときに意識したいこと

CSSを書くときは、次の点を意識すると理解しやすくなります。

意識したいこと内容
セレクタで対象を決めるどのHTML要素を変えるのかを考える
プロパティで項目を決める色、背景、サイズなど何を変えるか考える
値で見た目を決めるどの色、どの大きさにするか指定する
コメントで補足するコードの目的を分かりやすくする
HTMLとCSSの役割を分ける構造はHTML、見た目はCSSで管理する

CSSは、ひとつの指定だけでもページの印象を変えられます。

大切なのは、CSSを暗記することではなく、基本形を理解することです。セレクタ、プロパティ、値の3つを意識すれば、新しいプロパティを学ぶときも「何を対象に、何を、どう変えるのか」と整理して考えられます。

HTMLで構造を作り、CSSで見た目を整える。この考え方を身につけることで、Webページをより読みやすく、使いやすく、魅力的に装飾できるようになります。