HTML文書のスタイルを指定する方法は色々ありますが、本コラムでは外部のCSSファイルをHTML文書に読み込む方法について解説します。まずは、HTMLコード内に記述する方法について確認します。CSSの記述は外部ファイルを作成して管理する事が推奨されていますので、HTMLコードとは分離させましょう。作成したCSSファイルを読み込む方法として「link要素」と「@import」を使った方法について説明します。
1. HTML文書にスタイルを適用する方法
外部CSSファイルの読み込み方法を解説する前にHTML文書内にCSSを記述する２つの方法について簡単に説明します。
1.1 HTML文書の<head>タグ内で<style>タグを使う
まず一つ目は、HTML文書の<head>に記述する方法です。CSSのセレクタとプロパティを<style>～</style>タグ内に記述してHTML文書のスタイルを指定します。実際にHTML文書を作成してみましょう。「sample1.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●sample1.html(<style>タグを適用)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTM入門-外部CSSファイルを読み込む</title>
<style>
h1 {
color: #326693; /* 見出しテキストの色を指定する */
padding-left:10px; /* ボックス内左側の余白を指定する */
border-left: 10px solid #31a9ee; /* ボーダー左側のスタイルを指定する */
border-bottom: 1px dashed #31a9ee; /* ボーダー下部のスタイルを指定する */
}
</style>
</head>
<body>
<h1>スタイルの適用</h1>
<p>HTMLヘッダーでスタイルを適用します。</p>
<p>「styleタグ」で見出しのスタイルを設定しています。</p>
</body>
</html>HTMLコードの大見出し(<h1>タグ)テキストの色とボーダー、それから余白のスタイルを、それぞれ「colorプロパティ」、「borderプロパティ」、「paddingプロパティ」で設定しています。
●ブラウザーの表示(sample.html)
一般的にはこのように同一文書内にHTMLコードとCSSを記述することは推奨されていません。筆者のコラムの多くでは、初心者向けの解説用に、あえてHTMLコードとCSSを併記して説明していますが、特別な理由がない限り、HTMLとCSSのコードは分けて作成・管理するようにしましょう。
1.2 HTMLタグにStyle属性を追加する
<body>タグ内の特定のタグにスタイルを指定することもできます。
●sample2.html(<style>属性を追加)
<head>
<meta charset="utf-8">
<title>HTM入門-外部CSSファイルを読み込む</title>
</head>
<body>
<h1 style="padding-left:10px; border-left: 10px solid #31a9ee; border-bottom: 1px dashed #31a9ee; color:#326693">スタイルの適用</h1>
<p>HTMLタグのstyle属性で大見出しのスタイルを設定しています。</p>
</body>先ほど<style>タグ内で指定したスタイルを<h1>タグに直接記述する事も可能です。「Style属性」を使って値にプロパティを設定します。複数のプロパティを設定する場合はセミコロン";"で区切ります。
●ブラウザーの表示(sample2.html)
但し、タグに直接指定するStyle属性もあまりお勧めする設計ではありません。コードが非常に読みにくくなりますので、やはりこの方法も暫定対策や特別な事情がある場合以外は使わない方がよいでしょう。
1.3. CSSスタイルの適用順序
ヘッダータグ（Head）内に記述されたセレクタとbodyタグ内の「Style属性」で記述されたスタイルがバッティングした場合は、どちらのスタイルが優先されるのでしょうか？
「sample3.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。
●sample3.html(<style>タグを適用)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTM入門-外部CSSファイルを読み込む</title>
<style>
h1 {
color: #326693; /* 見出しテキストの色を指定する */
padding-left:10px; /* ボックス内左側の余白を指定する */
border-left: 10px solid #31a9ee; /* ボーダー左側のスタイルを指定する */
border-bottom: 1px dashed #31a9ee; /* ボーダー下部のスタイルを指定する */
}
p {
color: #31A9EE; /* 段落テキストの色（青）を指定する */
}
p {
color: #000000; /* 段落テキストの色（黒）を指定する */
}
</style>
</head>
<body>
<h1>スタイルの適用</h1>
<p>HTMLヘッダーでスタイルを適用します。</p>
<p style="color: #B20000;">「style属性」で段落のテキストの色を赤で設定しています。</p>
</body>
</html>
段落（pタグ）のテキストの色のスタイルをヘッダーとボディのタグ両方に記述しました。ヘッダ内には「段落(p)セレクタ」を二つ記述してそれぞれ色の指定を「青」と「黒」にしました。HTMLコード内の段落（p）タグにはstyle属性でテキストが赤色になるよう設定しています。HTML文書のスタイルは適用するタグがら近い順序で適用されます。通常HTMLコードは上から順番に読み込まれますので、同一文書内に同じセレクターとプロパティがあった場合は、一番最後に読み込んだ情報を優先してスタイルを適用する事になります。
「sample3.html」をブラウザーで確認してみましょう。１４行目に指定した「pセレクタ」の「colorプロパティ」の値である青色は適用されず、１７行目に指定されている「colorプロパティ」の黒色が段落のテキストの色として適用されています。また２４行目の段落タグにはStyle属性で「colorプロパティ」が設定されていますので、タグに一番近いプロパティの「赤色」が表示されます。
●ブラウザーの表示(sample3.html)
2. 外部CSSファイルをHTML文書に読み込む方法
HTMLでスタイルを適用する場合は管理・メンテナンスという面からも外部CSSファイルの作成が推奨されます。外部ファイルをHTML文書に読み込む方法には「link要素」を使う方法と「@import」を使う方法がありますのでそれぞれの方法を確認してみましょう。
2.1. CSSファイルの作成方法
CSSファイルの作成方法は簡単です。<style>～</style>に記述されているCSSを別ファイルとして保存します。
それでは「sample1.html」のスタイルを外部ファイルとして保存してみましょう。以下のコードをコピーして「style.css」を作成し、html文書と同じフォルダー内に保存して下さい。CSSファイルの拡張子は必ず「.css」にします。ファイル名は任意ですが、「style.css」や「common.css」などがよく使われています。また、先頭行には外部ファイルの文字コード「@charset "utf-8";」を定義します。
●style.css
@charset "utf-8";
h1 {
color: #326693; /* 見出しテキストの色を指定する */
padding-left:10px; /* ボックス内左側の余白を指定する */
border-left: 10px solid #31a9ee; /* ボーダー左側のスタイルを指定する */
border-bottom: 1px dashed #31a9ee; /* ボーダー下部のスタイルを指定する */
}HTML文書の方は、リネームして「link.html」としました。
●css設置フォルダー
2.2. 「link要素」を使って外部ファイルを読み込む
次に「link.html」ヘッダーに<link>タグを追加します。linkタグには、「rel属性」と「href属性」が必須になります。「rel属性」はファイルとリンクする外部ファイルの関係を表すキーワードです。CSSファイルとの関係は、外部スタイルシートを示す"stylesheet"を設定し、「href属性」には、リンク先のファイルを指定します。リンク先のMIMEタイプを表す「type属性」は任意ですが、CSSファイルの場合は"text/css"を設定して下さい。
●link.html(<link>属性を追加)
<head>
<meta charset=”utf-8″>
<title>HTM入門-外部CSSファイルを読み込む</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>CSSファイルの読み込み</h1>
<p>cssファイルをlink要素を使って読み込んでいます。</p>
<p>「style.css」で大見出しのスタイルを設定しています。</p>
</body>外部ファイルとして保存した「style.css」のスタイルが「link.html」の見出しで適用されました。
●link.html
2.3 「@import」を使って外部ファイルを読み込む
link属性でcssを読み込む以外にも「@import」を使って外部ファイルを読み込む方法があります。先ほど作成した「style.css」ファイルを使います。
●基本の書式
<head>
<style>
@import url(外部ファイルのURL);
</style>
</head>
適用する外部ファイル(style.css)のURLを「@import url()」に指定します。
●import.html(<link>属性を追加)
<head>
<meta charset=”utf-8″>
<title>HTM入門-外部CSSファイルを読み込む</title>
<style>
@import url(style.css);
</style>
</head>
<body>
<h1>CSSファイルの読み込み</h1>
<p>@importを使ってcssファイルを読み込んでいます。</p>
<p>「style.css」で大見出しのスタイルを設定しています。</p>
</body>●import.html
「@import」はHTML文書だけでなく、CSSファイル内でも同様に使うことができます。
●common.css
@charset "utf-8";
/* common.cssからstyle.cssを読み込んでいます。 */
@import url(style.css);
body {
margin: 0;
padding: 0;
font-family: "メイリオ", Meiryo, sans-serif;
font-size: 100%;
}用途の異なるCSSファイルを一まとめにしてHTMLに設定すると管理・メンテナンスもしやすく便利です。
