中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

スタイルシートの検証は、The W3C CSS Validation Serviceで行なう事ができます。

スタイルシートは、Ｗ３Ｃが１９９６年にCSS1（Cascading Style Sheets, Level 1）を勧告し、１９９８年にCSS2（CSS, Level 2）を勧告し、2007年にCSS2.1（CSS, Level 2 Revision 1）に進化しています。

ご多分に漏れず、ブラウザ独自の定義もあります。下克上か?・・・・

スタイルシートを使用する場合は、HEAD要素内にメタ要素の記述が必要です。

<meta http-equiv="Content-Style-Type" content="text/css" >

スタイルシートでHTML文書を修飾する方法は、次の３種類が有ります。

1. 外部ファイルに記述して参照する。
   • 複数のページので構成されているサイトの場合、各ページは、外部に記述されている同じスタイルシートを参照して見栄えを統一できます。
   • 外部ファイルの拡張子は、.css です。記述は、HTML文書と同じで、テキストエディタを使用します。
   • 外部ファイルに記述しているスタイルシートを参照するには、link要素を使用して

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

     とHEAD要素内に記述します。
   • スタイルシートの記述内に平仮名/漢字等、半角英数以外の文字を使用する場合は、ファイルの先頭に文字コード宣言を記述する事が必要です。
     

     @charset "shift_jis";

