Webサイトをデザインするために欠かせないCSSですが、HTMLへ適用するためには大きく3種類の方法が存在します。
本記事では、HTMLへのCSS読み込み方法を初心者の方でも理解しやすいよう、なるべく細かく解説していきたいと思います。
目次
HTMLのCSS読み込み方法1: HTMLファイルに外部CSSファイルから読みこませる
まずはHTML5で推奨されているCSSを外部ファイルとして切り分けて読みこませる方法について、解説していきたいと思います。
最も一般的な方法であり、特に理由がない限りは、HTMLファイルとCSSファイルは切り分けて記述するように意識しておきましょう。
外部CSSファイルの読み込み方
外部CSSファイルを読み込むためにはHTMLファイルのheadタグに下記のコードを記述します。
<link rel="stylesheet" href="ファイル名">
HTMLでは「link」タグを利用することで、ファイルの関連付けを定義することが可能になります。
rel属性の使い方
rel="stylesheet"
rel属性では、後述するhref属性で指定したファイルとhtmlファイルの関係性を定義します。
今回の場合は、CSSファイルを読み込むため「stylesheet」と設定しています。
他によく使われるrel属性の値としては、「icon」でブラウザのアドレスバーに表示される小さいアイコン画像を指定する場合などが挙げられます。
href属性の使い方
href="ファイル名"
href属性では、読み込むファイルのリンク先を指定することが可能です。
例えばhtmlと同じフォルダにCSSファイルが格納されている場合、ファイル名だけを記述すれば読み込むことが可能です。
別階層にCSSファイルを格納している場合には、htmlファイルが格納された場所からの「相対パス」を指定する方法が一般的です。
サンプルコードで外部CSSファイルの読み込み方法を確認しよう
では実際のサンプルコードで外部CSSファイルの読み込み方法を確認してみましょう。
サンプルではシンプルに文字列を赤色に変更するCSSを適用しています。
フォルダ階層は下記の通りです。
. ├── css │ └── style.css └── index.html
今回のサンプルではHTMLと同階層に「cssフォルダ」を作成し、cssフォルダの中に「style.css」を格納しています。
HTMLファイルとは異なる階層に対象のCSSファイルが格納されているため、href属性には「css/style.css」と相対パスで記述しておく必要があります。
index.html
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>CSS Sample</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="div-css">外部CSSファイル読み込みのサンプルです。</div> </body> </html>
style.css
.div-css {
color: red;
}
サンプルコードを実行した結果が下記の通りとなります。
外部CSSファイルで定義した「div-css」が読み込まれ、文字が赤色に表示されていることをご確認頂けます。
HTMLのCSS読み込み方法2: HTMLファイル内でCSSを定義する
続いてHTMLファイル内に直接CSSを定義する方法について確認していきましょう。
styleタグにデザインを記述してみよう
HTMLファイル内で直接CSSを指定するには「head」部分に「style」タグを定義します。
上述したように、「style」タグの内部記述はユーザーに表示するためのHTMLタグではないため、「head」部分に定義していきます。
内部の処理はCSSに記述する方法と全く同じです。
<style>
<!--
.div-css {
color: red;
}
-->
</style>
サンプルコードでHTMLファイルにCSSを直接定義する方法を確認しよう
では実際にサンプルコードでHTMLファイル内に直接CSSを定義する記述方法を確認してみましょう。
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>CSS Sample</title>
<style>
<!--
.div-css {
color: red;
}
-->
</style>
</head>
<body>
<div class="div-css">HTMLファイルに直接スタイルを定義したサンプルです。</div>
</body>
</html>
サンプルコードを実行した結果が下記の通りとなります。
HTMLファイル内で定義したstyleタグが読み込まれ、指定した「div-css」クラスが適用されていることがご確認頂けます。
HTMLのCSS読み込み方法3: HTMLタグにstyleで直接定義する
3つ目はHTMLタグに直接style属性でスタイルを記述してしまう方法です。
style属性の記述方法を確認しよう
style属性に記述する方法も外部CSSファイルやstyleタグで記述していた方法と基本は同じです。
ただ、style属性に直接記述する場合、クラスなどは指定せず適用したいスタイルの処理のみを記述します。
<div style="color: red;"></div>
サンプルではdivタグにstyleを適用していますが、divタグ以外のHTML要素にもstyleを適用することは可能です。
サンプルコードでHTMLタグに直接styleを定義する方法を確認しよう
実際のサンプルコードでHTMLタグに直接sytleを定義する方法を確認してみましょう。
divタグに対してstyle属性を指定しています。
index.html
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>CSS Sample</title> </head> <body> <div style="color: red;">HTMLタグに直接スタイルを定義したサンプルです。</div> </body> </html>
サンプルコードを実行した結果が下記の通りとなります。
指定したdivタグに対してstyleが適用され、文字列が赤色に変更されていることをご確認頂けます。
さいごに：HTML5ではCSSを外部ファイルに切り分けて読み込みを行う方法が推奨される
本記事では、HTMLにおけるCSSの読み込み方法について3種類のやり方をご紹介してきました。
冒頭でも説明しましたが、HTML5ではHTML文書とCSSでのデザインを明確に切り分ける方法が推奨されています。
特に理由が無い限りは、外部CSSファイルとしてデザイン部分は切り出し、HTMLに読み込む方法を基本として、コーティングを実施するように意識しておきましょう。
通常HTMLファイルは「head」と「body」に分かれており、「head」部分にはユーザーに表示しない内部情報を、「body」部分はユーザーに表示する外部情報を記述します。