Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSS
入門編

トップページ
CSS入門編 - 外部CSSを読み込ませる方法

外部CSSを読み込ませる方法

みなさまどうもこんにちわ。

続きまして外部からCSSファイルを読み込む方法を勉強していきましょう。

まずCSSファイルの作成方法ですが、HTMLファイルの作成手順とほぼ一緒です。テキストファイルに『.css』と拡張子をつければCSSファイルの扱いとなります。その際は文字エンコーディングにご注意ください。最近のCSSファイルの文字エンコーディングはHTML5の影響から『utf-8』が一般的です。
※文字エンコーディングについてはこちらの記事を参照
※HTMLファイルの作成手順はこちらの記事を参照

ではまずCSSファイルの作成からやってみましょう。

読み込ませたいHTMLファイルと同じ階層に『style.css』という名前でCSSファイルを作成しましょう。このファイル名は拡張子が『.css』であれば何でも良いです。ただし、最近は配布されている有名なフレームワーク等でCSSファイルの名前は『style.css』と指定されていることが多く、特に理由がない場合は『style.css』という名前にしておいたほうが無難かもしれません。

では記述していきます。

外部CSSファイルにCSSを記述する場合は最初に文字エンコーディングの指定をする必要があります。CSSファイルの最初の一行目にこのように記述してください。

@charset "utf-8";

これでこのCSSファイルはut-8で記述されているという宣言ができました。もしShift_JISで読み込みたい場合は

@charset "shift-jis";

と記述してください。この宣言が抜けていてもブラウザが自動で文字エンコーディングを判断して処理してくれる場合が多いですが、ごく稀にCSSが反映されなくなってしまう場合もありますので必ず記述しておくようにしましょう。

HTMLファイルでも

<meta charset="utf-8">

と記述して文字エンコーディングの指定をしましたね。同じようなイメージを持って頂ければ大丈夫です。
※こちらの記事を参照

では続いて先ほどと同じようにpタグの文字サイズを18pxにして太字にしてみましょう。文字エンコーディングの記述が必要なだけで、他はstyleタグに記述した時と全く同じです。

@charset "utf-8";

p {
     font-size: 18px;
     font-weight: bold;
}

これで全てのpタグのデザインを変更する記述が完成しました。

続いてHTMLファイルにこのCSSファイルを読み込ませましょう。

外部CSSを読み込ませたい場合に使用するタグはlinkタグです。styleタグではないので間違えないようにしてください。

link要素のrel属性には『stylesheet』という値を記述し、href属性にはそのCSSファイルのパスを記述します。今はHTMLファイルからみて同じ階層にstyle.cssを作成したのでパスは『./style.css』となります。(『style.css』でも可)
※パスについてはこちらの記事を参照

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

これをhead要素の中に記述します。index.htmlの全体のソースはこのような感じですね。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8"> 
<title>CSS 練習中！</title>
<link rel="stylesheet" href="./style.css">
</head> 
<body> 

<p>p要素にスタイルを適用するよ</p>

<p>ここも影響をうけるよ</p>

</body>
</html>

これで完成です。ブラウザで確認してみましょう。しっかり表示されましたでしょうか？もし表示されていなかったらCSSの記述にミスがないか確認してみましょう。CSSにミスがなかった場合はパスやHTMLタグをミスしてる可能性が高いかと思います。

link要素を使用して外部CSSを読み込ませる場合、HTML4.01やXHTML1.0ではtype属性に『text/css』と記述する必要がありました。

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

HTML5ではデフォルトのtype属性の値が『text/css』となっているためにtype属性を記述する必要はありませんが古いHTMLファイルを更新するときはtype属性が必須になりますのでその際は記述するのを忘れないようにしてください。

さて、これでCSSファイルをHTMLファイルから切り離すことができました。CSSをHTMLファイルから切り離し別ファイルにすることは非常にメリットが多いです。

まず1つのCSSファイルを多数のHTMLファイルに読み込ますことができるという利点があげられます。

同じ階層に新しく『index2.html』というHTMLファイルを作成してみましょう。中身はこのようにします。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
<meta charset="utf-8"> 
<title>CSS 練習中！</title>
<link rel="stylesheet" href="./style.css">
</head> 
<body> 

<p>2つ目のHTMLファイルだよ。</p>

</body>
</html>

注目すべきはlink要素のhref属性の中身です。先ほどlinkタグを記述した『index.html』と同じCSSファイルを読み込ませています。もう説明する必要もありませんが、この『index2.html』のpタグも『index.html』のpタグと同じようにstyle.cssに記述されたデザインを適応させることができます。

このように同じCSSファイルを複数のHTMLファイルに読み込ませるのはとてもメリットが大きく、みなさんも新しくウェブサイトを作成するときはCSSファイルは外部から読み込ませるようにすると良いかと思います。

というわけでこの辺で。続いての記事ではCSSのインデントマナーについて勉強していきましょう。

ではー。

この記事は桜舞が執筆致しました。