CSSとは？基本的な書き方を詳しく解説【初心者向け】

CSSとは？基本的な書き方を詳しく解説【初心者向け】

公開日：2020年3月23日最終更新日:2023年7月21日

　多くの環境でHTMLメールを正しく表示するためには、CSSの使い方がポイントになることは、「HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】」で解説をしました。

HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】
　メルマガは、顧客の受信箱に直接訴求できるため、2024年でもマーケティング施策の中で、最も高いROI（投資対効果）を誇ります。もちろんこれは正しく表示されるHTMLメール作成を行なってこそ得られる効果です。本記事ではきちんと顧客に届けるためのHTMLメール作成の基本を解説します。今すぐ簡単にHTMLメール作成する方法をお探しの場合、WiLL MailのHTMLメールエディタをお試しください。WiLL Mailの14日間無料トライアルを申込むHTMLメールとは　HTMLメールとは、「HTMLで構成された電子メール」です。ウェブサイトのように本文に...
willcloud.jp

　本記事では、CSSでできることから、書式・記述方法、プロパティ・セレクタの使い方などを一から丁寧に解説しています。CSSの基本をマスターしておけば、WebサイトやHTMLメールの簡単なデザイン変更は、自分自身で行うことができるようになります。

　また、実制作を行わない方でも、デザイナーやプログラマーに的確な制作依頼をするためにはCSSの基本は抑えておくべきです。CSS初心者の方でも理解しやすい内容にまとめましたので、ぜひ最後までご覧になってみてください。

ノーコードでHTMLメールをかんたん作成！
HTMLやCSSの知識は不要です！

WiLL Mailの14日間無料トライアルを申込む

CSSでできること

　CSSとは、HTMLで記述された文章をWebブラウザやメールクライアントにどのように表示するかを定義するための言語です。例えばCSSでは、以下のようなことを定義することができます

文字の色、サイズ、行間、行揃えなどの指定
背景色、背景画像、ボーダー、角丸などの指定
レイアウト、余白の調整

　CSSは、主に見た目の装飾に関することを定義し、HTMLはページの文章構造を定義します。そのためCSSとHTMLは常にセットで使用されます。CSSを記述するためには、まず構造化されたHTMLソース（h1 > h2 > h3などの構造）を作成し、そのHTMLに対してCSSのスタイルを実装していきます。

CSS実装前のHTMLプレビュー

　上記は、まだCSSを実装していないHTMLをプレビューしたものです。まだ文章構造のみでWEBページとして見られるデザインの体を成していません。

CSS実装後のHTMLプレビュー

　上記が、同じHTMLに対してCSSを実装したプレビューです。レイアウトや見た目の装飾が整い、見やすいデザインになっています。CSSが見た目を制御していることがよくお分かり頂けると思います。

CSSの基本書式

　この基本書式を使って、HTMLの中の、「どの部分の（セレクタ）」、「何を（プロパティ）」、「どのように変更する（値）」かを指定していきます。

セレクタ

　セレクタとは、セレクト（選択する）という名前の通り、どの部分にCSSを適用させるかを選択する役割を果たします。例えば、「h1、h2、p、img」などの要素や、「id=”属性名” class=”属性名”」などのidやclassに指定した属性名のことを指します。セレクタの指定方法は、後半で詳しく解説します。

プロパティ

　プロパティとは、適用するCSSのスタイルの種類のことです。例えば、文字サイズを変更したい場合の「font-size」や、背景色を変更したい場合の「background-color」などのことを指します。

　CSSには、様々なプロパティが用意されており、実現したいデザインに応じてプロパティを使い分けます。初心者がまず覚えておきたい基本的なCSSプロパティを記事の後半で紹介しています。

値

　値とは、セレクタに適用するプロパティを「どのように変更するのか」の具体的な数値のことです。例えば、プロパティに文字サイズを変更する「font-size」が指定されている場合の「24px」「1.5em」「100%」などを指します。指定する値は、プロパティによって異なります。

具体的な記述手順

h1 {
	font-size: 24px;
}

　上記は、「h1（見出し）」の、「font-size（フォントサイズ）」を、「24px」に指定するためのCSSの記述になります。

　記述の手順は、まずh1のセレクタを先頭に記述し、プロパティと値は、{ }（波括弧）で囲います。プロパティと値は、:（コロン）でつなぎます。

　複数のプロパティを同時に指定することもできます。以下のように、;（セミコロン）で区切って記述します。最後の行のセミコロンは省略することもできます。

h1 {
	font-size: 24px;
	font-weight: bold;
	color: #ff7800
}

よく使う単位

　CSSでは、フォントサイズや、幅や高さの値を指定するために様々な単位を使用します。

　CSSでよく使う単位は、「px」「%」「em」「rem」の4つがほとんどです。まずはこの4つの単位を覚えておきましょう。

単位	解説
px（ピクセル）	モニタの1ピクセルを1pxとする絶対値の単位。
%（パーセント）	ブラウザのデフォルトフォントサイズを100%、またパーセントによる幅や高さの割合指定。
em（エム）	適用する要素の大文字のMのフォントサイズを1とする相対値の単位。
rem（ルートエム）	ルート要素（html）の大文字のMのフォントサイズを1とする相対値の単位。

