ケケンタこの記事ではHTMLへのCSS読み込み方法を「３つ」解説していきます！
- CSSファイルをHTMLファイルに読み込む方法（＝外部ファイル読み込み）
- CSSをHTMLファイルに直接書き込む方法
- 各読み込み方法のメリット・デメリット
ケケンタWeb制作の副業にご興味のある方には以下の記事もおすすめです。
CSSとは？
CSSとは、HTMLで記述された文書を装飾するための言語です。
HTMLだけで記述された文書は、見た目が非常に簡素で味気ないものですが、そこに様々な色や装飾を施すために使用するのがCSSです。
わかりやすく言うと
- HTMLだけで作成されたサイト
-
食材をただザックリ切ってお皿に並べただけの料理（もはや料理と言えませんね……）
- CSSを適用したサイト
-
食材に多様な加熱処理や味付けを施し、いろどりも考えてお皿に盛りつけられた料理
Web上に公開されているサイトでCSSが使用されていないというのはほぼ100％あり得ないほど、WebサイトにおいてCSSを欠かすことはできません。
もちろん、本ブログでもCSSはふんだんに使用しています。
（正確にはWordPressという便利なサイト制作ツールを使用しているため、自分ではほとんどCSSは記述していません）
ケケンタCSSはHTMLで記述された文書を装飾するための言語です！
【解説】CSSを読み込む「３つ」の方法
CSSのHTMLへの読み込み方は大きく３つあります。
ケケンタ上記の点を踏まえた上で、各方法の解説をご覧いただければと思います！
方法① HTMLタグ内にstyle属性で記述する方法
style属性を記述していないタグ
<p>style属性を記述していないタグ</p>表示結果
style属性を記述していないタグ
style属性の中にCSSを記述したタグ
<p style="color: red; font-weight: bold;">style属性を記述し、CSSを適用したタグ</p>表示結果
style属性を記述し、CSSを適用したタグ
解説
style属性の中にcolor、font-weightの記載があります。
これらはそれぞれ
- color＝文字色
- font-weight＝文字の太さ
を指定するためのCSSプロパティです。
今回は、
「color:red;」とすることで赤文字に、
「font-weight:bold;」とすることで太字に設定しています。
このようにHTMLタグ内にstyle属性を記述し、その中にCSSを直接書くことが可能です。
メリット・デメリット
- CSSファイルを用意しなくても簡単にCSSが書ける
- HTMLファイルのメンテナンス性・可読性が下がる
- メンテナンス性 …… HTML・CSSの修正のしやすさ
- 可読性 …… ファイル内容の読みやすさ
メンテナンス性と可読性は、その後のサイトメンテナンスの「コスト」を下げることに直結します。
つまり、メンテナンス性と可読性を下げてしまうこの「方法①」は、文字通りサイト制作費用を増加させてしまうことになるのです。
例外的に使用する場合もあるとは思うため、知っていて無駄になることはありませんが、デメリットを理解した上で使用するようにしましょう。
ケケンタHTML/CSSに限らず、プログラミングでは可読性・メンテナンス性が高いコードを書けることは大事なスキルの１つです！
方法② HTMLファイルのheadタグ内にstyleタグで記述する方法
headタグ内にstyleタグでCSSを記述すると以下のようになります。
<head>
<style>
p.sample {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p class="sample">headタグ内にstyleタグで直接記述</p>
</body>出力結果
headタグ内にstyleタグで直接記述
解説
Webサイトにおける各種設定内容やファイル読み込みのための記述をする場所
HTMLはブラウザ上にテキストや画像などを表示することができるマークアップ言語ですが、headタグに記述された設定内容は、表示の為ではなく、裏側に必要な情報設定に使用されます。
headタグ内にstyleタグを記述し、その中にCSSを書くことで、そのファイル内のHTMLにのみCSSを適用させることが可能です。
ケケンタheadタグには色々な情報を書くことが可能ですが、その内の１つがCSSなのです。
メリット・デメリット
- 外部ファイルの作成が不要となるため、ファイル管理が楽になる
headタグ内に直接CSSを記述することで、後述する「CSSファイルの読み込み」で必須となる外部ファイル作成も不要となるため、ファイル管理の観点でメリットとなります。
- 記述したファイルにしかCSSが適用されない
- HTMLファイルのメンテナンス性・可読性が下がる
例えば、ある同じCSSを複数のHTMLファイルに適用したい場合、各HTMLファイルにstyleタグで記述しなくてはなりません。
そのため、適用したいファイルの数だけCSSを記述しなければならず、さらに修正が必要となった際も、ファイルの数だけ手間がかかってしまいます。
ケケンタつまり、「方法②」も「方法① HTMLタグ内にstyle属性として記述する方法」と同じく、メンテナンス性の低下につながるということです。
使用する際はこの点をしっかり留意しましょう。
通常はやはり、このあとご紹介する、CSSファイルを別途作成し、それを読み込んで使用する方法を採用するのがベストと言えます。
よって、headタグ内に直接記述する方法もあくまで補助知識として覚えておくとよいでしょう。
方法③ HTMLファイルに外部ファイルとして読み込む方法
ケケンタHTMLファイルにCSSを外部ファイルとして読み込む手順を解説します。
STEP１ CSSファイルを用意する
外部ファイルとして読み込む場合、まずはCSSを別ファイルに記述しておく必要があります。
以下は「style.css」というファイル名で作成したCSSファイルの記述例です。
style.cssの記述例
p {
color: red;
font-weight: bold;
}
STEP２ CSSファイルを読み込むための記述をする
CSSファイルを読み込むときは、HTMLのheadタグ内に下記のような記述をします。
CSSファイルをHTMLファイルに読み込む
<head>
<link rel="stylesheet" href="style.css">
</head>形式は、上記でハイライトされている
<link rel="stylesheet" href="CSSファイルまでのパス">です。
パスを書き間違えると、CSSファイルが読み込まれず、
「あれ？ CSSが反映されない？ なんで？」
という事態に陥ります。
ケケンタ僕も独学で学習を始めた最初の頃、これで時間をずいぶん浪費しました……。
特に独学でHTMLの学習を始めたばかりの頃は、この「パス」という概念に慣れずCSSが上手く読み込まれないということが起こりやすく、
インターネット上で色々と調べ、ブラウザを再読み込みしたり、キャッシュを消したりとあれこれ試した挙句、ただ単にパスの指定が間違っていた
というのはあるあるネタです。
そのようなことにならないよう
上手くCSSが反映されないというときは、まずはパスの書き間違えを疑ってみましょう。
ケケンタパスについて詳しく知りたい方は以下の記事をご覧ください！
メリット・デメリット
- 複数のHTMLファイルに簡単にまとめてCSSを適用できる（linkタグを記述するだけでOK）
- 修正が発生した際も、修正箇所が少ないためサイト作成の効率化に繋がる
- HTML・CSSを別々のファイルで編集が行えるため、各要素に集中して作業ができる
- 別ファイルに記述をするため、HTML・CSSファイルを同時に編集する場合は複数のウィンドウを開く必要があり、パソコンの画面領域を圧迫してしまう
- HTMLとCSSの記述位置がまったく異なるため、場合によってはCSSの修正がテンポよくできない
このように、一長一短な側面は確かにあります。しかし、サイト作成の際はこの方法を使用するのがもっともメジャーなため、通常は必ず
CSSファイルを作成し、それをHTMLファイルへ読み込む
という形を採用するにようにしましょう。
ケケンタ最初の内はなかなか慣れないかもしれませんが、ファイルごとに役割を分けて管理するという考え方はプログラミングをする上で非常に大切です。ぜひ、いまの内から練習してみて下さい。
まとめ
いかがだったでしょうか。
HTMLへのCSSの読み込み方法を「３つ」ご紹介しました。
それぞれメリット・デメリットはあるものの、通常は３番目のHTMLファイルに外部ファイルとして読み込む方法を使用すれば間違いありません。
これからも様々な知識・情報を発信していきますので、またどこかでお会いできれば光栄です。
ケケンタ最後までご覧いただきありがとうございました！
もしもWeb制作の独学に限界を感じたら
Web制作は未経験者でも比較的簡単に習得可能なスキルではあります。
しかしそうは言っても、Web制作を初めて学習する方にとっては覚えることが多く、独学で相談できる相手もいない状況だと気持ちが苦しくなってしまうこともあるのではないでしょうか。
そのようなときは、一度プログラミングスクールの利用を検討してみるのも良いかもしれません。
プログラミングスクールは高額な受講料がネックになることも多いですが、中には良心的な料金でWeb制作スキルを支援してくれるスクールもあります。
ご興味のある方は、以下の記事をご覧になってみて下さい。
