HTMLにCSSを指定する方法を徹底解説。基礎を固めて確実に反映させる

2021.11.10

CSSはコーディングに不可欠なものですが、それだけでは機能しません。

内容はHTMLが担い、CSSはHTMLの見た目を整えるという役割を持っています。

そのため単独は意味をなさず、HTMLと関連づけなければなりません。

この記事ではHTMLにCSSを指定する方法について解説します。

CSSを指定しても反映されない原因も記事の後半で紹介しているので最後までご覧ください。

CSSを記述する場所

まずは、CSSをどこに書くかについて解説します。

外部ファイル

HTMLとは別にCSSファイルを用意し、そこにスタイルを記述していくという方式です。

もっとも一般的で、特別な理由がない限りは基本的にこの方式が採用されています。

headタグの中に、以下のような記述を行ってください。

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

linkタグを使用し、href属性でCSSファイルを読み込ませます。

HTMLとCSSの階層の関係に合わせてパスを指定してください。

上記のコードではHTMLとCSSが同じ階層にあるため、相対パスで「style.css」とだけ記述しています。

relは、HTMLとリンク先との関係性を示すための記述です。HTMLにリンク先のファイルがCSSであると知らせるためのもので、これがないとCSSとして機能しないので必ず記述してください。

CSSファイルの1行目には、以下のように文字コードを指定します。

CSS
@charset "UTF-8";

原則として、HTMLと同じ文字コードを指定してください。

1行目以外だと、正しく機能しない場合があります。

外部ファイルが使われる理由

この方式には、HTMLとCSSを別々に管理できるというメリットがあります。

複数のHTMLで共通のCSSを使うことが多いので、CSSだけで独立して存在していた方が便利です。

CSSは1つのHTMLに複数読み込ませることができるので、役割ごとに分けたファイル管理も可能です。

例えば、全ページ共通のCSSとページごとの固有のCSSを分けておけば、どこになにが書いてあるか分かりやすくなるでしょう。

固有のCSSは他のページには読み込ませる必要がないので、無駄も省けます。

ただし、読み込むファイルが多くなりすぎると、表示速度に影響を与えてしまうので分け過ぎには気を付けてください。

styleタグ

以下のようなコードを、HTMLの中に記述します。

HTML
<style>
body {
font-size:14px;
}
</style>

<style>の中はHTMLではなく、CSSの記述が有効になります。

表示速度を速くしたい箇所だけ、この方法で書き、残りは外部CSSで書くというテクニックがあります。

ほとんどの場合、劇的に速度が変わるということはないので、基本的にはすべてのCSSを外部ファイルに記述する方がよいでしょう。

WordPressのCMSでは、この方式で出力されることがあります。

styleタグはもともとheadタグの中でしか使えませんでしたが、HTML5.2以降ではbodyタグの中でも有効になっています。

要素に直接指定

CSSを指定したい要素のHTMLに、スタイルを直接指定するという方式です。

HTML
<p style="font-size:14px; color:#000;">テキスト</p>

style属性を使用し、スタイルを記述します。すべての要素に指定可能です。「;」で区切って、複数のスタイルが指定できます。

ひとつひとつの要素にスタイルを指定していると作業が煩雑になり、管理も難しくなるので基本的には使われていません。

しかし、JavascriptでCSSを操作する場合は、この方式が使われます。JavascriptはCSSを直接操作することはできないからです。

記述場所の優先順位

異なる場所に別々のCSSを記述していると、同じ要素に違うスタイルが指定されてバッティングを起こすということがあります。

その場合の優先順位は以下の通りです。

  • 1.要素に直接指定
  • 2.styleタグ
  • 3.外部ファイル

要素に直接指定されたスタイルが最優先されます。

そのため、Javascriptで動的に指定されたスタイルが、他のスタイルとバッティングして打ち消されるということはありません。

一般的に使われる外部ファイルがもっとも低い優先順位となっていますが、基本的にすべてのスタイルがこの方式で記述されるため、不便を起こすことはありません。

セレクタ

HTMLのどの要素にスタイルを適応させるかを指定する「セレクタ」について解説します。

CSS
p {
font-size:14px;
}

上記のコードの場合、セレクタは「p」です。「font-size」はプロパティで、「14px」は値と呼ばれています。

セレクタとプロパティ、値は「どこに(p)」、「何を(font-size)」、「どのように(4px)」指定するかという関係性です。