色指定の方法

　CSSでよく使われる色指定の方法は、「カラーコード指定」「RGB指定」「RGBA指定」の3つです。主に、文字色、背景色、ボーダー色などのカラープロパティに対して指定します。

カラーコード指定

　#から始まる16進数（00〜FF）のRGB値（赤・緑・青の値）による色の指定方法。

※小文字でも大文字でも可。
※RGBそれぞれの値がゾロ目の場合は、3桁に省略可能。
（例：#FFFFFF→#FFF、#FF0088→#F08）

RGB指定

　10進数（0〜255）のRGB値（赤・緑・青の値）による色の指定方法。

※0が最も薄く、255が最も濃い値を示します。

RGBA指定

　上記のRGB値（赤・緑・青の値）に、不透明度（A：0.0〜1.0）を加えた色の指定方法。

※0.0が透明、1.0が不透明。0.1〜0.9の小数点の値を使って、不透明度の割合を指定します。

RGB値の確認方法
　具体的なカラーコードや、RGB値の確認方法は、Photoshopなどの画像編集ソフトを利用すると調べられます。ソフトが無い場合は、Google検索で「カラーピッカー」と検索すると、Googleの提供するカラーピッカーで簡単に調べられます。

CSSのコメントアウトの記述方法

　/* 〜 */で囲った部分は、ブラウザの表示には影響しないコメント記述部分になります。コメントアウトは、主に、一時的に指定したスタイルを無効化する場合（後から元に戻す可能性があるもの）や、何のスタイルを指定したかをコメントで残しておきたい場合、複数人で制作している場合の情報共有メモなどに利用されます。

　また、コメントアウト（/* 〜 */）は複数行にまたがっても機能します。

コメントの記述例

/* 大見出しの設定 */
h1 {
	/* font-size:2.0rem; */
	font-size:2.4rem; /* 24px */
	font-weight: bold; /* 太字 */
	color: #ff7800; /* オレンジ色 */
	/* 注意事項：スタイルを変更したら必ず実機確認！ */
}
/*
複数行にまたがっても
コメントアウトは機能します
*/

CSSの記述場所

　CSSの記述場所には、以下の3つのパターンがあります。

インライン形式

　HTMLのタグの中に、直接CSSのスタイルを記述していく方法です。

<h1 style="font-size:24px;">大見出し</h1>

　要素タグの中に、CSSスタイルを記述するための「style=””」を追加して、セレクタ・プロパティ・値を指定します。

　適用したい要素に直接スタイルを記述していくので、直感的で分かりやすい方法ですが、もしも全ページ共通のスタイルを追加・修正したい場合には、全てのタグのスタイルを更新しなければならないというデメリットがあります。

　Web制作では、制作途中の一時的なテストとして利用されることはあります。HTMLメールの作成においては、インライン形式で記述する方法が推奨されています。

ノーコードでHTMLメールをかんたん作成！
HTMLやCSSの知識は不要です！

WiLL Mailの14日間無料トライアルを申込む

ヘッダー埋め込み形式

　head要素内に、style要素を使って一括してCSSを記述する方法です。

<head>
<style>
h1 {
	font-size:24px;
	font-weight: bold;
	color: #ff7800;
}
</style>
</head>

　HTMLとCSSを分けて記述することができますが、適用されるスタイルはそのページのみとなるため、もしも全ページ共通のスタイルを追加・修正したい場合には、全てのページやテンプレートを更新しなければなりません。

　インライン形式と同様に、CSSの更新効率が悪いため、特定のページにだけ適用したいスタイルがある場合などの使用に留めておくと良いでしょう。

　HTMLメールの作成においては、インライン形式と同様に、ヘッダー埋め込み形式でCSSを記述する方法が推奨されています。HTMLメールのCSSの記述については、以下の記事を参考にしてください。

HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】
　メルマガは、顧客の受信箱に直接訴求できるため、2024年でもマーケティング施策の中で、最も高いROI（投資対効果）を誇ります。もちろんこれは正しく表示されるHTMLメール作成を行なってこそ得られる効果です。本記事ではきちんと顧客に届けるためのHTMLメール作成の基本を解説します。今すぐ簡単にHTMLメール作成する方法をお探しの場合、WiLL MailのHTMLメールエディタをお試しください。WiLL Mailの14日間無料トライアルを申込むHTMLメールとは　HTMLメールとは、「HTMLで構成された電子メール」です。ウェブサイトのように本文に...
willcloud.jp

外部参照

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

<head>
<link rel="stylesheet" href="style.css" >
</head>

　スタイルの追加・修正は、CSSファイルを更新するだけで、リンクしている全てのページに反映されるため、更新効率が良くなります。Webサイト制作では、最も使用頻度の高い記述方法です。

　ただし、外部参照によるCSSの読込は、ブラウザのレンダリングブロックの原因となります。大きなCSSファイルを読み込む場合は、ページの表示速度が遅くなる可能性があります。必要に応じて、ファーストビュー部分のスタイルを、埋め込み形式にするなどの工夫をすると良いでしょう。

