Web プログラマになる

:: be web programmer ::

スタイルを書く場所その２

スタイルを書く場所の２つ目は、css ファイルの中です。

css ファイルを作成し、その中にスタイルを書いていきます。

≪sample01.css≫

h2 {
  color: #000099;
  font-size: 120%;
}

p {
  font-size: 90%;
}

ページ間でスタイルを共有する場合は、この書き方を使用します。

対象の HTML ファイルには、css ファイルを読み込ませるための <link> タグを追加します。

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

css ファイルの場所は、href 属性に指定します。
相対パスだけでなく、絶対パスで指定することもできます。

絶対パス    … href="http://sample.always-pg.com/sample01.css"
相対パス(1) … href="sample01.css"
相対パス(2) … href="../sample01.css"

<link> タグは、head 要素内に書きます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>３つの言語 その２　CSS</title>
  <link rel="stylesheet" type="text/css" href="sample01.css">
 </head>
 <body>
  <h2>３つの言語 その２　CSS</h2>
  <p>
   見た目やデザインは、スタイルシート（CSS）の役目です。<br>
   スタイルシートを使うと、文字の色や大きさを自由に
   変えることができます。
  </p>
 </body>
</html>

●複数の css ファイル

css ファイルは、複数指定できます。

≪sample02.css≫

body {
  background-color: #FFFFFF;
  margin: 0px;
  padding: 0px;
}

h2 {
  font-size: 140%;
}

css ファイルを一つ増やすごとに、<link> タグを一つ追加します。

 <head>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>３つの言語 その２　CSS</title>
  <link rel="stylesheet" type="text/css" href="sample01.css">
  <link rel="stylesheet" type="text/css" href="sample02.css">
 </head>

この場合は、２つのファイルのスタイルが適用されます。

なお、競合している h2 要素は上書きされます。

sample01.css                sample02.css      
h2 {                        h2 {
  color: #000099;   上書き
  font-size: 120%;    ←      font-size: 140%;
}                           }


▽適用されるスタイル
h2 {
  color: #000099;
  font-size: 140%;
}

このように、同じ要素のスタイルがある場合は、後に書いたファイルのスタイルで上書きされます。

●スタイルの上書きを防止する

上書きされるスタイルは、<link> タグの順序によって変わります。

そのため、新しい <link> タグを追加すると、上書きされる順序が変わって予期しないスタイルで表示されることがあります。

これを防止するには、最優先のスタイルに「 !important 」を指定します。

≪sample01.css≫

h2 {
  color: #000099;
  font-size: 120% !important;
}

この場合は、h2 要素のフォントサイズが必ず 120% で表示されるようになります。
（ sample02.css の影響を受けません）

Web プログラマになる最初のページへ

このページの一番上へ