セレクタの種類

実際に使用可能なセレクタの種類を紹介します。

要素名

上記のコードのようにタグの名前を指定します。p、div、h1~h6などbodyタグの中にあるあらゆる要素にスタイルを指定できます。

この方式の特徴は、ページ内にある指定したすべての要素にスタイルが適用されるという点です。

上記のコードであれば、ページ内のすべてのpが14ピクセルになります。スタイルを一括で指定したいときに便利です。

ID名

特定のIDを持った要素に指定する方法です。

CSSでIDを指定するには、ID名の前に「#」を記述します。

HTML
<p id=”sample”>テキスト</p>
CSS
#sample {
font-size:14px;
}

このように記述すると、HTML内のID「sample」が指定された要素だけにスタイルが適用されます。

なお、IDは1つのページにつき一度のみの記述が推奨されています。異なるID名であれば、何度でも使用可能です。

クラス名

ID名と似た指定方法で、クラス名のまえに「.」を記述します。

HTML
<p class=”sample”>テキスト</p>
CSS
.sample {
font-size:14px;
}

IDと違い、クラスは1つのページに何度も同じものを使用できます。

全称セレクタ(アスタリスク)

ページ内のすべての要素という意味のセレクタです。

CSS
* {
font-size:14px;
}

このように記述すると、ページ内のすべてのテキストが14ピクセルになります。

テキストのサイズの他、テキストの色、行間、フォントの種類など、最初に一括で指定しておきたいスタイルを記述するときに便利なセレクタです。

子孫セレクタ

要素の中の要素というような、HTMLの構造による詳細な指定も可能です。

HTML
<div>
<p>テキスト1</p>
</div>
<p>テキスト2</p>
CSS
div p{
font-size:14px;
}

これはdiv要素の中のp要素という意味です。div要素の中に入っていないp要素には、このスタイルは適用されません。

上記のHTMLであれば、テキスト1にのみスタイルが適用されます。

CSSを指定する範囲を限定させたいときに便利な記述法です。

子セレクタ

子孫セレクタよりも階層の指定が厳格な記述法です。

HTML
<div class=”sample”>
<p>テキスト1</p>
<div>
<p>テキスト2</p>
</div>
</div>
CSS
.sample > p{
font-size:14px;
}

セレクタとセレクタの間に「>」を記述します。これで要素の直下の要素という意味になります。

テキスト1は「sample」の直下のp要素なので、スタイルが適用されます。

しかし、テキスト2は「sample」とp要素の間にdiv要素があり、直下ではありません。このため、スタイルは適用されません。

特定の要素にピンポイントでスタイルを指定したいときに便利です。同じクラス名を指定していても、特定の要素の直下にあるものとないものとでスタイルを分けられます。

疑似要素

要素の一部分に、スタイルを指定できるセレクタです。

HTML
<p>テキスト</p>
CSS
p:first-letter{
font-size:14px;
}

「first-letter」は最初の文字という意味で、p要素の1文字目「テ」だけにスタイルを適用できます。

他に直前の「before」、直後の「after」などがあります。

疑似クラス

特定の状態にある要素に、スタイルを指定できます。

CSS
a:hover {
text-decoration:underline;
}

もっともよく利用されるのがaタグで「hover」はオンマウス状態という意味です。

他にもいくつも並んだ要素の最初や最後、偶数番目、奇数番目なども指定が可能です。

複数のセレクタを同時に指定

2つ以上のセレクタに、同じスタイルを一括で指定することができます。

CSS
p , h1 {
font-size:14px;
}

このように「,」で要素を区切ることで、それぞれの要素にスタイルが適用されます。同時に指定できる要素の数に制限はありません。共通するスタイルは、このようにひとつにまとめて指定するとCSSが分かりやすくなるでしょう。

CSSが効かない原因

コーディングを進めていると、指定した筈なのにスタイルが効かないという状況に多々出くわします。

しかし、多くはすぐに解決できるCSSの指定ミスなので、焦ることはありません。

典型的な指定ミスのパターンを紹介します。

CSSファイルのパスが間違っている

外部ファイルのCSSを読み込む際に起こるミスです。

HTMLとCSSの階層の関係性をしっかりと確認してください。

読み込みの記述を違う階層のHTMLにコピーアンドペーストするときなどに、特に注意が必要です。

キャッシュ

これは指定ミスではありませんが、CSSが効かないというとき、まず疑ってみるべき原因です。