外部参照CSSファイルの文字コード設定
style.cssなどの外部CSSファイルを作る際には、必ず先頭に、utf-8などの文字コードを記述しましょう。文字コードを指定しないと、ファイルの中に日本語を記述した場合に文字化けを起こす場合があります。

[記述例]
@charset “utf-8”;
html {
　font-family:”ヒラギノ角ゴ Pro W3″,”ＭＳＰゴシック”,sans-serif;
}

基本的なCSSプロパティ

　ここからは、文字の装飾や背景色の指定など、まずはじめに覚えておきたい利用頻度の高い基本的なCSSプロパティをご紹介していきます。

color

　文字色を指定するためのプロパティです。カラーコード、またはRGB値で色を指定します。

h1 {
	color: #ff0000;
	rgb(255,0,0);
}

font-size

　文字サイズを指定するためのプロパティです。

　px、em、rem、%などで文字のサイズを指定します。

h1 {
	font-size: 24px;
	font-size: 1.5em;
	font-size: 1.5rem;
	font-size: 150%;
}

font-weight

　文字の太さを指定するためのプロパティです。

　100〜900の値で文字の太さを指定します。400が標準の太さです。

　その他、normal（標準）、bold（太字）、lighter（今より１段細く）、bolder（今より１段太く）という値でも太さを指定することができます。

h1 {
	font-weight: 800;
	font-weight: bold;
	font-weight: bolder;
}

font-family

　文字に適用するフォント（書体）を指定するためのプロパティです。

　フォントは、複数のフォント名をカンマ（,）で区切って指定します。

h1 {
	font-family:Helvetica,Arial,"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

　font-familyの指定方法については、以下の記事で詳しく解説しています。

【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
　この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。　「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート...
willcloud.jp

text-align

　文字の行揃え、均等割付を指定するためのプロパティです。

　left（左揃え）、center（中央揃え）、right（右揃え）、justify（均等割付）で行揃えの形式を指定します。

h1 {
	text-align: left;
	text-align: center;
	text-align: right;
	text-align: justify;
}

text-decoration

　文字の装飾方法を指定するためのプロパティです。

　none（装飾無し）、underline（下線）、overline（上線）、line-through（取り消し線）、blink（点滅）の値を指定できます。

　値を半角スペース区切りで複数指定することもできます。

h1 {
	text-decoration: none;
	text-decoration: underline;
	text-decoration: overline;
	text-decoration: line-through blink;
}

line-height

　文字の行の高さ（行間の設定）を指定するためのプロパティです。

　px、em、rem、%などの単位で行の高さを指定します。単位無しで指定する方法もあります。

　line-heightを指定しない場合は、ブラウザのデフォルト値で自動調整されます。

h1 {
	line-height: 36px;
	line-height: 1.5em;
	line-height: 3.6rem;
	line-height: 150%;
	line-height: 1.5;	
}

　例えば、フォントサイズが24pxで、line-heightを36pxに設定した場合、36pxから24pxを引いた、12px（上に6px、下に6px）の行間ができます。

※文字に関するCSSのスタイルは、子要素、孫要素に継承されるため、line-heightの値には単位無しで指定（例：line-height: 1.5）することが推奨されています。単位無しで指定すると子要素、孫要素のフォントサイズに合わせて、行間が上手く調整されます。

background-color

　背景色を指定するためのプロパティです。カラーコード、またはRGB値で色を指定します。

h1 {
	background-color: #000000;
	background-color: rgb(0,0,0)
}

background-image

　背景画像を指定するためのプロパティです。背景に使用する画像URLを指定します。

　必要に応じて背景画像の繰り返し設定のプロパティ「background-repeat」を合わせて指定します。指定しない場合、背景画像は縦横方向に繰り返されます。

h1 {
	background-image: url("https://sapana.co.jp/img/sample.png");
	background-image: url('/img/sample.png');
	background-repeat: no-repeat; /* 背景画像を繰り返さない */
	background-repeat: repeat-y; /* 背景画像を縦方向のみに繰り返す */
	background-repeat: repeat-x; /* 背景画像を横方向のみに繰り返す */
}

※画像のパスは、絶対パス、もしくはCSSを記述したファイルから見た相対パスで指定します。
※画像のパスは、ダブルクォーテーション（”）、またはシングルクオーテーション(‘)で囲います。省略も可能です。

border

　上下左右のボーダーラインの太さ、スタイル、色をまとめて指定するためのプロパティです。

h1 {
	border: 1px solid #333333;
}

　ボーダースタイルは、solid（実線）、dotted（点線）、dashed（破線）、double（二重線）などが指定できます。

　上下左右のボーダーを別々に指定する場合は、border-top（上ボーダー）、border-bottom（下ボーダー）、border-left（左ボーダー）、border-right（右ボーダー）プロパティを使用します。

margin

　上下左右のマージン（外側の余白）をまとめて指定するためのプロパティです。

　px、em、rem、%などの単位でマージンの値を指定します。値にautoを指定すると自動でマージンが計算されます。負の値を指定することもできます。

　上下左右のマージンを別々に指定する場合は、margin-top（上マージン）、margin-bottom（下マージン）、margin-left（左マージン）、margin-right（右マージン）プロパティを使用します。値をスペース区切りで記述するショートハンドで指定することもできます。

h1 {
	margin: 25px; /* 上下左右の一括指定 */
	margin: 25px 25px; /* 「上下」と「左右」の指定 */
	margin: 25px 25px 25px; /* 「上」「左右」「下」の指定 */
	margin: 25px 25px 25px 25px; /* 「上」「右」「下」「左」の指定 */	
}

padding

　上下左右のパディング（内側の余白）をまとめて指定するためのプロパティです。

　px、em、rem、%などの単位でパディングの値を指定します。paddingにはautoや負の値を指定することはできません。

　上下左右のパディングを別々に指定する場合は、padding-top（上パディング）、padding-bottom（下パディング）、padding-left（左パディング）、padding-right（右パディング）プロパティを使用します。値をスペース区切りで記述するショートハンドで指定することもできます。

h1 {
	padding: 10px; /* 上下左右の一括指定 */
	padding: 10px 10px; /* 「上下」と「左右」の指定 */
	padding: 10px 10px 10px; /* 「上」「左右」「下」の指定 */
	padding: 10px 10px 10px 10px; /* 「上」「右」「下」「左」の指定 */	
}

width

　ブロック要素（div、h1、ul、pなど）の横幅を指定するためのプロパティです。

　px、em、rem、%などの単位でwidthの値を指定します。

h1 {
	width: 100%;
}

　widthプロパティは、インライン要素（a、b、spanなど）には指定できません。例外としてimg、input、button要素など、widthを指定できるインライン要素も存在します。

height

　ブロック要素（div、h1、ul、pなど）の高さを指定するためのプロパティです。

　px、em、rem、%などの単位でheightの値を指定します。

h1 {
	height: 180px;
}

　heightプロパティは、インライン要素（a、b、spanなど）には指定できません。例外としてimg、input、button要素など、heightを指定できるインライン要素も存在します。

基本的なCSSセレクタ

　CSSセレクタとは、どの部分にCSSを適用するかを指定するパスのようなものです。CSSを使いこなすためには、意図した通りのセレクタ指定ができることがとても重要です。

　ここでは、まず初めに覚えておくべき基本的なセレクタ指定から、少し高度なセレクタ指定まで利用頻度の高いものをいくつかご紹介します。

タグ名のセレクタ指定

　html、body、h1、p、a、img、table、ul、li、など、HTMLのタグ名を直接セレクタに指定する方法です。CSSのセレクタには、タグ名をそのまま記述します。先頭にシャープ（#）やドット（.）は付けません。

[HTML]
<h1>大見出し</h1>


[CSS]
h1 {
	color: #000000;
}

　HTMLの構造に大幅な変更があった場合などに更新効率が悪いため、タグ名のセレクタ指定は極力使わないことが推奨されています。

#id名によるセレクタ指定

　HTMLソース内のid名をセレクタに指定する方法です。CSSのセレクタには、id名の先頭にはシャープ（#）を付けて記述します。

　以下の記述例は、HTML内のh1タグの「id=”heading”」に対して、CSSを指定しています。

[HTML]
<h1 id="heading">大見出し</h1>


[CSS]
#heading {
	font-size:24px;
}

