2-2.応用

第2章　スタイルシートの書き方

2-2.スタイルシートの書式（応用）

HTML文書へのスタイルシートの別の設定方法を、下記の例で説明します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>STYLE SHEETS</TITLE>
    <META http-equiv="Content-Style-Type" content="text/css">
    <STYLE TYPE="text/css">
       BODY                { color: black ; background-color: pink ; }
       EM,BLOCKQUOTE.bgred { color: red   ; }
       P                   { margin-top : 0.4em ; }
       P.bgwhite           { background-color: white ;}
       .bgyellow           { background-color: yellow;}
    </STYLE>
  </HEAD>
  <BODY>
    <P>文字は黒、背景はピンク。<EM>斜体で赤文字</EM>
    <P class="bgwhite">文字は黒のままで背景が白になる
    <P>文字が黒から<span style="color:blue">青になり</span>黒に戻る
    <DIV class="bgyellow">
      <P>DIVで囲まれた要素の基本背景色は黄色に
      <P class="bgwhite">でもここのP要素は背景が白に
      <P>また背景色は黄色となる
    </DIV>
  </BODY>
</HTML>

以下、上のHTMLで出てきた順に説明します。

継承

スタイルシートの定義で継承の説明は難しいですね。難しい表現でいえば、「上位の要素での設定内容は下位の要素にも引き継がれる」ということでしょうか。

具体的にHTMLを例に説明すると、<BODY>と</BODY>の内容である要素の文字色と背景色は、BODY要素で定義したフォント色と背景色が設定されますよね。また、ブラウザが元々持っている要素の見栄えは、スタイルシートで再定義されるまで引き続き意味を持ち続けます。

例文の最初のP要素では、文字色はBODY要素で定義された黒が継承されており、EM要素のfont-styleはIEやNNのデフォルトのItalicが継承されています。

グループ化（Grouping）

スタイルシートの定義を簡略化する方法の一つにグループ化があります。グループ化は、次の例のようにセレクタ，セレクタとカンマで区切って並べます。

EM,BLOCKQUOTE.bgred { color: red   ; }

2つの例は同じものです。

EM               { color :red }
BLOCKQUOTE.bgred { color :red }

また、次の例のように、宣言を並列に並べることでスタイルを一括して定義することができます。

H1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt; 
  font-family: helvetica; 
}

次の例は、簡略化プロパティの例です。

H1 { font: bold 12pt/14pt helvetica }

２つの定義は同じものです。

H1 {
   font-weight: bold;
   font-size  : 12pt;
   line-height: 14pt;
   font-family: Helvetica;
}

クラスセレクタ(Class as selector)

要素を越えたきめこまかいスタイルを定義するために、HTML にCLASS属性が用意されています。クラスセレクタは、次のようにピリオド＋クラス名称で示し、要素.クラス名と、.クラス名の方法があります。

P.bgwhite     { background-color: white ;}
.bgyellow     { background-color: yellow;}

HTMLファイルでは、CLASS属性でこのスタイルを利用することができます。

<P class="bgwhite">文字は黒のままで背景が白になる</P>

クラス名には、英数しか使えないようです。IE4で確認しましたがアンダーバー'_'は使えませんでした。

IDセレクタ（ID as selector）

HTMLファイルでUniqueな値を持たせるために、HTMLではID属性が用意されています。IDセレクタは、次のように＃英数が用いられます。

#z98y { letter-spacing: 0.3em }

<P ID=z98y>Wide text</P>

IDセレクタは、HTMLファイル中で一つの名前のIDしかつけられません。

文脈セレクタ（Contextual selectors）

文脈セレクタは、たとえば、Blockquote要素の内容にあるP要素には、他のP要素とは異なるスタイルを採用させたいときなどに用います。使い方は、次の３つめの例のように、要素＋スペース＋要素とします。

EM            { color: red   }
BLOCKQUOTE    { color: black }
BLOCKQUOTE EM { color: blue  }

<P><EM>この文章の文字は赤になります。</EM></P>
<BLOCKQUOTE>
この部分の文字は黒色です。
<EM>この部分の文字色は文脈セレクタで定義した青になります。</EM>
</BLOCKQUOTE>

擬似クラスと擬似要素（Pseudo-classes and pseudo-elements）

Anchor擬似クラス

リンクに関する擬似クラスでCSS1では次の3種があります。

A:link    { color: red  }   /* 未訪問のリンク unvisited link */
A:visited { color: blue }   /* 訪問済みリンク visited links */
A:active  { color: lime }   /* 選択中のリンク active links */

擬似要素

説明するのは断念しました。m(__)m

インライン要素のスタイル定義

SPAN要素を用いることで、インライン要素としてスタイルを変更することが可能です。STYLE属性の値は、スタイルシートの基本で説明した”宣言”＝”プロパティ：値”が入ります。

<P>文字が黒から<span style="color:blue">青になり</span>黒に戻る

ブロック要素のスタイル定義

SPAN要素はインライン要素として用いるものでしたが、ブロック要素に対してはDIV要素を用います。

.bgyellow	{ background-color : yellow }

<DIV class="bgyellow">
<P>ここの文字の背景色は黄色になります</P>
</DIV>

さて、ブラウザでの実際の見え方はどうなっているでしょうか。次の２画像をご覧ください。微妙に効果が異なることがわかりますね。

チェックページ

ここでは説明しなかったもの

カスケード

スタイル定義が複数ある場合の順位づけをおこなうものですが、specificityを計算したりとなかなか難しいことをするようです。以下のような計算式を用いるようです。

計算式：「specificity」= (ID属性の数)*100 + (クラス属性の数)*10 + (要素名の数)*1

詳細はspecificityの原典を参照ください。

Indexに戻る ==== 前のページに戻る ==== 次のページへ

第2章 スタイルシートの書き方