「HTMLとCSSの読み込む方法がわからない」
「CSSがうまく反映されない…」
初心者の方で、
HTMLとCSSファイルの適切な読み込み方がわからない…という人は多いと思います。
- CSSファイルを読み込む方法って？
- 適切なCSSファイルの読み込み方法って何？
- CSSが読み込めなくて困っている…
そんな悩みを解決できる記事を用意しました。
目次
HTMLとCSSの読み込み方は？
Webサイトの制作では、「HTMLファイル」と「CSSファイル」が必要です。
厳密に言えば、HTMLだけでもWebサイトの制作はできますが、CSSを使わないと、サイトの見え方を指定できないといった感じです。
HTMLとCSSの読み込み方を解説する前に、
HTMLとCSSそれぞれについての基礎知識を学習しておきたい！という方は、下記の記事を参考にしてください。
では、CSSファイルを読み込む方法を詳しく解説していきます。
HTMLとCSSファイルの読み込み方法：リンクする方法
まず、CSSファイルを読み込む方法は下記の3つがあります。
- HTMLファイルにCSSファイルを読み込ませる
- HTMLファイルに＜style＞タグを用いてCSSを記述する
- HTMLファイルのタグ要素に直接記述する（＜style=”○○○”＞）
外部ファイルとリンクする方法
この方法は、別々のファイルとして作った「HTMLファイル」と「CSSファイル」を、リンクでつなげる方法です。
- HTML･･･ index.html
- CSS･･･ style.css
下記のように、HTMLファイルとCSSファイルが、同じフォルダの中に存在するとします。
上記の場合の、HTMLファイルとCSSファイルをリンクさせる方法は簡単で、「HTMLファイルに、1行のコードを追加する。」だけです。
<link rel="stylesheet" href="style.css">上記のコードを、HTMLファイルの＜head＞タグ内に、挿入します。
コードを入れると、CSSファイルが読み込まれ、HTMLにCSSの装飾が適用されるようになります。
このように、外部で作ったCSSファイルを読み込む際には、リンクコードを記載しますが、この時に注意すべきなのが「相対パス」です。
次章で詳しく解説していきます。
相対パスでCSSファイルを読み込む方法
相対パスとは、現在のファイル場所を基準とし、読み込むファイルがどこにあるのかを伝える方法です。
具体的に言うと、HTMLファイルが保存されている場所から、読み込むCSSファイルがどこにあるのか。という経路を示したものが「相対パス」です。
相対パスの指定方法
相対パスの指定の仕方は、
<link rel = “stylesheet” href = “フォルダ名/ファイル名”>仮に、下記のフォルダの場合の、相対パスを見てみましょう。
HTMLファイルから見ると、CSSファイルは、「CSSフォルダ」という1階層上に保存されていることがわかります。
その場合、コードの書き方は下記になります。
「css/style.css」という部分ですね。
「cssフォルダの中の、style.cssファイル」ということです。
<link rel = “stylesheet” href = “css/style.css”>
このように、HTMLファイルの場所を基準として、相対パスを使ってCSSファイルを読み込みます。
これが、「リンクでCSSファイルを読み込む方法」です。
次に、HTMLにCSSを書く方法を解説していきます。
HTMLとCSSの読み込み方法：HTMLにCSSを書く方法
先ほどのリンクと違い、HTMLに直接CSSを書く方法もあります。
その方法は、大きく2通りあります。
- HTMLファイルにstyleタグを使ってCSSを記述する
- HTMLファイルのタグ要素に直接記述する
それぞれ詳しく解説していきます。
HTMLファイルにstyleタグを用いてCSSを記述する
HTMLの＜head＞タグの中に＜style＞タグを書き、その中にCSSを記述していく方法です。
HTMLファイルに、直接CSSを記述するには、下記のように指定します。
上記のように、CSSを記述します。
これをブラウザでチェックするとこのようになります。
外部CSSを読み込んだ場合は、複数のページに対してデザインをしやすいというメリットがありますが、今回ご説明した「HTMLファイルにstyleタグを用いてCSSを記述する」方法では、1ページごとにデザインを調整できるという利便性もあります。
あ、もう1つご紹介していないCSSの書き方がありました！
HTMLとCSSの読み込み方法：インラインにCSSを書く方法
HTMLのタグに直接CSSを記述するには、下記のように指定します。
上記のように記述すると、下記のようにブラウザで表示されます。
先ほどの＜style＞タグとは違い、インラインに記述することで、HTMLタグにピンポイントでデザインを適用することができます。そのため、細かい調整がしやすいです。
CSSが読み込まれる優先順位
これまで紹介した、CSSを読み込む3つの方法ですが、
実は、CSSは書き方によって、適用される優先順位が決まっています。
- HTMLタグに直接記述する：インライン
- HTMLファイルに＜style＞タグを用いてCSSを記述する
- HTMLファイルにCSSファイルを読み込ませる
上記の順番に、優先してCSSは読み込まれます。
下記のように、CSSを指定して、どれが優先されるのかを確認してみましょう。
- ＜style＞タグでは、青色を指定
- インラインでは、赤色を指定
- style.cssでは、緑色を指定
上記の場合、みなさんは、文字が何色になるかわかりますか？
CSSの優先順位が理解できているのならば、検討はつくかと思います。
そう……
答えは、インラインに記述した「赤色」ですね。
優先順位を理解していないと、「あれ？CSSを指定したのに反映されない」ということもあり得ますので、
CSSは書き方によって、優先順位があるということを覚えておきましょう。
CSSの最適な読み込み方法
CSSの読み込みの優先度が低く、ミスが最も起こりにくい。
複数のHTMLファイルに対して、CSSを記述できる。
このことから、「外部CSSファイル」を使うのが最適な方法といえます。
リンクでCSSを読み込む方法は、一般的な方法として多く使われています。
「あれ…？リンクでCSSを読み込む方法ってなんだっけ……」
という方は、もう一度下記を確認してみてくださいね。
HTMLとCSSの読み込み：まとめ
CSSを読み込む方法をご紹介していきました。
最後に、もう一度まとめておきましょう。
CSSの読み込み方法は下記のとおり。
- HTMLファイルにCSSファイルを読み込ませる
- HTMLファイルに＜style＞タグを用いてCSSを記述する
- HTMLファイルのタグ要素に直接記述する（＜style=”○○○”＞）
そして、CSSの読み込みには、優先順位があるということでしたね。
- HTMタグに直接記述する：インライン
- HTMLファイルに＜style＞タグを用いてCSSを記述する
- HTMLファイルにCSSファイルを読み込ませる
これらのCSSのルールに基づいて、HTMLとCSSでコーディングをしていきましょう。
