CSSの外部参照・内部参照・インラインの書き方

CSSを使うことでサイトデザインや修正作業が非常に楽になりました。HTMLを修正する必要はなく、たとえばh1に対して外部CSSでデザインしていた場合、CSSの一部を修正するだけで全てのページのh1のデザインを変えることができます。

ただ、それはCSSを外部参照にしているケースで、内部参照やインラインにしている場合、一つ一つ修正して行かなければなりません。どの書き方でも構わないのですが、個人的には後で修正する時の事を考えて外部参照にしておいた方が良いと思っています。

  • 外部参照・・・CSSファイルを外部化
  • 内部参照・・・CSSをhead内に記述
  • インライン・・・CSSをタグ内に記述

簡単に説明するとそれぞれの違いはこのようになります。WordPressのテーマは基本的にはCSSが外部ファイル化されているはずです。

なお、外部参照、内部参照、インラインを全て使うことも可能で、CSSは後から記述された物が優先される性質があるため、「インライン>内部参照>外部参照」という図式になります。

外部参照のやり方

外部参照では、CSSファイルを作成し、そのファイルにCSSを記述し、そのCSSを参照するための記述を各ページのhead内に行います。

CSSファイルサンプル

冒頭に文字エンコードを記述し、続けて主要部分のCSSを書いていきます。1つのCSSファイルに全て書いても良いですし、複数のCSSを用意しても構いません。

<link rel="stylesheet" href="URL/style.css" type="text/css" />

CSSファイルを作成したら、そのファイルを参照するために、このようにhead内に記述します。hrefの部分にCSSファイルのURLを記述します。

複数のCSSファイルがある場合は、全てのCSSファイル用のタグを追加しても良いのですが、CSSファイル参照用のCSSファイルを作成する方法もあります。

CSSファイルサンプル

@import "cssファイル名";

このような形で複数のCSSを記述するCSSファイルを用意します。

そして、CSSをまとめたCSSファイルのURLをページのheadに記述すれば、全てのCSSファイルが適用された状態になります。このやり方のメリットは、たとえばデザインレイアウトに崩れが出た時に、特定のCSSファイルだけ適用させないでどうなるのかチェックする事ができます。

内部参照のやり方

内部参照では、そのページに適用するCSSをhead内に記述します。CSSは、当然そのページにしか反映されません。

<style type="text/css">
p {
   font-size: 20px;
  color: red
}
a:link {
    color: #666;
    }
</style>

このように、styleタグの中に指定するCSSを書いていきます。ページごとに異なるCSS設定を行うことができますが、修正はページごとに行うので手間になります。WordPressサイトの場合には、single.phpとpage.phpで分けて書くということも可能です。

インラインのやり方

インラインはCSSが外部ファイル化できない場合や、headが変更できない無料ブログなどのデザイン修正でも利用できる方法です。

<p style="color:red;">ここの文字が赤くなる</p>
<p style="font-size:18px;color:#f00;">フォントサイズが18pxで赤文字で書く</p>

このように、一つ一つのタグに対してCSSを指定していきます。作業としてはかなり面倒で修正する場合でも一つ一つ修正する必要があり、なおかつHTMLが汚くなりますので、あまりオススメの方法ではありませんが、他の方法が選択できない場合には、インラインで書くしかありません。

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