2. HEAD要素内にSTYLE要素を使用して記述し参照する。
   • STYLE要素の使用方法は、第四章 私のホームページ-サンプル-２ 以降を参照して下さい。

     W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Strict より

     <!-- style info, which may include CDATA sections -->
     <!ELEMENT style (#PCDATA)>
     <!ATTLIST style
       %i18n;
       id          id             #IMPLIED
       type        %ContentType;  #REQUIRED
       media       %MediaDesc;    #IMPLIED
       title       %Text;         #IMPLIED
       xml:space   (preserve)     #FIXED 'preserve'  >

     • 要素の内容にPCDATA以外の要素は記述できません。
     • type属性が必須で値は、"text/css" （MIMEタイプ）です。
     • media属性は、スタイルシートを適用するメディアを指定します。省略可。
     • title属性は、要素にタイトルを付ける事により、要素の内容の説明等が記述出来ます。省略可。
     • xml:space属性は、XML文書の空白の処理をそのまま保持する指定です。省略しても空白をそのまま保持します。
3. 要素のstyle属性を使用して直接修飾する。
   • 要素のstyle属性を使用して直接修飾する場合は、次の様に記述します。

     <h1 style="color : red ; ">
     H1要素の内容
     </h1>

     上記の記述で、該当H1要素の内容が、赤色で表示されます。

外部ファイル/STYLE要素に記述するスタイルシートは、 セレクタ （selector） と  宣言部 （declaration）で 更正 構成されます。

 セレクタ  { 宣言部 }

{･･･} 間が宣言部で、 プロパティ （property 属性）と  プロパティ値 （corresponding value 属性値）のセットを記述します。

 p  {  font-weigh  :  bold  ; }

• 上記の指定は、 P要素の   表示を   太文字にする  です。
•  〜の の部分が  セレクタ 
•  〜を の部分が  プロパティ 
•  〜する の部分が  プロパティ値 
• プロパティとプロパティ値のセットは、宣言部内に複数個記述できます。
•  :  は、プロパティとプロパティ値との境界（セパレーター separator）です。
•  ;  は省略できますが、次のプロパティとの境界としても使用しますので、複数個のプロパティとプロパティ値のセットを記述する場合は、一番最後のセット以外は省略できません。
• 単語以外の半角空白とTab文字は、任意です。

style属性の値に記述するスタイルシートは、 プロパティ  と  プロパティ値 のセットで構成されます。

style="font-weigh  :  bold  ;"

• 上記の指定は、該当要素の   表示を   太文字にする  です。
•  〜を の部分が  プロパティ 
•  〜する の部分が  プロパティ値 
• プロパティとプロパティ値のセットは、複数個記述できます。
•  :  は、プロパティとプロパティ値との境界（セパレーター separator）です。
•  ;  は省略できますが、次のプロパティとの境界としても使用しますので、複数個のプロパティとプロパティ値のセットを記述する場合は、一番最後のセット以外は省略できません。
• 単語以外の半角空白とTab文字は任意ですが、HTMLの文法には従わなければいけません。

セレクタ（洗濯 選択 ）は、宣言部（{ } 内）のスタイルで修飾させる対象要素を指定します。

• セレクタ内に空白があってはいけません。
• /* ････ */ 間はスタイルシートのコメントです。

全称セレクタ （universal selector）

* { ・・・・ }

• BODY要素とBODY要素の内容の全ての要素に適用されるセレクタです。
• ブラウザによりスタイルシートの解釈が違います。特に文字サイズから計算される相対指定の解釈が違っているので、全称セレクタを使用してマージン等を相対指定すると、見栄えが全く違ってきます。

タイプセレクタ （type selector）

要素名 { ・・・・ }

• BODY要素とBODY要素の内容の全ての要素に適用する事のできるセレクタです。

  h1 { color : red ; }
  /* H1要素の内容の表示を赤色にする。*/

• , で区切り、複数の要素名を記述する事も出来ます。

  h2,h3,p { color : blue ; }
  /* H2,H3,P要素の内容の表示を青色にする。*/

クラスセレクタ （class selectors）

要素名.クラス名 { ・・・・ }

• . に続くクラス名と該当要素のclass属性で付けた名前と関連付けするセレクタです。

  h1.m1 { color : red; }
  /* クラス名m1のH1要素の内容の表示を赤色にする。*/

• 要素名を記述しない場合、要素のclass属性で付けた名前と関連付けします。

  .m2 { color : blue; }
  /* クラス名m2の要素の内容の表示を青色にするる。*/

IDセレクタ （ID selector）

要素名#ID名 { ・・・・ }

• # に続くID名と該当要素のid属性で付けた名前と関連付けするセレクタです。

  h1#m1 { color : red; }
  /* ID名m1のH1要素の内容の表示を赤色にする。*/

• 要素名を記述しない場合、要素のid属性で付けた名前と関連付けします。

  #m2 { color : blue; }
  /* ID名m2の要素の内容の表示を青色にするる。*/

擬似クラス （pseudo classes）

要素名:*** { ・・・・ }

該当要素が : に続く条件と一致した場合に修飾をします。

リンク擬似クラス （link pseudo classes）

リンク先の訪問状況で修飾をします。

• link

  a:link { ・・・・ }
  /* リンク先が未訪問の場合のA要素の内容の修飾を指示する。*/

• visited

  a:visited { ・・・・ }
  /* リンク先が訪問済みの場合のA要素の内容の修飾を指示する。*/

今のところ、リンク先を記述できるのは A要素 のhref属性のみなので上記の記述のみですが、将来は他の要素でもリンク先を指定できるように検討されています。其の場合は、
要素名:link { ・・・・ }
と、記述して全てのリンク先記述箇所を指定するようになるのでしょう。

動的擬似クラス （dynamic pseudo-classes）

該当要素の上で、クリック等のイベントが発生した時の要素の内容の修飾を指示します。

• hover

  要素名:hover { ・・・・ }
  /* ポインタが該当要素の上に移動してきた時。*/

• focus

  要素名:focus { ・・・・ }
  /* 該当要素が選択された時。*/

• active

  要素名:active { ・・・・ }
  /* 該当要素を実行しようとした時。*/

擬似要素 （pseudo elements）

要素名:*** { ・・・・ }

該当要素が : に続く条件と一致した場所を修飾します。

The first-child 擬似クラス （first-child pseudo classes）

要素名1:first-child 要素名2 { ・・・・ }

• 要素名1 の中の、最初の 要素名2 の要素の内容の修飾を指示します。

The first-line pseudo 擬似要素 （first-line pseudo element）

要素名:first-line { ・・・・ }

• 該当要素の内容の、最初の１行目の表示の修飾を指示します。画面サイズが変化しても常に最初の１行目の表示だけ修飾されます。

The first-letter pseudo 擬似要素 （first-letter pseudo element）

要素名:first-letter { ・・・・ }

• 該当要素の内容の、最初の１文字目の表示の修飾を指示します。

その他、The language pseudo-class 等が有りますが、動作確認が出来ませんでした。

各々の要素には、ブラウザで指定されているスタイルがあります。しかし、全ての要素に対して、色やサイズを全て指定しているわけではありません。スタイルシートはその指定を変えるものでもあります。

強調を意味するEM要素で考えてみます。表示させているブラウザの標準設定が、

• H1要素の内容の表示は、大きなサイズで赤色の標準スタイル文字で表示する。
• P要素の内容の表示は、標準サイズで黒色の標準スタイル文字で表示する。
• EM要素の内容の表示は、斜体スタイル文字で表示する。

だとします。次のHTML記述

の表示は

となるはずです。EM要素の内容の文字サイズや色は親要素と同じ表示がされています。文字スタイルのみ斜体文字です。この様に、親要素からスタイルを受け継ぐ事を、継承 ( inherit ) といいます。

継承よりもスタイルシートに記述されているスタイルが優先されます。

前例で、EM要素の表示を標準スタイルで赤色文字に指定したとします。その表示は、

となってしまい、視覚系のブラウザではH1要素の強調している箇所が判別できません。スタイルを指定する場合には、親要素からの継承や子要素に対する継承も考慮する必要があります。

しかし、そんなに難しく考える必要はありません。実際にウェブページを作成して表示させると、すぐに分かります。スタイルシートの修正は簡単ですし。

この節では、私の乏しい経験から判断した内容が殆どです。間違い等がありましたら御指導、宜しく御願いいたします。

前節で、継承よりもスタイルシートに記述されているスタイルが優先される と書きました。ブラウザはどの様にしてHTML文書とスタイルシートを解釈して表示するのでしょうか?。次のHTML記述

<p class="p1 p2">鳥啼く声す夢覚ませ</p>

で考えてみます。

スタイルシートの記述が無い場合

class属性を無視して、

鳥啼く声す夢覚ませ

と表示するでしょう。

スタイルシートの記述がある場合

.p1 { 表示色 : 赤 ; }

とだけ記述してあれば、クラス名p1だけを反映して

鳥啼く声す夢覚ませ

と表示するでしょう。

.p1 { 表示色 : 赤 ; }
.p2 { 表示色 : 青 ; }

と記述してあれば、

1. クラス名p1か一致したので、表示色は、赤
2. クラス名p2か一致したので、表示色は、青

と解釈して

鳥啼く声す夢覚ませ

と表示するのでしょうか？実際の表示は、上記通りですが・・・

.p2 { 表示色 : 青 ; }
.p1 { 表示色 : 赤 ; }

と記述してあるとします。前例と違い、p2 p1 のクラス名順で記述してあります。ブラウザは、HTML記述のクラス名順ではなく、スタイルシート記述順に解釈を行ないます。

1. セレクタp2か一致したので、表示色は、青
2. セレクタp1か一致したので、表示色は、赤

と解釈して

鳥啼く声す夢覚ませ

と表示されます。

リンク擬似クラスと動的擬似クラスも、イベントが発生した時に、スタイルシート記述順に解釈されます。

a:link{ （１） }
a:visited{ （２） }
a:hover{ （３） }

この場合、ブラウザは、ポインタがA要素の上に乗った場合

1. リンク先が未訪問か判断し、未訪問の場合は（１）、訪問済の場合は（２）
2. a:hover が指定されているので、（３）

と解釈して、a:hover が反映されますが、

a:hover{ （３） }
a:link{ （１） }
a:visited{ （２） }

と記述してある場合、ブラウザは、

1. a:hover が指定されているので、（３）
2. リンク先が未訪問か判断し、未訪問の場合は（１）、訪問済の場合は（２）

と解釈して、a:hover が反映されません。ある要素（上記の場合はA要素）に対してリンク擬似クラスと動的擬似クラスを同時に指定する場合は、

1. リンク擬似クラス
2. 動的擬似クラ

の順に記述する必要があります。私、これで嵌ってしまいました！

スタイルシートの検証は、The W3C CSS Validation Service で行なう事ができますが、実際にブラウザで表示させると、思った通りの表示になっていない場合があります。又、ブラウザやそのバージョンにより見栄えが違う場合があります。

私が普段使用しているブラウザは、IE8ですので、それ以外のブラウザでの確認が必要になります。確認を行なっているブラウザは、

• Firefox
• Opera
• Sleipnir
• Google Chrome

です。これらのブラウザは、早い段階からウェブ標準に対応していますので、古いバージョンでもまず大丈夫だと思っていますが、IE8以前のIEでは、かなり酷い解釈をするプロパティが存在します。

では、古いバージョンのIEの確認はどうしましょう？SuperPreview を使用して確認していまが、IE6以前のバージョンは確認が出来ません。