.class名によるセレクタ指定

　HTMLソース内のclass名をセレクタに指定する方法です。CSSのセレクタには、class名の先頭にドット（.）を付けて記述します。

　以下の記述例は、HTML内のh1タグの「class=”heading”」に対して、CSSを指定しています。

[HTML]
<h1 class="heading">大見出し</h1>


[CSS]
.heading {
	font-size:24px;	
}

子孫セレクタ指定

　CSSを適用する対象を絞り込んで指定する方法です。セレクタを半角スペースで区切って、複数のセレクタを繋げて記述します。子孫セレクタを使うことで、より高度なセレクタ指定を行うことが可能です。

　以下の記述例は、HTML内のspanタグで囲まれた「太字」テキスト部分にだけCSSを指定しています。

[HTML]
<div id="main">
	<p class="lead">これは<span>太字</span>です。</p>
</div>


[CSS]
#main .lead span {
	font-weight: bold;
}

　セレクタは、いくつでも繋げて指定することができます。また、タグ名、id名、class名を混ぜて繋げても構いません。

※子孫セレクタは、必ず半角スペースで区切って指定してください。「#A.B」のようにスペース無しで繋げてしまうと、「AかつB」となり、異なるセレクタ指定に変わってしまいますので注意してください。

複数のセレクタに同じCSSを指定する方法

　複数のセレクタをカンマ（,）で区切って記述することにより、異なるセレクタにまとめて同じCSSスタイルを指定することができます。

　以下の記述例は、h1、h2、h3、pタグに共通するCSSスタイルはまとめて指定し、共通でないCSSスタイルは、別々に指定しています。