CSSのキャッシュファイルが残っていて、最新のファイルが読み込めていないのです。

CSSの修正が反映されないというときは、まずキャッシュをクリアして再度確認してみてください。

それでも直らないというときは、以下で紹介するCSSの指定ミスが原因かもしれません。

スペルミス

セレクタ名が間違っているというパターンです。1文字でも違うと機能しません。

任意の文字列を指定する、クラス名やID名は特に注意が必要です。

要素名はpやdivといった短いものであれば心配ありませんが、sectionやarticleなどを使うときは気をつけてください。

プロパティや値も英単語が多いので間違うことがあります。

プロパティと値のミスマッチ

指定したプロパティに、対応していない値を記述してしまうというパターンです。

例えば、縦方向の配置を指定する「vertical-align」で中央配置は「middle」ですが、これを横方向の配置を指定する「text-align」で使う「center」と間違ってしまうということがあります。

プロパティと値は種類が多いので、すべてを覚えることはなかなか難しいでしょう。

しかし、よく使用するものはしっかりと把握して混同しないようにしてください。

階層の指定ミス

子孫セレクタや子セレクタを使用する際は間に余計な要素が入っていないか、要素の順番は正しいかなどに注意しなければなりません。

特に子セレクタは「直下」という厳格な指定なので気を付けてください。

「#」「.」「,」の記述忘れ

これらがないと、まったく別の記述になってしまいます。

ID名を指定するときに使う「#」や、クラス名を指定するときに使う「.」が抜けていると、要素名の記述になってしまいます。

しかし、IDやクラスに要素と同じ名前を使うことはあまりないので、無効な記述となります。「.」は視認しにくいので、特に気をつけてください。

「,」は複数の要素を同時に指定するためのものですが、これがないと子孫セレクタを使った1つの要素という記述になってしまいます。

優先順位

外部ファイル、styleタグ、要素に直接記述の3つの方式で優先される順番があるというのは先に述べたとおりですが、CSSの優先順位はそれだけではありません。

同じCSSの中でも存在します。

基本的にファイルの下に書かれている記述が優先されます。

CSS
p {
font-size:14px;
}
p {
font-size:16px;
}

p要素に同じプロパティで違う値が2つ指定されています。この場合、下に記述されている16ピクセルが優先されるということです。

具体性が高い記述が優先されるという法則もあります。

HTML
<p id=”sample” class=”sample”>テキスト</p>
CSS
p#sample {font-size:18px;}
#sample {font-size:17px;}
p.sample {font-size:16px;}
.sample {font-size:15px;}
p {font-size:14px;}
*{font-size:13px}

この場合、もっとも具体性が高いのはp要素に指定されたID「sample」、1行目です。IDはページにひとつだけのものなので、クラスよりも具体性が高いとされます。

具体性は下の行ほど下がり、もっとも低いのはすべての要素を意味する全称セレクタ(アスタリスク)です。

下の行が優先されるという法則よりも、具体性が高い記述が優先されるので、このCSSでは1行目の18ピクセルが適用されます。

長いCSSだとスタイルがバッティングを起こし、別の箇所にある優先順位が高いスタイルが適応されるということは頻繁に起こります。

作業を行った箇所に問題がない場合は、どこか別のところに優先されるスタイルが記述されていないか探してみてください。

優先順位を最高にする「!important」

優先順位が邪魔をしてどうしても意図したスタイルを適用できないというときは、「!important」が有効です。

CSS
p {
font-size:14px !important;
}

このように値の後ろに記述することで、他のすべてのスタイルに優先して適用されるようになります。

非常に便利ですが、乱用は好ましくありません。本来の優先順位を無視するので、CSSの原則が分かりにくくなってしまいます。

最優先ばかりになると、本当に優先すべきはどのスタイルなのかも分かりにくくなるでしょう。

表示崩れなど修正が必要になった場合、!importantが関わっているとかなり大がかりな作業になる可能性があります。

!importantの使用は、本当に必要なときだけにとどめるようにしてください。

まとめ

CSSはHTMLに指定しないと意味がありません。

また、昨今のWEBサイトでCSSを使用しないというものは考えられないでしょう。

指定場所やセレクタなど、基礎は大切なので確実に覚えるようにしてください。

そして、CSSが効かないというときは、この記事で紹介した原因を参考にしていただけると幸いです。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5