スタイルシートの組み込み方。

例えば<table>は「HPビルダー」の「表の挿入」で“骨組みだけ”を作り、装飾的な編集は すべて「CSS」で行います。
「CSS」を利用するためには、何らかの方法でページの中に「スタイルシート」 を組み込む必要があります。

  1. スタイルシートの組み込み方法は大きく分けて3種類
    1. (1)スタイルを適用したい【タグ要素】の中に書き込む。
    2. (2)そのページの<head></head>の中に書き込む。
    3. (3)外部CSSファイル(拡張子:.css)をページの<head></head>内に読み込む。
  2. 3つの組み込み方法の比較。

スタイルシートの組み込み方法は大きく分けて3種類あります。

(1)スタイルを適用したい【タグ要素】の中に書き込む。

例えば、或る表の特定のセルに背景色をつけるような場合、

<tr>
  <td>このセルは背景色ナシ。</td>
  <td style="background-color:#999999">このセルはグレーの背景色。</td>
  <td>このセルは背景色ナシ。</td>
</tr>

というように書きます。

(↓のように表示される。)

このセルは背景色ナシ。このセルはグレーの背景色。このセルは背景色ナシ。

ページトップへ戻る
(2)そのページの<head></head>の中に書き込む。

<! - - *** - - >(非表示タグ)を使って、 “非表示の命令”として書き込みます。
  ( 下の「. * * {   }」は “クラスセレクター” と云います。)

<head>
  <meta ・・・・・>
  <meta ・・・・・>
  <title>CSSの組み込み方</title>
  <style type="text/css">
  <!--
   .bg {background-color:#999999;}
   -->
  </style>
</head>

HTMLソースの表の中の、背景色をつけたいセルの(<td>)の中に、
  上の 「クラス・セレクター class="bg" 」 を書き込みます。


<tr>
  <td>このセルは背景色ナシ。</td>
  <td class="bg">このセルはグレーの背景色。</td>
  <td>このセルは背景色ナシ。</td>
</tr>

(↓のように表示される。)

このセルは背景色ナシ。このセルはグレーの背景色。このセルは背景色ナシ。

ページトップへ戻る
(3)外部CSSファイル(拡張子:.css)をページの<head></head>内に読み込む。

先ず、「メモ帳」などで

body {
  font-size: 100%;
  text-align: center;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
     Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  color: #773333;
  background-color: #dddddd;
 }

.bg {background-color: #999999;}

などとスタイルの内容を記述し、適当な名前をつけて拡張子を“.css”にして
「サイト・フォルダー」 の中の「style」フォルダーの中に「保存」します。
 (たとえば、「rensyuu_1.css」)

次に、ページのソースの<head></head>の中に

<head>
・・・・・
<title>CSSの組み込み方</title>
<link rel="stylesheet" href="style/rensyuu_1.css" type="text/css">
</head>

と書き込んで、「style」フォルダーの中の外部スタイルシート「rensyuu_1.css」を読み込みます。
HTMLソースへの適用(記入)のしかたは(2)の場合と同じで、表示も同じです。


ページトップへ戻る

3つの組み込み方法の比較。

(1)のタグへの直接記入は、
  1. 「必要になったとき」に「必要な場所だけ」に適用出来る。
  2. 将来、変更する必要が生じたときは、ページ毎に再編集が必要
  3. (2)(3)より優先的に適用される。
(2)の<head>内への直接記入は、
  1. “classセレクター”の利用と併用すれば、ページ内の複数個所に簡単に適用できる。
  2. 変更する必要が生じたときも、“スタイル”の再編集のみでよい。
  3. 適用される範囲は、そのページだけなので、ページ毎にスタイルの記入が必要
  4. 「コピー・貼り付け」で適用ページを増やすことは出来るが、
    若し、変更の 必要が生じたら、全ページの変更が必要になる。
(3)の外部スタイルシートは、
  1. 予め「外部ファイル」を準備する必要はあるが、「用途別」にファイルを分けて
    作ったりなど、きめ細かい処理が可能。
  2. 変更する必要が生じたときも、外部スタイルシートの再編集だけで済む。
  3. 例えば、全ページの背景壁紙を変更したい時でも、
    外部スタイルシートの「1行変更」 だけでOK。

次のページ → 簡単な組込み例

ページトップへ戻る