コードカキタイ
コーディング
CSS
【サンプルコード付】CSSの書き方とルールを初心者にも分かりやすく解説！

CSS

最終更新日: 2024.01.26 (公開: 2022.01.25)

【サンプルコード付】CSSの書き方とルールを初心者にも分かりやすく解説！

初心者

CSSはWebサイトのデザインや、レイアウトなどの見た目を整えるための言語です。ほとんどのWebサイトはHTMLとCSSで、見た目が作られています。HTMLを学習したあとに、CSSを学び始める方が多いのではないでしょうか。

HTMLで作成した文書にCSSを付け加えることで、色や大きさや背景などが施されます。これによりWebサイトが非常に見やすくなるのです。

CSSの基本を習得できれば、Webサイトの簡単な装飾や修正ができるようになります。人にWebサイトの制作を依頼する際にも、CSSの知識は役立つでしょう。

この記事では、CSSの概要から書き方のルールまで初心者の人にもわかるように詳しく解説します。この記事を読めば、サンプルコードもあるので今までCSSに触れたことがない人でもCSSを書けるようになります。

CSSとはWebページの見た目を作る言語のこと

CSS（Cascasing Style Sheets）は、Webページの見た目を作る言語のことです。日本語ではスタイルシートとも呼ばれ、Webページを作成するうえで欠かせない言語の一つ。

CSSを付け加える前のHTMLだけのWebページは、文字と画像が順番に並んだだけの単調なものです。そこへCSSを使用してデザインやレイアウトを付け加えます。文字の大きさや色を変えたり、背景の色を変えたり画像を好きな場所へ配置したり、カスタマイズして見栄え良く整える役目があります。

いくら内容が充実したページでも、デザインが良くなければユーザーを惹きつけるのは難しいでしょう。CSSを使いこなして魅力的なWebページを作りましょう。

CSSでできること

CSSはHTMLで作られた文書に対して、主に色や大きさなどの見た目の指定を行います。具体的にイメージできるよう、サンプルを用意しました。

[sample.html]
<p>こんにちは</p>

[ブラウザ表示結果]
こんにちは

HTMLコードのみだと文章は入力したままシンプルに表示されます。

[sample.html]
<p>こんにちは</p>

[sample.css]
p{
color:pink;
font-size:20px;
}

[ブラウザ表示結果]
こんにちは

このように、CSSを付け加えることで色や大きさを変更できます。他にもさまざまな指定をすることができますよ。コードの書き方についてはこのあと順番に見ていきましょう。

HTMLとの違い

HTMLとCSSはそれぞれ役割が違います。

HTMLの主な役割は、Webサイトの骨組みを作ることです。サイトにはそれぞれタイトルや画像、テキストなどの構成要素があります。それをコンピュータに認識させるために、HTMLはタグという機能を使って「ここはタイトルです」「ここは画像です」と定義する役割を担っています。

CSSの主な役割は、これまで説明してきたようにWebサイトの見た目を調整することです。HTMLで定義した構成要素にデザインを施して、Webサイトの個性を表現できます。また、HTMLで指定したタグを一括で装飾したり、特定のタグのみ装飾したりもできます。

役割は違いますが、HTMLとCSSはセットで理解しておきましょう。

CSSの基本的な書き方とルール

ここでは、CSSの基本的な書き方とルールについてそれぞれ詳しく解説します。はじめは難しく感じるかもしれませんが、基本を覚えてしまえば簡単にさまざまな指定ができるようになりますよ。

基本的なCSSの書き方は以下のとおりです。

セレクタ{プロパティ : 値;}

セレクタ、プロパティ、値を指定することでHTML内の「どこの（セレクタ）・何を（プロパティ）・どのようにするか（値）」をデザインできます。わかりやすいよう例も交えながら説明しますので、参考にしてください。

1.セレクタ

セレクタは、CSSによるスタイルの指定をどのHTML要素の範囲に適用させるかを指定するのに用いられます。