h1, h2, h3, p {
	color: #666;
	font-weight: normal;
	line-height: 1.5;
}
h1 {font-size: 24px;}
h2 {font-size: 20px;}
h3 {font-size: 18px;}
p {font-size: 14px;}

　上記のようにCSSスタイルの内容が重複している部分をまとめることで、すっきりしたシンプルなソースになります。

　複数セレクタの場合、カンマ区切りの後の半角スペースは、有っても無くてもどちらでも意味は同じです。子孫セレクタと複数セレクタの指定を混同しやすいので注意しましょう。

擬似クラスセレクタ

　擬似クラスセレクタとは、HTMLの文書構造では表すことのできない、特定の状態や条件を指定するためのセレクタです。

　わかりやすい例を挙げると、「対象のリンクにマウスポインターが重なった時」、「訪れたことのあるリンクだけ」、「ナビゲーションメニューの最後のメニューだけ」などの状態や条件を指定して、CSSスタイルを適用させることができます。

　記述方法は、スタイルを適用したい要素を通常のセレクタで指定し、その後ろに「:（コロン）」を付けて、擬似クラスセレクタを指定します。

[記述例]
.nav-list a:hover {
	color: #ff0000; 
}

　上記は、「.nav-list a」というセレクタの後ろに、マウスカーソルが重なった時という擬似クラス「:hover」を付けて、特定の状態を指定したセレクタになります。このように擬似クラスを使えば、HTMLには一切変更を加えずに、CSSだけで様々な条件を指定してスタイルの変更を行うことが可能になります。

　擬似クラスには、様々な種類がありますが、ここでは使用頻度が高い擬似クラスをいくつかご紹介します。

:link

　未訪問リンクのCSSスタイルを指定することができます。a要素の後に続けて記述します。

[記述例]
a:link {
	color: #0033ff; /* 未訪問のリンク色 */
	text-decoration: none;  /* アンダーライン無し */
}

:visited

　訪問済みリンクのCSSスタイルを指定することができます。a要素の後に続けて記述します。

[記述例]
a:visited {
	color: #9900ff; /* 訪問済みのリンク色 */
	text-decoration: none; /* アンダーライン無し */
}

:hover

　要素にマウスカーソルが重なった時のCSSスタイルを指定することができます。a要素以外にも指定可能。

[記述例]
a:hover {
	color: #ff0000; /* マウスホバー時のリンク色 */
	text-decoration: underline; /* アンダーライン有り */
}

:active

　要素をクリックして離すまでの間のCSSスタイルを指定することができます。a要素以外にも指定可能。

[記述例]
a:active {
	color: #00cc33; /* クリックした時のリンク色 */
	text-decoration: underline; /* アンダーライン有り */
}

:link、:visited、:hover、:activeの記述順に注意

　後ほど詳しく解説しますが、CSSのスタイルは、後に記述したスタイルが優先して適用されます。もし訪問済みリンク（:visited）を、マウスホバー（:hover）よりも後に記述してしまうと、訪問済みリンクにマウスカーソルを重ねても、リンク色が変わらなくなってしまいます。

　基本的には、「:link → :visited → :hover → :active」の順番でCSSを記述しておけば問題ないでしょう。

