HTMLにCSSを読み込ませる方法、およびCSSセレクタ指定の３つの方法
出典：
■CSSの読み込み方（適用方法）
HTMLでCSSを読み込むためには、次の2つの方法があります。
・外部CSSファイルをHTMLから読み込む方法
・HTMLファイル内に直接CSSを記述する方法
■1.外部CSSファイルを読み込む方法
外部CSSファイルを読み込む方法は、Webデザインの現場で一般的に使用されている方法です。
事前に拡張子が「.css」のファイルを用意し、HTMLに以下のタグを記述します。
<link rel="stylesheet" href="sample.css">
HTMLファイルに上記のコードを1行追加することで、sample.cssという名称のファイルに記述されたCSS定義をHTMLに適用することができます。
この1行をHTMLファイルの<head>タグ内に記述します。
HTML
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sample.css">
<title>HelloTechAcademy</title>
</head>
<body>
<p>ここにHTMLの文章などが入ります</p>
</body>
</html>
ここで、CSSファイル読込処理のhrefの値は、HTMLファイルとCSSファイルの配置場所によって変化するので気を付けましょう。
上記サンプルの場合は、HTMLファイルとCSSファイルは同じディレクトリに配置する必要があります。
また、HTMLファイルと同じディレクトリにcssというフォルダがあり、その中にsample.cssというファイルが配置されている場合、
CSSファイル読み込み処理は以下のように記述します。
<link rel="stylesheet" href="css/sample.css">
■2.HTMLファイル内に直接CSSを記述する方法
HTMLファイル内に直接CSSを記述する方法は、一般的にはほとんど使う機会の無い方法ですが、このような適用のさせ方もあります。
まず、以下のようにCSS定義を<style>タグの中に記述します。
<style type="text/css"> p { color : red; } </style>
用意した<style>タグは、HTMLファイルの<head>内に以下のように記述します。
HTML
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">p { color : red; }</style>
<title>HelloTechAcademy</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>
この場合、pタグにcolor:redのスタイルが適用され、画面には赤い文字で「こんにちは」と表示されます。
■CSSが読み込めない場合の解決方法
実際に自分でHTMLファイルとCSSファイルを用意して動作確認すると、想定通りにCSSが適用されずにハマった！という方も多いと思います。よくある失敗パターンと解決方法を解説しておきますので、ぜひ参考にしてください。
1．CSS定義が間違っている場合
HTMLからCSSファイルが読み込めていても、CSS定義が間違っている場合、画面表示に意図したCSSが適用されていない、といった結果になります。
テスト用に簡単で確実なサンプルCSS定義を1つ用意して、まずは記述ミスがないか確認しましょう。
HTML側のid名やclass名と、CSS定義におけるセレクタ文字列がスペルミスにより一致していなかった・・・というケースもよくあります。
２．CSSファイルが読み込めない場合
CSSファイルが読み込めないこともよくあるパターンの1つです。
開発環境によってはCSSファイルの読込に成功するまでにひと苦労することも多いです。
CSS読み込みタグの記述例
<link rel="stylesheet" href="./../css/sample.css">
hrefの値として指定した「 ./ 」により、ディレクトリの基準が現在配置されているHTMLファイルの場所になります。
また、「 ../ 」の指定で、ディレクトリが1階層上がり、そこから「 css 」フォルダにアクセスすることができています。
一般的に「 ./ 」を利用したカレントディレクトリ指定によるアクセスは好まれませんが、Cloudの場合にはこちらが有効な解決方法となります。
■CSSの3通りのセレクタ指定方式
タイプセレクタ
classセレクタ
idセレクタ
サンプルプログラムでも3通りの指定方式を用意して、動作確認していきます。
まずは、HTMLファイルを用意します。
pタグと、idやclassを付与したテキストボックスを用意します。
#HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloTechAcademy</title>
<link rel="stylesheet" href="sample.css">
</head>
<body>
<p>Hello TechAcademy !</p>
<input type="text" id="textBox" value="こんにちは">
<input type="text" class="sample-text" value="こんばんは">
</body>
</html>
#CSS ( sample.css )
/* タイプセレクタ。pタグ全てに適用される */
p {
color : brown;
}
/* idセレクタ。指定idを持つタグに適用される */
#textBox {
font-size : 20px;
}
/* classセレクタ。class名が一致するタグに適用 */
.sample-text {
background-color : green;
color : #fff; /* 白 */
}
HTMLファイルとCSS定義が用意できたら、画面表示を確認しましょう。
実行結果（画面表示）
3通りのCSSセレクタにより、それぞれ３つの異なるHTML要素にデザインが適用できました。