[sample.html]
<p>こんにちは</p>

[sample.css]
p{
color:pink;
font-size:20px;
}

サンプルではCSSコード内の「p」がセレクタです。HTMLコードのpタグで囲まれた範囲（＝こんにちは）にスタイルの指定をします。セレクタにはタグ以外にも幅広い指定方法があり、後ほど詳しく紹介していきますので参考にしてください。

2.プロパティ

プロパティとは、セレクタで指定した範囲に適用するスタイルの種類のことです。

◎サンプル

[sample.html]
<p>こんにちは</p>

[sample.css]
p{
color:pink;
font-size:20px;
}

サンプルではCSSコード内の「color」と「font-size」がプロパティです。セレクタで指定したpタグの範囲に「color」で色、「font-size」で文字の大きさのスタイルを指定することを表しています。

プロパティにはたくさんの種類があります。一部ですが、よく使われるものをあげます。

プロパティ	プロパティの意味
color	文字の色
font-family	フォントの種類
font-size	文字の大きさ
font-weight	文字の太さ
line-height	行の高さ
background	背景

3.値

値とは、指定した範囲に指定したスタイルをどのように変化させるかを示したものです。

[sample.html]
<p>こんにちは</p>

[sample.css]
p{
color:pink;
font-size:20px;
}

サンプルでは、CSSコード内のセレクタでpタグの範囲が指定されています。プロパティは文字の色と大きさが指定されており、それらをどう変化させるかを値で指定します。「pink」と「20px」が値です。文字の色をピンク色に、文字の大きさを20ピクセルにすることを示しています。

4.宣言ブロック

宣言ブロックとは、CSSコードの中で波括弧 { から } で囲まれた範囲のことを指します。プロパティと値のペアは宣言と呼ばれ、波括弧で囲うことがルールです。

プロパティと値は常にセットであり、コロン : でつなぎます。プロパティと値の組み合わせは無数にありますが、中にはCSSエンジンから妥当ではないと判断されるものもあります。その場合は宣言しても無視されてしまうので注意しましょう。

ひとつのセレクタに対して複数のスタイルを指定するときは、宣言をセミコロン ; で区切って記述します。最後のセミコロンは省略できますが、つけておいても問題はありません。

5.単位

CSSでは、フォントサイズや幅・高さの値を指定するためにさまざまな単位が使われます。たくさんあるのでどのように使えばいいか混乱するかもしれません。その違いを解説していきます。

単位の種類は大きく分けると「相対単位」と「絶対単位」があります。相対単位はブラウザの幅や高さ、ディスプレイの解像度などを基準に、環境に応じて相対的なサイズ指定ができます。たとえばスマホやPCそれぞれに連動して最適なデザイン環境を提供できるので、よく使用されています。

絶対単位は1cmと指定すればどの環境でも1cm、というように単位自体が基準になります。環境に応じて柔軟に変化できないので、あまり使い勝手は良くないかもしれません。具体的なものを表にまとめます。

%	相対単位。親要素を基準とした割合の単位。
px	相対単位。ディスプレイの解像度によって表示が変わる単位。
em	相対単位。親要素のフォントサイズを基準とした単位。
rem	相対単位。ルート要素のフォントサイズを基準とした単位。
cm	絶対単位。一般的な定規などで使われる単位。環境に応じて変化しない。

6.色指定

文字色や背景色などの色指定をする方法は、「カラーコード指定」「RGB指定」「RGBA指定」の3つです。それぞれの書き方を説明します。

カラーコード指定

「#（シャープ）＋6桁の16進数（00〜FF）」で色を指定します。前から2桁ごとに赤・緑・青の濃淡が決まります。たとえば、赤は「#FF0000」青は「#0000FF」となります。

RGB指定

10進数（0〜255）で赤・青・緑の数値を指定します。赤を指定する場合は「rgb(255, 0, 0)」と書きます。赤・緑・青の順で、0が薄く、255が濃い値を示します。

RGBA指定