[記述例]
/* 以下の順番で記述すること */
a:link { color: #0033ff; }
a:visited { color: #9900ff; }
a:hover { color: #ff0000; }
a:active { color: #00cc33; }

:focus

　フォーカスされた要素のCSSスタイルを指定することができます。フォームの入力欄によく利用されます。

input:focus {
	background-color: #ffffcc; /* フォーム入力欄にフォーカスした時の背景色 */
}

:first-child

　ある要素の中で、1番最初に記述された要素にのみ、CSSスタイルを指定することができます。

[記述例]
<style>
p:first-child {
	color: #ff0000;
}
</style>
<body>
	<div class="container">
		<p>1番最初のp要素</p>
		<p>2番目のp要素</p>
		<p>3番目のp要素</p>
	</div>
</body>

　※上記の場合、1番最初に記述されたp要素にあたる「1番最初のp要素」テキストのみにCSSスタイルが適用されます。

:last-child

　ある要素の中で、最後に記述された要素にのみ、CSSスタイルを指定することができます。

[記述例]
<style>
p:last-child {
	color: #ff0000;
}
</style>
<body>
	<div class="container">
		<p>1番最初のp要素</p>
		<p>2番目のp要素</p>
		<p>3番目のp要素</p>
	</div>
</body>

　※上記の場合、1番最後に記述されたp要素にあたる「3番目のp要素」テキストのみにCSSスタイルが適用されます。

:nth-child(n)

　ある要素の中で、最初から数えて、n番目の要素などの条件を設定して、CSSスタイルを指定することができます。(n)の値には、数字、数式（2n+1 など）、偶数（even）、奇数（odd）などを設定することができます。

[記述例1]
<style>
p:nth-child(2) {
	color: #ff0000;
}
</style>
<body>
	<div class="container">
		<p>1番最初のp要素</p>
		<p>2番目のp要素</p>
		<p>3番目のp要素</p>
	</div>
</body>

　※上記の場合、2番目に記述されたp要素にあたる「2番目のp要素」テキストのみにCSSスタイルが適用されます。

[記述例2]
<style>
p:nth-child(odd) {
	color: #ff0000;
}
</style>
<body>
	<div class="container">
		<p>1番最初のp要素</p>
		<p>2番目のp要素</p>
		<p>3番目のp要素</p>
	</div>
</body>

　※上記の場合、奇数番目のp要素にあたる「1番最初のp要素」と「3番目のp要素」テキストにCSSスタイルが適用されます。

:nth-last-child(n)

　ある要素の中で、最後から数えて、n番目の要素などの条件を設定して、CSSスタイルを指定することができます。

[記述例]
<style>
p:nth-last-child(3)  {
	color: #ff0000;
}
</style>
<body>
	<div class="container">
		<p>1番最初のp要素</p>
		<p>2番目のp要素</p>
		<p>3番目のp要素</p>
	</div>
</body>

　※上記の場合、最後から数えて、3番目に記述されたp要素にあたる「1番目のp要素」テキストのみにCSSスタイルが適用されます。

擬似クラスが効かない？？チェックポイントと解決方法

　初心者がよく陥る問題として、擬似クラス「:first-child」「:last-child」「:nth-child(n)」「:nth-last-child(n) 」を指定しても、なぜがCSSが意図した通りに適用されない場合があります。

　例えば以下の例をご覧ください。「:first-child」を使って「1番最初のp要素」にCSSを適用しようと思ったところ、なぜかCSSが適用されません？？一体これはなぜでしょうか。

[記述例]
<style>
p:first-child {
	color: #ff0000;
}
</style>
<body>
	<div class="container">
		<h1>見出し</h1>
		<p>1番最初のp要素</p>
		<p>2番目のp要素</p>
		<p>3番目のp要素</p>
	</div>
</body>

　※上記の場合、CSSスタイルはどの要素にも適用されません。その原因と解決方法は以下の通りです。

　まず、先ほどまでの記述例と何が違うがお気付きになりましたか？そうです。p要素の上に、h1要素が追加されています。そして、CSSが適用されない原因は、p要素と同じ階層にある「一番最初の要素」がh1タグだからです。

　「:first-child」「:last-child」「:nth-child(n)」「:nth-last-child(n) 」擬似クラスは、同じ階層にある要素を、要素の種類に関係なく上から順番に数えるという特徴があるためです。

　この問題を解決してくれる擬似クラスが「:first-of-type」「:last-of-type」「:nth-of-type(n)」「:nth-last-of-type(n)」になります。これらの擬似クラスは、指定した要素のみを順番として数えるため、先ほどのような問題は起こりません。

　以下の記述例は、先ほどの記述例の「:first-child」を、「:first-of-type」に変更しただけです。

[記述例]
<style>
p:first-of-type {
	color: #ff0000;
}
</style>
<body>
	<div class="container">
		<h1>見出し</h1>
		<p>1番最初のp要素</p>
		<p>2番目のp要素</p>
		<p>3番目のp要素</p>
	</div>
</body>

　※上記の場合、1番最初に記述されたp要素にあたる「1番最初のp要素」テキストのみにCSSスタイルが適用されます。

ワンポイントアドバイス
　後から要素タグを追加する可能性がある場所などでは、「****-of-type」擬似クラスを使った方が問題が起こりにくくなります。必要に応じて使い分けるようにしましょう。

擬似要素セレクタ

　ある要素の特定部分を指定して、CSSスタイルを適用するセレクタです。例えば、「ある要素の直前にアイコンを表示する」や「ある要素の一文字目のスタイルを変更する」などの指定ができます。

　擬似要素セレクタの記述方法は、通常のセレクタの後に、コロン2つ（::）と擬似要素名を記述します。コロン1つ（:）でも機能しますが、擬似クラスと区別するために、コロンは2つ付けることが推奨されています。

　以下、記述例と擬似要素が追加されたイメージになります。

[HTML]
<h1>大見出しテキスト</h1>
<h2>中見出しテキスト</h2>


[CSS]
h1::before {
	content: "★"; 
	color: #ff0000;
	/* h1の前に赤色の★を追加する */
}

h2::after {
	content: "";
	display: inline-block;
	background-image: url(../img/arrow.png);
	background-size: contain;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

::before、::after擬似要素の指定方法

　擬似要素セレクタには、様々な種類がありますが、最も利用頻度が高いのが、「::before」（指定要素の直前に擬似要素を追加）と、「::after」（指定要素の直後に擬似要素を追加）だと思います。

　::before、::after擬似要素セレクタを指定する場合には、必ずCSSプロパティに「content」を指定する必要があります。上記の例ように「content」の値に指定したテキストや記号が擬似要素として追加されます。

　擬似要素に画像を追加したい場合は、「content」に画像パスを記述するか、「content」の値を空にして、「background-image」プロパティを指定します。

　※contentプロパティの値を囲むのは、シングルクォーテーション（’）でもダブルクォーテーション（”）のどちらでも問題ありません。

Web制作で使われる主な擬似要素セレクタ

擬似要素名	内容
::before	指定要素の直前に擬似要素を追加
::after	指定要素の直後に擬似要素を追加
::first-letter	指定要素の最初の文字にスタイルを適用
::first-line	指定要素の最初の行にスタイルを適用
::selection	指定要素のテキスト選択時のスタイルを指定

　その他にも、様々な擬似要素セレクタが存在します。

参考：MDN Web Docs 擬似要素

その他のセレクタ

　このページでは詳しい解説はしませんが、他にも様々なセレクタがあります。

隣接セレクタ
　セレクタを「+」で繋げて、ある要素の直下に隣接している要素にだけ、CSSスタイルを適用するセレクタです。

ユニバーサルセレクタ
　全称セレクタとも呼ばれ、すべての要素を対象にCSSを適用するセレクタです。セレクタにアスタリスク（*）をつけて指定します。

CSSが適用される優先順位

　CSSの特徴として、同じ要素に異なるCSSスタイルを何度でも上書きすることができます。同じ要素の同じプロパティに値が重複指定されることは珍しいことではありません。

　CSSには、Webブラウザがどのスタイルを適用するのか（上書きするのか）を判断するための明確な優先順位のつけ方が定められています。

CSSの読込み順

　CSSスタイルの重複があった場合、基本的には後から読み込まれたスタイルが優先的に適用されます。

　例えば、以下の記述例の場合は、3つのフォントサイズが重複指定されていますが、適用されるのは一番最後に読み込まれた「font-size:18px」になります。後ろに書かれたスタイルに上書きされると覚えておけば良いでしょう。

h1 {
	font-size:24px;		
	font-size:20px;		
	font-size:18px;		
}

　しかし、この上書きルールには例外があります。それは次に解説する「CSSの記述場所」と「詳細度」による優先順位です。CSSを後に書いてもスタイルが上書きされない場合、CSSの記述場所と詳細度が関係している可能性があります。

CSSの記述場所

　先に説明した通り、CSSを記述する場所は、インライン形式、ヘッダー埋め込み形式、外部参照の3つのパターンがあります。

　CSSスタイルの重複があった場合、このCSSの記述場所によっても、優先的に適用されるCSSが変わってきます。

　最も優先されるCSSは、インライン形式で記述したCSSスタイルです。ヘッダー埋め込み形式と外部参照については同等の優先順位で、後から読み込まれたスタイルが適用されます。

　以下の記述例では、h1タグの「大見出し」に対して、「インライン形式」「ヘッダー埋め込み形式」「外部参照1」「外部参照2」の異なる4つCSSを重複指定しました。h1タグには、どの順番でCSSスタイルが優先適用されるかを考えてみてください。

[HTML]
<head>
	<link rel="stylesheet" href="style1.css"><!-- 外部参照1 -->
	<!-- ヘッダー埋め込み形式 -->
	<style>
	h1 {
		font-size: 24px;
	}
	</style>
	<link rel="stylesheet" href="style2.css"><!-- 外部参照2 -->
</head>
<body>
	<h1 style="font-size:18px;">大見出し</h1><!-- インライン形式 -->



[CSS：外部参照1]
h1 {
	font-size: 22px;
}


[CSS：外部参照2]
h1 {
	font-size: 20px;
}

　上記の例の場合、適用されるCSSの優先順は「1番目：インライン形式」、「2番目：外部参照2」、「3番目：ヘッダー埋め込み形式」、「4番目：外部参照1」の順番で優先されますので、適用されるスタイルは「font-size:18px」になります。

※外部参照よりヘッダー埋め込み形式が後に書かれることが多いため、ヘッダー埋め込み形式が優先だと説明されている場合がありますが、あくまで2つの優先順位は同等で、後から読み込まれた方が適用されます。

CSSの詳細度

　CSSはセレクタの書き方によって、詳細度という概念で評価され、適用される優先順位を決定します。

　詳細度は、以下のようなバージョン番号のような形で表されます。

セレクタ	詳細度
id名セレクタ／1個	1.0.0
class名セレクタ／1個	0.1.0
タグ名セレクタ／1個	0.0.1

　覚え方としては、「最新のバージョン番号が付いたセレクタが優先適用される」と覚えておきましょう。

　初心者の方は、もっとざっくりと、「id名セレクタ　＞　class名セレクタ　＞　タグ名セレクタ」の順番で優先順位が高いと覚えておいても良いと思います。

　以下の記述例では、「大見出し」に対して、異なる7つのセレクタでCSSを重複指定しました。セレクタに指定された#id、.class、タグの数によってどのように詳細度が付くのかを見てみましょう。

[HTML]
<div id="main">
　<h1 id="heading" class="heading c1 c2 c3 c4 c5 c6 c7 c8 c9 c10">大見出し</h1>
</div>


[CSS]
#main #heading { /* 詳細度：2.0.0 */
		font-size:24px;		
}
#main .heading { /* 詳細度：1.1.0 */
		font-size:23px;		
}
#main h1 { /* 詳細度：1.0.1 */
		font-size:22px;		
}
#heading { /* 詳細度1.0.0 */
		font-size:21px;
}
.heading { /* 詳細度0.1.0 */
		font-size:20px;		
}
h1 { /* 詳細度：0.0.1 */
		font-size:19px;		
}
#heading.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10 { /* 詳細度：1.10.0 */
		font-size:18px;		
}

