こんにちは。ITベンチャー企業でWebエンジニアをしている雅です。
HTMLやCSSを学び始めると、まずstylesheetをHTML文書に読み込ませることから始めますよね！
ですが、
「手順通りにやっても読み込まれない！」
このような悩みを抱いたことはありませんか？
そこで今回は
・うまく読み込めない時の対処法
を徹底解説をしていきます！
目次
stylesheetとは
stylesheetとは、HTML文書をデザインするためのものです。HTML文書だけでは色をつけたりデザインすることはできないので、通常はCascading Style Sheet(カスケーディング・スタイル・シート)というものを使用し、HTML文書をデザインします。
お気づきの方もいるかと思いますが、このCascading Style Sheetを略したものがCSSになります。
stylesheetの指定方法
stylesheetを適用するには、実は複数のパターンがあります。
今回は各パターンごとの記述方法を細かく解説していきます！
タグに直接記述する(インライン)
まずは一番シンプルな書き方のタグに直接記述する方法を紹介します。
この方法は通称インライン方式ともいい、HTMLタグにstyle属性を与え、その中にCSSプロパティを書いていくという仕様になります。
|
1 |
<p style="color: red;">今日は<span style="font-size: 25px;">晴</span>です。</p> |
非常にシンプルですね。
次は同じタグに複数のCSSを記述した場合のサンプルコードもみていきましょう。
|
1 |
<p style="color: red; font-size: 16px; margin-top:5px;">今日は<span style="font-size: 20px;">晴</span>です。</p> |
上のコードのように、「 ; (セミコロン)」で区切ることによって続けてCSSプロパティを書くことができます。
ただデメリットとしては、適用するCSSプロパティが多くなると横に長くなってしまい見辛くなってしまうという点があります。
styleタグ内に記述する
続いて、styleタグの中にCSSを書いて適用させる方法を解説します。
こちらは通称内部スタイルシートと呼ばれます。
HTMLには、CSSを書くためのstyleタグというタグが用意されているのですが、そのstyleタグの中に書いていくという方法です。
その際、styleタグはHTML内のheadタグの中に書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- head内の<style></style>に記述 --> <style> .container { width: 100%; height: 100%; } </style> </head> <body> </body> </html> |
インラインで書く時よりも、HTMLとCSSを分離できて見やすくなりましたね！
内部スタイルシートを用いると、仮に一つの要素に指定するCSSプロパティが多くなっても改行で綺麗に整えることができます。
ですが内部スタイルシートにもデメリットがあり、HTMLやCSSの記述量が多くなればなるほどファイル内で上下に行ったり来たりする移動量が増えてしまいます。
CSSファイルに記述する
続いてcssファイルに記述して、それをHTMLに読み込ませて適用させる方法です。
こちらは先の内部スタイルシートに対して、外部スタイルシートと呼ばれ、現在の開発現場では100%といっていいほど使用されている一番メジャーなCSSの読み込み方法になります。
外部スタイルシートは拡張子「.css」のファイルで、headタグ内にlinkタグを設置することによって読み込みます。
linkタグは他のファイルとの関連性を示すタグで、
・href属性：読み込むファイル名
を記述します。スタイルシートを読み込む時はrel属性に「stylesheet」と記載します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- head内に読み込む --> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> |
またファイルの名前は慣習上よく「style.css」というファイル名にすることが多いです。
HTML文書によく「index.html」と付けるのと同じですね！
HTMLに読み込ませるなら結局どれがいいの？
ここまでスタイルシートを読み込むための3パターンの方法を解説してきましたが、結局はどれがいいのってなりますよね？
それは断然、
です。
理由としては、現場で使っているからということはもちろんなのですが、
そもそもHTMLやCSSなどのWeb技術の標準化を行っているW3Cという団体は、「HTMLとCSSは混在しない方が望ましい」と言っています。
こういった内容を受け、開発現場ではHTMLは「.html」、CSSは「.css」ときちんとファイルで分離する習慣になっています。
HTMLにCSSが反映されない時は
徐々にHTMLやCSSコーディングに慣れ始めてさぁ自分で開発をしようと思ってCSSをHTMLのheadに読み込んだはいいけど、
なんてことありますよね。
今回は初学者にありがちなCSSが反映されない原因を2つ紹介します。
もし自分のCSSが反映されていないなと感じたら以下の点を再度チェックしてみてください！
セレクタの名前が間違っている
CSSを指定するには通常、クラス名やid名などを指定しますが、CSSではこれらをセレクタと呼びます。
CSSが反映されない原因としてあげられるミスの一つとして、このセレクタの指定ミスが挙げられます。
いわばスペルミスです。クラス名が長くなってくるとこういったミスが出てきやすいです。
それに加え、「 _ (アンダースコア)」や「 – (ハイフン)」も区別する対象になりますので、これらは注意深くみておきましょう。
無償または有償で配布しているAtomやVSCodeなどのエディタを使用している方はエディタの補完機能があるのでこれらのミスがあった時点でエディタが教えてくれるのですが、注意は必要です。
CSSファイルのパスが違う
これはスペルミス以前に発生する問題です。
クラス名とかid名もしっかり合ってるのにCSSが反映されないなぁと思ったら大体コレです。
パスというのはファイルの住所だと思ってください。
私たち人間も、年賀状を送った時に相手の住所が間違っていたら年賀状は届きませんよね。ファイルも同じです。
パスの指定ミスが考えられる場合はindex.htmlとcssファイルの位置関係をもう一度見直しましょう。
まとめ
いかがでしたか？
今回はstylesheetをHTMLに読み込ませる方法から読み込まれない時の対処法までを解説しました。
外部スタイルシート方式でCSSを読み込ませる場合、初学者の方はパスの指定ミスが非常に多いので「あれ？反映されないな」と思ったらまずパスを再確認してみましょう！