RGB指定に透明度を加えた指定方法です。0.0〜1.0で指定し、0.0が透明、1.0が不透明です。rgbのあとに指定します。「rgb(255, 0, 0, 0.5)」であれば、透明度は0.5となります。

それぞれ数字の組み合わせで複雑な色も表現できます。以下のようなサイトで実際の色味も確認できますので、参考にしてください。

Web Safe Color一覧表

7.コメントの記述

「/* 〜 */」で囲った部分は、ブラウザに表示されないコメント記述部分となります。自分用のメモ書きとして使用するだけでなく、他の人がCSSを更新するときにも役立ちます。

/*メイン画像の調整*/
.main img {
width: 100%;
height: 80%;
}

/*
複数行にまたがっても
コメントできます。
*/

ソースコードが長くなる場合は、コードのまとまり上部にコメントで概要を書いておくと便利です。別の人が編集する場合にも、どの部分に対しての指定なのかわかりやすいでしょう。また、「/* 〜 */」内であれば複数行にまたがってもコメントできます。

CSSの記載場所

CSSをHTMLに適用するには大きく分けて3つの方法があり、それぞれ記載する場所が違います。適切な方法を使い分けられるようにしましょう。それぞれの方法やメリット・デメリットを詳しく解説していきます。

形式	メリット	デメリット
ヘッダー埋め込み形式	HTMLとCSSを分けて記述できる	スタイルが適用されるのはそのページだけなので、各ページを更新するには効率が悪い
インライン形式	どの要素にスタイルを指定しているかわかりやすい	同上
外部参照	同じCSSファイルを読み込めば各ページに同じスタイルを適用できるため、更新効率がよい	CSSファイルサイズが大きいとページの読み込み速度が遅くなる

1.ヘッダー埋め込み形式

ヘッダー埋め込み形式は、HTMLのheadタグ内にstyle要素を使い、一括してCSSを記述する方法です。

[sample.html]
<head>
<style>
  p {
    color: blue;
  }
</style>
・・・
</head>

pタグの範囲の文字の色を青に指定しています。この方法では、style要素を使ったページだけで有効になります。もし他のページも共通で更新したい場合、それぞれのページで更新しなければならないため効率が悪いです。そのため、特定のページでのみ適用したいスタイルがある場合に使用することをおすすめします。

2.インライン形式

インライン形式は、HTMLタグに直接CSSを書き込む形式のことです。

[sample.html]
<p>ここは、<span style=”color:blue;”>青字<span>です。</p>

「青字」の部分の文字の色を青に指定しています。適用したい部分に直接書き込んでいくためわかりやすいですね。しかしこの方法もヘッダー埋め込み方式と同様、全ページの共通の更新には適していません。特定のページでのみ使用するか、制作中にCSSでの効果を確認するためのテストとして使われることが多いです。

3.外部参照

外部参照は、外部ファイルとしてCSSファイルを別に作り、HTMLからlink要素でリンクを貼る方法のことです。

[sample.html]
<head>
<link rel=”stylesheet” href=”style.css”>
・・・
</head>

サンプルのように、head内にlink要素を使って読み込むCSSファイルを指定します。

複数のHTMLページで同じCSSファイルを読み込めば、同じスタイルが適用されます。CSSファイルを更新することですべてのページに適用されるため、更新効率がよいです。

一般的にこの方法が最も利用されます。しかしCSSファイルのサイズが大きくなりすぎてしまうと、ページの読み込み速度が遅くなりますので注意しましょう。

セレクタの基本的な書き方

セレクタは、CSSによってどの範囲のスタイルを変化させるのか指定するものと説明しました。スタイルを適用したい部分をセレクタで適切に指定することが重要です。セレクタの書き方には複数のパターンがあります。

ここでは、基本的な書き方をサンプルを交えながら解説します。

1.タグ名指定

1つ目は、HTMLのタグ名をセレクタに指定する方法です。CSSにp{…}、img{…}、div{…}のようにタグ名をそのまま記述し、スタイルを指定します。HTMLページ内で使われている指定したタグすべてにスタイルが適用されます。