　詳細度で最も優先順位の高いセレクタは、IDセレクタを2つ繋げた「#main #heading」になります。よってフォントサイズは「24px」が適用されます。

※classセレクタが10個繋がっても、位が繰り上がるわけではないので注意してください。詳細度は、「0.10.0」になります。
※詳細度による優先順位が高ければ、CSSの読み込み順に関係なく、優先して適用されます。
※詳細度が同じだった場合は、後から書かれたスタイルが適用されます。

詳細度を計算してくれるサイト
　セレクタを入力すると自動で詳細度を計算してくれる便利なサイトもあります。

引用元：https://specificity.keegan.st

!important指定

　ここまで、CSSの読み込み順、記述場所、詳細度による優先順位について説明して来ましたが、これらすべての優先順位を覆して強制的にスタイルを適用させる「!important指定」という優先順位の変更方法があります。

　記述方法は、CSSの値の後ろに半角スペースを入れ、「!important」の記述を追加します。

h1 {
	font-size: 18px !important;
}

　「!important指定」を多用し過ぎると、優先順位のルールが崩れ、CSSの更新やメンテナンスが難しくなる場合がありますので注意しましょう。

　HTMLメールを作成する場合は、メーラー固有のCSSスタイルを打ち消す目的で、意図的に「!important指定」を多用する場合もあります。

