CSSをHTML文書に適用させるいくつかの方法【CSS】

CSSとはスタイルシートとも呼ばれていて、Webサイトのデザインやレイアウトなど見た目を整えるために必要なのですが、そのCSSをどうやってHTML文書に適用させるのか。

いくつか方法があります。

外部のスタイルシートを読み込む方法
HTMLにstyle要素を記述する方法
グローバル属性であるstyle属性を使う方法
@import規則を使って読み込む方法

外部のスタイルシートを読み込む

一番よく使われている方法だと思うのですが、まず「style.css」のような外部のスタイルシートを読み込むという方法。

<head>
　　<title>外部のスタイルシートを読み込む</title>
　　<link rel=”stylesheet” href=”style.css”>
</head>

この方法は、link要素をHTML文書のhead内に記述して、CSSファイルを関連づけることで利用できます。

複数ページ（複数のHTML）があったとしても、1つのCSSファイルをそれぞれのHTMLで読み込ませることで、共通しているデザイン箇所の統一や変更というのが簡単にできるというメリットもあります。

@charset規則で文字コードを指定する

@charset “Shift_JIS”;

外部のスタイルシートをHTMLに適用させる場合、CSSファイルの文書内で日本語を使う場合は文字コードを指定した方がいいとされていて、@charsetという規則を使って指定します。

文字コードを指定していないときは、関連づけているHTML文書と同じ文字コードで処理されます。

HTMLにstyle要素を記述する

外部のスタイルシートを読み込まず、HTMLに直接CSSを記述する方法もあります。

<head>
　　<title>HTMLにstyle要素を記述する</title>
　　<style type=”text/css”>
　　<!––
　　p {font-size: 14px;}
　　h1 {color: #ff0000;}
　　––>
　　</style>
</head>

styleタグを使ってHTMLのhead要素内にスタイルを記述することで、そのHTMLにCSSが適用されるということ。

その際は、スタイルシートに対応していないブラウザで、テキストとしてスタイルシートが表示されないようにするため、スタイルシート全体をコメントアウトにします。

HTMLにCSSを直接記述するこの方法は、ちょっとしたWebページを作るだけならいいかもしれませんが、1つのファイルのデータ量が増えるよりも、HTMLとCSSでファイルを分けた方がいい気がします。

styleタグで使用できる属性

styleタグを記述する際に使用できる属性についても触れておきたいと思います。

media（メディア）

media属性は、スタイルシートを適用する対象となるメディアタイプを指定します。

なお、media属性の値に関しては、メディアクエリである必要があります。

ちなみにメディアクエリとは、デバイスによってCSSファイルを分けるときに使われる技術のこと。

属性値	意味
all	すべてのデバイス
aural	音声合成装置
braille	点字用ディスプレイ
embossed	点字用プリンタ
print	プリンタ
handheld	モバイルデバイス
projection	プロジェクター
screen	ディスプレイ
tty	文字幅が固定のデバイス
tv	テレビ

type（タイプ）

type属性は、テキスト・画像・動画・音声などのデータファイル形式を示すMIMEタイプと呼ばれるものを指定するために使うのですが、省略した場合は「text/css」と指定されるため、省略しても特に問題ありません。

一応MIMEタイプの種類も紹介しておきます。

MIMEタイプ	ファイル形式
text/plain	プレーンテキスト
text/html	HTMLファイル
text/css	CSSファイル
text/javascript	JavaScriptファイル
img/jpeg	Jpegファイル
img/png	PNGファイル
img/gif	GIFファイル
video/mp4	MP4ファイル
video/ogg	Oggファイル
audio/mp3	MP3ファイル
audio/mp4	MP4ファイル
audio/wav	WAVEファイル
audio/aac	AACファイル
application/shockwave-flash	Flashファイル
application/pdf	PDFファイル

scoped（スコープド）

scoped属性はHTML5から定義された属性で、特定の範囲内だけにスタイルを適用させることができます。

基本的にスタイルの適用範囲というのは、scoped属性が指定された親要素内のみになります。

グローバル属性であるstyle属性を使う

styleはタグとしてだけではなく、属性としても使われることがあり、グローバル属性なので基本的にどの要素に対しても使うことができます。

<p style=”color:#ff0000;”>対象の要素にだけスタイルを適用</p>

そのグローバル属性としてのstyleを利用して、対象の要素にだけスタイルを適用することができます。

属性値にはCSSで記述するときと同様、プロパティと値を記述します。

これも一つの要素にだけスタイルを適用したいときなどには便利なんですが、同じようなスタイルを複数の要素で使うことになってくると、やはりスタイルシートなどで管理した方がいいと思います。

関連記事
『グローバル属性はHTMLの全ての要素に使うことができる』

@import規則を使って読み込む

最後に@import規則を使ってスタイルシートを読み込む方法です。

これはCSSやHTMLのstyle要素内に記述することで、外部のスタイルシートを読み込むことができます。

@import url(“style.css”);

書き方としては、@importに続けて「url()」を記述し、カッコ内にCSSファイルがあるURLを指定します。

@import規則は他のプロパティの指定よりも先にくるように記述する必要があります。

CSSを適用させる方法まとめ

HTMLでWebサイトの構造をつくり、CSSでデザインやレイアウトを整えます。

CSSをHTML文書に適用させる方法としては、外部のCSSファイルを読み込んだり、HTMLに直接スタイルを記述するといった方法があることがわかりました。