[sample.html]
<div>青字で表示されません。</div>
<p>青字で表示されます。</p>
<p>青字で表示されます。</p>
<div>青字で表示されません。</div>

[sample.css]
/* pタグの要素に適用 */
p {
color: blue;
}

[ブラウザ表示結果]

青字で表示されません。
青字で表示されます。
青字で表示されます。
青字で表示されません。

セレクタでpタグを指定しているので、HTML内のpタグの範囲すべてに文字を青色にするスタイルが適用されます。

2.#id名指定

2つ目は、id名をセレクタに指定する方法です。HTML内で任意のidが付いている要素にスタイルが適用されます。CSSではid名の前に#（シャープ）を付け、#id名という形で記述します。

[sample.html]
<div id=”test”>
idに[test]が指定されているので背景色が緑色になります。
</div>
<div class=”test”>
[test]と付いているがclassなので背景色は変わりません。
</div>

[sample.css]
/* [test]というidがついている要素に適用 */
#test {
background-color: green;
}

[ブラウザ表示結果]

idに[test]が指定されているので背景色が緑色になります。
[test]と付いているがclassなので背景色は変わりません。

3.class名指定

3つ目は、class名をセレクタに指定する方法です。HTML内で任意のclassが付いている要素にスタイルが適用されます。CSSではclass名の前に.（ドット）を付け、.class名という形で記述します。

[sample.html]
<div class=”main”>
classに[main]が指定されているので太字になります。
</div>
<div class=”sub”>
classがあるが、[main]ではないので太字になりません。
</div>
<div>
classが付いていないので太字になりません。
</div>

[sample.css]
/* [main]というclassがついている要素に適用 */
.main {
font-weight: bold;
}

[ブラウザ表示結果]

classに[main]が指定されているので太字になります。
classが記述されいますが、[main]ではないので太字になりません。
classが付いていないので太字になりません。

classは同じclass名をそのページで何度も使えます。一方、idは同じid名をそのページで一度しか使えません。idは大まかなレイアウトを決める時に使用しましょう。idを振り分けておくと要素が特定しやすくなります。また、idはclassよりもCSSが適用される優先順位が高いことも覚えておきましょう。

4.子孫指定（絞り込み指定）

4つ目は、CSSを適用する範囲を絞り込んで指定する方法です。半角スペースでセレクタを区切ると、ある要素の配下にある要素にスタイルを適用します。

[sample.html]
<div class=”item”>
<p>背景が黄色になります。</p>
</div>
<div class=”test”>
<p>背景は変わりません。</p>
</div>

[sample.css]
/* [item]というclassの子要素であるp要素に適用 */
.item {
background-color: yellow;
}

[ブラウザ表示結果]

背景が黄色になります。
背景は変わりません。

セレクタはいくつでも指定できます。タグ名、id名、class名を混ぜて記述しても問題ありません。限定的にスタイルを適用することができます。

5.複数のセレクタを指定

5つ目は、複数のセレクタを指定する方法です。複数の要素にまとめて同じスタイルを適用したい場合は、セレクタを,（カンマ）で区切って指定します。

[sample.html]
<div>[blue]というclassが付いていないので青字になりません。</div>
<div class=”blue”>[blue]というclassが付いたdivなので青字になります。</div>
<p>pなので青字になります。</p>
<span>spanなので青字になります。</span>

[sample.css]
/* [blue]というclassが付いたdiv タグ、すべてのpタグ、すべてのspanタグに適用 */
div.blue, p, span{
color: blue;
}

[ブラウザ表示結果]

[blue]というclassが付いていないので青字になりません。
[blue]というclassが付いたdivなので青字になります。
pなので青字になります。
spanなので青字になります。

CSSで指定するスタイルの内容が同じであれば、まとめて記述するとシンプルで見やすいソースになります。また、作業スピードも上げられるでしょう。

