「CSSを外部ファイルで読み込む」の意味とは?【最も一般的です】

「CSSを外部ファイルで読み込む」ってどういう意味ですか?「外部」って言うからには、例えば別のサーバーから読み込むとか、そういう感じですか?

 

こんな質問に答えます。

 

結論、「外部ファイル」とはテーマの「style.css」のことです。

 

CSSの基本知識として覚えておくと必ず役に立ちますので、ぜひ読み進めてみてください。

 

 

「CSSを外部ファイルで読み込む」の意味とは?【最も一般的です】

CSSの書き方は3つある

 

CSSの書き方は下記のとおり、3パターンあります。

 

  1. 外部ファイル(style.css)にCSSを書いて読み込む方法
  2. HTMLファイル内に直接書く
  3. HTMLタグ内に書く(インライン)

 

順番に見ていきましょう。

 

外部ファイル(style.css)にCSSを書いて読み込む方法

 

最も一般的な方法です。

 

「外部」と聞くと、何だか自分のサーバー以外からリンクを介して読み込む的な感じに聞こえますが、そんなことはありません。

 

記事を構成しているHTMLファイルとは別のファイルからCSSを読み込むから、「外部ファイル」という表現がされているだけです。

 

WordPressでテーマを使っている方ならご存じだと思いますが、テーマの中に「style.css」というファイルがありますよね?

 

サイトやコンテンツのデザインを変えたいとなった時、「style.css」にCSSを書いてサイトに適用させようとするはずですが、それが正に「外部ファイルからCSSを読み込む」方法です。

 

外部ファイル(style.css)からcssを読み込ませるメリットは何と言っても、複数のHTMLファイル(複数のコンテンツ)に対して共通のCSSを適用できることです。

 

1つ1つのコンテンツに対して個別にCSSを書く必要がないので、手間がかからないし管理も楽です。だから一般的に使われているんですね。

 

HTMLファイル内に直接書く方法

 

HTMLファイルのheadタグ内に「<style>~<style>」を書いて、その中にcssを書く方法です。

 

方法①では複数のHTMLファイルに対して共通のCSSを適用できるのが最大のメリットでしたが、反対に言えば「個別のコンテンツのデザインだけを自由に変えられない」のがデメリットです。

 

それを可能にするのが、HTMLファイル内に直接CSSを書いて適用させる方法です。ページに特化したCSSを書けるのがこの方法のメリットです。

 

方法①と②は併用させることができるので、「style.css」で共通のCSSを適用させて、個別にデザインを変えたい時はHTMLファイルに直接CSSを書けば柔軟に対応できますね。

 

WordPressにはHTMLファイルがない?
WordPressにおいては、HTMLファイルというものは存在せず、PHPファイルがそれに該当します。

 

HTMLタグ内に書く方法(インライン)

 

方法③は、HTMLタグ内にCSSを書く方法で、「インラインにCSSを書く」とも言います。

 

コンテンツの文章というのはHTMLタグを使って書かれていますが、そのタグの中に「<style>~<style>」を書いて、その中にCSSを書いていく方法です。

 

普段ブログなどで頻繁に記事を書いている人なら、最も馴染みのある方法ではないでしょうか。

 

太文字にしたり下線を引いたりして文字を装飾していると思いますが、それが正に「インラインでCSSを書く」方法です。

 

インラインCSSの最大のメリットは「超個別にCSSを適用できるので小回りが効く」という点ですが、反対に言うと「超個別にCSSを書かないといけないので手間がかかる」ことがデメリットですね。

 

また、リライトなどで後からまとめてデザインを変更したいってなった時、インラインCSSで書いていると非常に面倒くさいのもデメリットとして挙げられます。

 

インラインCSSを書く上では、Advanced Editor Tools (previously TinyMCE Advanced) というプラグインを使用すれば、ショートコードを押すだけでCSSを書けるので便利です。

 

CSSが適用される優先順位

 

CSSの書き方は、

 

  1. style.cssに書いて読み込む
  2. HTMLファイル内に書く
  3. HTMLタグ内に書く

 

の3パターンあると解説しましたが、この内どれが最も優先順位が高いのでしょうか?

 

答えは以下のとおり。

 

  1. HTMLタグ内に書く
  2. HTMLファイル内に書く
  3. style.cssに書いて読み込む

 

インラインCSSが最も優先順位が高く、style.cssが最も優先順位が低いのです。

 

「HTMLタグに最も近い場所に書いたCSSが優先される」と覚えておきましょう。

 

 

まとめ

 

  1. 外部ファイルとはテーマの「style.css」のことで、最も一般的な方法
  2. 「style.css」で書かれたCSSは、3つの方法の内、最も優先順位が低い

 

ちなみに、もしHTMLとCSSをプログラミング言語だと思っているとしたら、HTMLとCSSはプログラミング言語ではありません【じゃあ何?】 | リュウセイブログを読んでおいてください。

 

それでは、ここまで読んでいただきありがとうございました。

チャオ(・∀・)

 

PS.
記事が参考になったら、ぜひRSS登録お願いします!毎日更新しているので、RSSとの相性バツグンですよ(・∀・)♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です