ケケンタこんにちは！ ケケンタです。
今回はHTMLにCSSを読み込む方法を３つ解説していきます！
- CSSをHTMLファイルに直接書き込む方法
- CSSファイルをHTMLファイルに読み込む方法（＝外部ファイル読み込み）
- それぞれの読み込み方法のメリット・デメリット
ケケンタWeb制作の副業にご興味のある方には以下の記事もおすすめです。
＼Web制作を仕事にしたいなら／
こちらの記事で
Web制作コース独学プラン
についてご紹介しています。
￣￣￣
日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる
最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る
※ご注文の時間帯やお住まいの地域によります。
Amazonプライムの無料体験は「何度でも」利用可能
Amazonプライムの無料体験を何度も利用する方法
- Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
- 会員の自動更新を解除しておく＝期限が来たら自動解約
- １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される
ケケンタ僕自身、過去に少なくとも３回は無料体験を利用しています。
※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。
そもそもCSSとは
CSSとは、HTMLで記述された文書を装飾するための言語です。
HTMLだけで記述された文書は、見た目が非常に簡素で味気ないものですが、そこに様々な色や装飾を施すために使用するのがCSSです。
わかりやすく言うと
- HTMLだけで作成されたサイト
-
食材をただザックリ切ってお皿に並べただけの料理（もはや料理と言えませんね……）
- CSSを適用したサイト
-
食材に多様な加熱処理や味付けを施し、いろどりも考えてお皿に盛りつけられた料理
と言った具合です。
Web上に公開されているサイトでCSSが使用されていないというのはほぼ100％あり得ないほど、WebサイトにおいてCSSを欠かすことはできません。もちろん、本ブログでもCSSはふんだんに使用しています。（正確にはWordpressという便利なサイト制作ツールを使用しているため、自分ではほとんどCSSは記述していません。）
ケケンタCSSはHTMLで記述された文書を装飾するための言語です！
CSSを読み込む方法
CSSをHTMLに読み込む方法は大きく３つあります。
- HTMLタグ内にstyle属性として記述する方法
- HTMLファイルのheadタグ内にstyleタグで直接記述する方法
- HTMLファイルに外部ファイルとして読み込む方法
それでは、順番に解説をしていくので一緒に見ていきましょう！
……が、その前に補足として、
この中では３つ目の「HTMLファイルに外部ファイルとして読み込む方法」がもっとも主流であり、他２つの方法は恐らく実際の現場ではほとんど使用されていないかと思われます。
その点を踏まえた上で、各方法のメリット・デメリットをきちんと理解しながら読み進めて頂ければと思います。
HTMLタグ内にstyle属性として記述する方法
style属性を記述していないタグ
<p>style属性を記述していないタグ</p>style属性を記述し、その中にCSSを書いたタグ
<p style="color: red; font-weight: bold;">style属性を記述し、CSSを適用したタグ</p>前者ではごく普通のテキストが表示され、後者では赤文字でかつ太字のテキストが表示されます。
解説
style属性の中にcolor、font-weightの記載があります。
これらはそれぞれ
- color＝文字色
- font-weight＝文字の太さ
を指定するためのCSSプロパティです。
今回は、
「color:red;」とすることで赤文字に、
「font-weight:bold;」とすることで太字に設定しています。
このようにHTMLタグ内にstyle属性を記述し、その中にCSSを直接書くことが可能です。
メリット・デメリット
前述したように、この方法をメインとして使用する可能性は非常に低いかと思われます。
HTMLタグ内にstyle属性を記述して使用する可能性が低い理由
メンテナンス性・可読性（コードの読みやすさ）の低さ
本記事の趣旨からかなり外れた内容となってしまうため詳しく説明することは控えますが、メンテナンス性・可読性、２つの性質を高めることはサイト作成において非常に重要な要素の１つです。
例外的に使用する場合もあるとは思うため知っていて無駄になることはありませんが、デメリットを理解した上で使用するようにしましょう。
ケケンタHTML/CSSに限らず、プログラミングでは可読性・メンテナンス性が高いコードを書けることは大事なスキルの１つです！
HTMLファイルのheadタグ内にstyleタグで直接記述する方法
headタグ内にstyleタグでCSSを記述するとこのようになります。
<head>
……前略……
<style>
p {
color: red;
font-weight: bold;
}
</style>
……後略……
</head>解説
ここで登場してくるheadタグとは、ザックリ説明すると、Webサイトにおける各種設定内容やファイル読み込みのための記述をする場所です。
HTMLはブラウザ上にテキストや画像などを表示することができるマークアップ言語ですが、headタグに記述された設定内容は、表示の為ではなく、裏側に必要な情報周りで使われています。
headタグ内にstyleタグを記述し、その中にCSSを書くことで、そのファイル内のHTMLにのみCSSを適用させることが可能です。
上記の例でも、
- color（文字色の指定）
- font-weight（文字の太さ）
を例として使用しています。
ケケンタheadタグには色々な情報を書くことが可能ですが、その内の１つがCSSなのです。
メリット・デメリット
メリット
headタグ内に直接CSSを記述することで、後述する「CSSファイルの読み込み」で必須となる外部ファイル作成も不要となるため、ファイル管理の観点でメリットとなります。
デメリット
一方、デメリットは、記述したファイルにしかCSSが適用されないことです。
例えば、ある同一のCSSを複数のHTMLファイルに適用したい場合、各HTMLファイルにstyleタグで記述する必要があるため、適用したいファイルの数だけ記述しなければならず、さらに修正が必要となった際に同様の数だけ手間がかかってしまいます。
通常はやはり、このあと説明する、CSSファイルを別途作成し、それを読み込んで使用する方法を採用するのがベストと言えます。
よって、headタグ内に直接記述する方法もあくまで補助知識として覚えておくとよいでしょう。
ケケンタこの読み込み方法は、つまりメンテナンス性が低下する要因の１つということです。使用する際はこの点をしっかり留意しましょう。
HTMLファイルに外部ファイルとして読み込む方法
CSSファイルを用意する
外部ファイルとして読み込む場合、前提としてCSSを別ファイルに記述しておく必要があります。
どういうことかと言うと、
例えば、HTMLファイルはindex.htmlのように、拡張子を「.html」として作成しているかと思います。
CSSも同じように個別のファイルとして作成することが可能で、そこにCSSを記述していくということです。
以下は「style.css」というファイル名で作成したCSSファイルの中身です。
style.css
p {
color: red;
font-weight: bold;
}このstyle.cssというファイルをHTMLファイルに読み込むことで、CSSを適用することが可能です。
上記の例で言えば
index.html内にstyle.cssを読み込むと、style.css内に記述されているCSSすべてがindex.html内のHTMLコードに適用されます。
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タグ内にstyle属性として記述する方法
- HTMLファイルのheadタグ内にstyleタグで直接記述する方法
- HTMLファイルに外部ファイルとして読み込む方法
それぞれメリット・デメリットはあるものの、通常は３番目のHTMLファイルに外部ファイルとして読み込む方法を使用すれば間違いありません。
これからも様々な知識・情報を発信していきますので、またどこかでお会いできれば光栄です。
ケケンタ最後までご覧いただきありがとうございました！