プロパティの基本的な書き方

プロパティとは、セレクタで指定した範囲に適用するスタイルの種類のことと説明しました。

文字に関するもの、背景に関するもの、余白に関するものなどプロパティは数多くあります。自分のイメージするデザインを実現するために、適切なプロパティを選択しましょう。

プロパティでどのようなものが指定できるかを知っていれば、スムーズに装飾や修正ができるようになります。ここでは、よく使われるプロパティの概要をまとめます。

カテゴリ	プロパティ	内容
文字・フォント	color	文字の色を指定する
	font	フォントに関する指定をまとめて行う
	font-family	フォントの種類を指定する
	font-size	文字の大きさを指定する
	font-style	文字を斜体で表示する
	font-weight	文字の太さを指定する
テキスト	text-align	横位置の揃え方を指定する
	text-decoration	文字列に装飾線や点滅を指定する
	text-indent	文章のインデント幅を指定する
	letter-spacing	文字の間隔を指定する
	line-height	行の高さを指定する
横幅・高さ	height	要素の高さを指定する
	width	ボックス領域の幅を指定する
	max-height	要素の高さの最大値を指定する
	max-width	要素の幅の最大値を指定する
	min-height	要素の高さの最小値を指定する
	min-width	要素の幅の最小値を指定する
余白	margin	要素の外側の余白を指定する
余白	padding	要素の内側の余白を指定する
表示・配置	display	要素の表示形式を指定する
	position	要素の配置方法について相対的か絶対的にするかを指定する
	z-index	要素の重なり順序を指定する
背景	background	背景に関する指定をまとめて行う
	background-color	背景色を指定する
	background-image	背景画像を指定する
外枠	border	要素の周囲に枠線を付ける
リスト	list-style	リストマーカーに関する指定をまとめて行う
影	box-shadow	ボックスに影をつける
影	text-shadow	文字に影を付ける

CSSが適用される順番

CSSでは同じ要素に複数のスタイルが、指定されていることがあります。そのようなときは優先順位を考慮しなくてはなりません。Webブラウザでどのスタイルを適用するのか、明確な優先順位のルールが決められているのです。

ここでは、CSSの適用される順番について解説します。

1.読込み順

CSSスタイルが複数指定されている場合、基本的には後から読み込まれたスタイルが優先されます。

[sample.html]
<div>
<p>こんにちは</p>
</div>

[sample.css]
p {
color: blue;
color: red;
}

[ブラウザ表示結果]

こんにちは

この場合、文字の色を赤色、青色と順番に指定していますが、適用されるのは後から指定した青色です。指定したスタイルがうまく適用されない場合は、同じ要素に複数の指定がされていないか確認してみてください。

また外部参照で複数のCSSファイルを読み込んだ場合も、後から書かれたCSSファイルの記述が優先してWebページに反映されます。

2.記載場所

CSSを記載する場所は3つあると先に説明しました。ヘッダー埋め込み形式、インライン形式、外部参照です。このCSSの記載場所によってもスタイルが適用される優先順位が変わります。

最も優先される形式は、HTMLタグに直接CSSを記載するインライン形式です。残りのヘッダー埋め込み形式と外部参照は同等の扱いであり、両方使用された場合は後から読み込まれたほうが優先されます。

インライン形式が最も優先されるというルールは覚えておきましょう。

3.詳細度

詳細度とは、CSSで設定されたセレクタの種類や数を総合的に計算したものです。CSSの優先順位を考えるうえで、詳細度についても把握しておかなければなりません。これにより優先度を定量的に判断できるのです。

詳細度は以下のように表されます。数値が大きいほど優先順位が高くなります。

種類	詳細度
!importantが付いたセレクタ	1.0.0.0.0
style属性内のCSS	0.1.0.0.0
idセレクタ	0.0.1.0.0
classセレクタ	0.0.0.1.0
要素セレクタ	0.0.0.0.1
全称セレクタ	0.0.0.0.0