簡単な組込み方の例。

前のページ「スタイルシートの組み込み方。」の(3)の、「外部CSSファイル」 を利用すると、色々な場面で便利な組込み方が出来ますので例示します。

  1. 準備。 「外部CSSファイル」を作ります。
  2. 300px × 100px の段落<p>を作ってみる。
  3. 今作った段落<p>に背景色(ベージュ)をつけてみる。
  4. 段落の中の文字を太字にして 色(青)を付けてみる。
  5. 全部の要素を一まとめにした「size-2」を適用してみる。
  6. 上の段落の中の文字列の内、“ 段落 ”だけを赤色にします。

(1)準備。 「外部CSSファイル」を作ります。

「メモ帳」などのテキスト・ソフトで、次のような「クラスセレクター集」 を作り、名前(例えば、 benri.css )を付けて「style」フォルダの中に保存します。
 (「ファイルの種類」を「すべてのファイル」にして、拡張子“.cssを付けて「保存」)

.size-1 {
  width: 280px; /*--- 横幅 ---*/
  height: 80px; /*--- 高さ ---*/
  border: solid 1px #999999; /*--- 枠線 ---*/
  padding: 10px;  /* 内部の余白 */
  text-align: center;   /*--- 文字表示・中央 ---*/
  margin: 0px auto; /*--- 横位置・中央 ---*/
}

.size-2 {
  width: 280px;   /*--- 横幅 ---*/
  height: 80px;   /*--- 高さ ---*/
  border-top: solid 1px #999999;  /*--- 枠線・上・実線 ---*/
  border-right: solid 2px #0000ff;  /*--- 枠線・右・実線 ---*/
  border-bottom: dashed 3px #999999;  /*--- 枠線・下・破線 ---*/
  border-left: double 6px #ff0000;  /*--- 枠線・左・二重線 ---*/
  padding: 10px;   /*--- 内部の余白 ---*/
  background-color: #ffeecc;   /*--- 背景色 ---*/
  font-weight: bold;  /*--- 文字・太字 ---*/
  color: #0000ff;   /*--- 文字色・青 ---*/
  text-align: center;   /*--- 文字表示・中央 ---*/
  margin: 0px auto; /*--- 横位置・中央 ---*/
}

.bg-h { background-color: #ffffff; } /*--- 背景色・白 ---*/
.bg-bu { background-color: #ccffff; } /*--- 背景色・空色 ---*/
.bg-bj { background-color: #ffeecc; } /*--- 背景色・ベージュ ---*/
.B { font-weight: bold; } /*--- 文字・太字 ---*/
.black { color: #000000; } /*--- 文字色・黒 ---*/
.blue { color: #0000ff; } /*--- 文字色・青 ---*/
.red { color: #ff0000; } /*--- 文字色・赤 ---*/
.blue-B {
  font-weight: bold; /*--- 文字・太字 ---*/
  color: #0000ff; /*--- 文字色・青 ---*/
}
.red-B {
  font-weight: bold; /*--- 文字・太字 ---*/
  color: #ff0000; /*--- 文字色・赤 ---*/
}

 ⁄*--- ◎◎◎ ---*⁄ は“コメント”で、styleとしての動作はしません。)

次に、ページのソースの<head>と</head>の間に、次のように書き込んで  「外部スタイルシート」 を読み込みます。

<head>
・・・・・
<title>簡単な組込み例</title>
<link rel="stylesheet" href="style/benri.css" type="text/css">
</head>
ページトップへ戻る

(2) 300px × 100px の段落<p>を作ってみる。

<p>の中にクラスセレクター 「class="size-1"」 を書き込む。

<p class="size-1">300×100の段落<p>です。</p>

↓ 表示

300×100の段落<p>です。

ページトップへ戻る

(3) 今作った段落<p>に背景色(ベージュ)をつけてみる。

<p>の中の「class="size-1"」に「 bg-bj」を追加する。

<p class="size-1 bg-bj">300×100の段落<p>です。</p>

↓ 表示

300×100の段落<p>です。

(4) 段落の中の文字を太字にして 色(青)を付けてみる。

<p>の中の「class="size-1 bg-bj"」に「 B blue」を追加する。

<p class="size-1 bg-bj B blue">300×100の段落<p>です。</p>

↓ 表示

300×100の段落<p>です。

上の段落に設定されているスタイル(クラス)は「size-1」〜「blue」の4つの 要素を含んでいますが、若し使用頻度が高いようならば、「size-1」の中に一まとめにした方が、 簡略になって入力も楽でスッキリします。( (1)の外部スタイルシートの「size-2」を参照。

ページトップへ戻る

(5) 全部の要素を一まとめにした「size-2」を適用してみる。

(2)(3)(4)の要素を統一し、更に枠線のスタイルを上下左右で別々にして います。
 この「size-2」を次のように書き込みます。

<p class="size-2">300×100の段落<p>です。</p>

↓ 表示

300×100の段落<p>です。

(6) 上の段落の中の文字列の内、“ 段落 ”だけを赤色にします。

この場合は「インライン要素」である文字列の中の、「特定の文字」にだけ 適用したいので、その文字に“インライン用の範囲指定要素”「<span>」を使用して、 スタイルを適用します。

<p class="size-2">
  300×100の<span class="red-B">段落</span><p>です。</p>

↓表示

300×100の段落<p>です。

次ページ → 参考サイト

ページトップへ戻る