[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ

スタイルシート・CSSを書いてみよう

CSSをどこに書けばいいのか? ~基本は外部スタイルシートで~

 スタイルシート(CSS)を書く場所は、大きく分けて以下の3つです。それぞれ部分的に書き方が異なります。

  1. タグ内部に書く場合
  2. <HEAD></HEAD>タグ内部に書く場合
  3. 外部スタイルシートで書く場合

 HTMLソースコードの見やすさや維持管理の手間を考えると、基本的には③の外部スタイルシートを使うようにして、個別のページで必要に応じて①や②の方法を取るのが良いでしょう。

① タグ内部に書く場合

 HTMLタグのスタイル属性としてスタイルシートを記述する方法があります。個別にデザインを指定したい場合に使います。複数のプロパティを記述する場合はセミコロンで区切ります。

② <head></head>タグ内部に書く場合

<head>タグ内にスタイル要素としてスタイルシートを記述することができます。赤字の部分の書き方は決まり事として覚えてしまいましょう。

③ 外部スタイルシートで書く場合

 拡張子を「.css」とした別のファイルにスタイルシート(=外部スタイルシート)を書いて、そのファイルを適用したいページの<head>タグ内から以下のようにリンクを張ります。ファイル名は自由に決められます(下のサンプルでは「sakura.css」。

スタイルシートには優先順位がある?!

  上で説明した①~③の方法には適用の優先順位があります。一番高いのは「①タグ内部」で、一番低いのは③外部スタイルシートです。例えば、外部スタイルシートを使っているけど、このページのこの部分だけ違うスタイルシートを適用したい場合に、一番優先順位が高い「①タグ内部」の記述方法が使えることになります。

サイトトップページへ戻る