まとめ

　いかがでしたか。今回はCSSの基本書式、基本的なCSSプロパティ、CSSセレクタの使い方を中心に解説しました。

　初心者の方にはちょっと難しい部分もあったと思いますが、CSSは基本がとても大切です。しっかり基本をマスターしておくか、なんとなく曖昧なままで制作を進めるかで、制作物の質や制作スピードに大きな差が出てきます。

　基本をマスターしたら、あとは使えるCSSプロパティの種類を少しずつ増やしていきましょう。CSSプロパティの種類は何百種類もありますが、すべて覚える必要はありません。やりたいことが出てきた段階で、一つずつ覚えて行けば問題ありません。

　HTMLメールを作成する場合については、使用が推奨されるCSSプロパティの種類が限られています。より多くのメールクライアントがサポートしているプロパティのみを使用するようにしましょう。

HTMLメールはどうやって作成するの？基本と特徴を徹底解説！【保存版】
　メルマガは、顧客の受信箱に直接訴求できるため、2024年でもマーケティング施策の中で、最も高いROI（投資対効果）を誇ります。もちろんこれは正しく表示されるHTMLメール作成を行なってこそ得られる効果です。本記事ではきちんと顧客に届けるためのHTMLメール作成の基本を解説します。今すぐ簡単にHTMLメール作成する方法をお探しの場合、WiLL MailのHTMLメールエディタをお試しください。WiLL Mailの14日間無料トライアルを申込むHTMLメールとは　HTMLメールとは、「HTMLで構成された電子メール」です。ウェブサイトのように本文に...
willcloud.jp

ノーコードでHTMLメールをかんたん作成！
HTMLやCSSの知識は不要です！

WiLL Mailの14日間無料トライアルを申込む

Category：

実践ノウハウ集

著者

WiLL Cloud マーケティングチームウェブマーケティングに関する情報をお届けするブログです。皆様に役に立つ情報、アップデート、イベントなど、様々なことを発信します。

メルマガ登録 »

CSSとは？基本的な書き方を詳しく解説【初心者向け】

CSSでできること

CSSの基本書式

セレクタ

プロパティ

値

具体的な記述手順

よく使う単位

色指定の方法

カラーコード指定

RGB指定

RGBA指定

CSSのコメントアウトの記述方法

コメントの記述例

CSSの記述場所

インライン形式

ヘッダー埋め込み形式

外部参照

基本的なCSSプロパティ

color

font-size

font-weight

font-family

text-align

text-decoration

line-height

background-color

background-image

border

margin

padding

width

height

基本的なCSSセレクタ

タグ名のセレクタ指定

#id名によるセレクタ指定

.class名によるセレクタ指定

子孫セレクタ指定

複数のセレクタに同じCSSを指定する方法

擬似クラスセレクタ

:link

:visited

:hover

:active

:focus

:first-child

:last-child

:nth-child(n)

:nth-last-child(n)

擬似要素セレクタ

Web制作で使われる主な擬似要素セレクタ

その他のセレクタ

CSSが適用される優先順位

CSSの読込み順

CSSの記述場所

CSSの詳細度

!important指定

まとめ

この記事を読んだ人は、こちらの記事も読んでいます

エラーメールについて – 適切な処理をしてエラーアドレスを除外しよう

よくあるHTMLメールの落とし穴

2013年のスマホ普及率

ファーストタッチとリピートクリック

データベースを用途別に複数作ろう

メルマガに効果的なテンプレートとは？作成のコツ、必要な要素を詳しく解説