スタイルシートの実装

今回は２番目の「head部に実装する方法」で実施いたします。記述については
「スタイルシートの記述法」の１．２．３を参照願います。

html記述に就いての「掟」

おきてと言う表現は厳めしいが、それ程大事なことなのです。

「半角英数小文字」の使用

文字列をマークアップする「タグ」の記述は極く僅かの例外を除いては９９％「半角英数小文字」を使用する。
特に、html4.01 strict仕様は勿論のこと、またHTML を XML の文法で書くXHTML への移行を考えるならば尚更のことです。例外として書体の「ＭＳ明朝」に類するものでＭＳは全角文字、明朝は当然全角文字になります。またドキュメントタイプ宣言のや文字コードの「Shift_JIS」などの「半角大文字」が挙げられます。兎に角タグには全部「半角英数小文字」を使用する心構えの方が単純明快でミスが少なくて済みそうです。

スタイルシートで使用する記号

１つの「セレクタの記述（下の例ではdiv）には必ず開始括弧「 { 」で始まり閉ず括弧「 } 」で囲むこと
属性の後に必ず区切り記号の「 : 」を付けること
「値」の後に異なった「属性:値; 」を連続して記述する場合には必ず区切る記号「 ; 」をつけること。ですから、最後の「属性:値」の後には「 ; 」を付ける必要はありません、直ちに閉ず括弧「 } 」になります。
（私は好んで「 ; 」を付けています。弊害が無いばかりか編集等で位置を変えたとき「付け落ち」の心配がないからです。）

スタイルシートにおける「半角スペース」の使い方

「行の空白」について

htmlソースを書いていて、いくら半角スペースでカーソルを送り空間を取ったつもりでもブラウザ画面では「たった半角１個のスペース」しか空きません。このページのソースで<style>～</style>間のスタイル設定で配置が見易くして有るのもこの「性質の逆手」を利用しているからです。「直後」または「半角スペース以内」ならセレクタ、属性、値および括弧の「{」と「}」の記述が有効であり、半角スペースをいくら重ねても半角としてしか認められないからごらんのような編集ができたのです。

「上下の空白と改行」について

このページのソースで<style>～</style>間の記述を例にとりますと括弧開始「{」と括弧閉ず「}」が改行されてるもの【上記例（３）】と、されてないものの２通りあるのですが、どちらも有効です。たとえば、上下に幅広く改行してあってもブラウザ画面では「直後」か言い方を変えても「半角以下」スペースに表示します。(インターキーで改行するわけですが、どうやら自動的に半角スペースが与えられているような気がします。)

htmlでは<br>タグで強制改行しないとブラウザには反映せれません。ただし、<要素名>タグを使用した場合には、必ず改行を伴います。改行幅の最も少ないのが<div>タグで<br>タグ並です。（他のタグは上下に空行（マージン）を伴うようです。）そういうこともあって、終了タグ</要素名>の前には特別の意図が無い限り<br>タグを付ける必要性が無いのです。

ついでに、body内のタグに直接スタイルを設定する場合です。

それでは、またまた、前々ページでお世話になりました。「The Web Class」さんのサイトを利用させていただきます。

実際にページを作成するには、これから学習するスタイルシートを除いてhead部に最低限下記の記述が必要になります。欲を言わなければこれで充分かも知れません。なぜなら、このhead部の記述で「Another HTML-lintゲートウエイサービス」が行っているhtmlチェックから１００点を頂戴しているからです。

ドキュメントタイプ宣言・html宣言とhead部の記述

htmlにはHTML 4.01の中で一番厳格な仕様とされている「HTML 4.01 strict」を使用しました。

head部にスタイルを設定

文字色、フォントサイズ、書体と背景色をbodyセレクタに設定

セレクタにはbodyのような要素名で山括弧「<」と「>」を付けてないものを使用します。
なお、スタイルシート属性を書き並べたページが有ります。「スタイルシート１日体験」のソースを参照ください。また、同ページ下段のナビで「体験１，２、３」に辿れます。

これでNO.1からNO.3まで１つに、まとまりました。次に下の方をみますと<body>タグが有りますのでその下に「あいうえお」と記入。
更にpタグで囲んだ「　<p>あいうえお</p>　」を貼り付けます。実はこちらの方が正しい使用法なのです。NO.1～NO.3を纏めたソースは下記になります。。

NO.4では、bodyでスタイルを設定しても、子供であるpタグに「属性」と「値」が継承されているから全く同様に表示されたのです。今度はpタグにスタイルを設定してみます。bodyにはページ全体の背景色のみを残します。

No.5　下をコピー＆ペーストしてして「ブラウザでチエック」ボタンを押してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシートの実装</title>
<style type="text/css">
<!--
  body  { background-color: cornsilk; } /*ページの背景色。カラー指定を英語名で書きました*/

  p    { color: #0000ff;             /*ここはメモ欄です。#0000ffは青色です。*/
         font-size:14pt;　　　　　　 /*文字のサイズを14ptに設定*/
         font-family: ＭＳ 明朝;     /*書体は私の好きなＭＳ 明朝です。*/
         background-color: pink; /*文字列の背景色。カラー指定を英語名で書きました*/
       } 
-->
</style>
</head>
<body>
あいうえお
<p>
あいうえお
</p>

</body>
</html>

注意点１：No.4に比べて、背景色は同じ、文字の体裁も同じですが、文字列に背景色ピンクが付きました。
スタイルの設定はbodyもpも同じ「background-color: カラー名;」なのです。このようにbodyにいろいろとスタイルを設定するよりも、各タグ個別に設定した方が「各タグ」に夫々の個性を持たせることができるからです。もちろん各タグに共通の要素があればbodyにスタイルを設定してもよい訳です。背景色などその良い例です。

それではNo.5の値を替えてみましょう。
「入力画面」上での操作になります。当てはまる「属性と値」または「値」のみを入れ替えるだけです。」
入れ替えては「ブラウザでチエック」してください。

カラー関係：
「 color: #00ff00; 」に「 color: green; 」に「 color: #ff0000; 」に「 color: red; 」に
フォントサイズ関係：
「 font-size: 9pt; 」に「 font-size: 12pt; 」に「 font-size: 18pt; 」に「 font-size: 26pt; 」に

書体関係：
「ＭＳＰ明朝」に「ＭＳゴジック; 」に「 HG行書体; 」に

文字列の背景色（領域色と言います。）関係：
「 #fffacd; 」「 #ffffd5; 」「 #fffee6; 」私がこのページの見出しのｈタグに使用しているのを挙げました。末尾に区切り記号の「;」を付けるのを忘れずに。

注意点２：<style type="text/css">～</style>間の設定を変えただけで、ブラウザで表示される<body>～</body>間の内容の表示の仕方に変化をもたらします。文書の編集が容易になるということがお分かりいただけたと思います。　

No.5では段落を表す<p>タグにスタイルを設定しました。今度は<div>にstyle設定です。
若し、<p>タグと同じような、または少々違った位なら簡単です。No.5の「p」を「div」に変えるか２つとも併記して「属性」を追加するなり、「値」を変えればよのです。No.6をご覧ください。

No.6　下をコピー＆ペーストしてして「ブラウザでチエック」ボタンを押してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スタイルシートの実装</title>
<style type="text/css">
<!--
  body  { background-color: cornsilk; } /*ページの背景色。カラー指定を英語名で書きました*/

  p    { color: #0000ff;             /*ここはメモ欄です。#0000ffは青色です。*/
         font-size:14pt;　　　　　　 /*文字のサイズを14ptに設定*/
         font-family: ＭＳ 明朝;     /*書体は私の好きなＭＳ 明朝です。*/
         background-color: pink; /*文字列の背景色。カラー指定を英語名で書きました*/
       } 
 div   { color: #0000ff;             /*ここはメモ欄です。#0000ffは青色です。*/
         font-size:14pt;　　　　　　 /*文字のサイズを14ptに設定*/
         font-family: ＭＳ 明朝;     /*書体は私の好きなＭＳ 明朝です。*/
         background-color: pink; /*文字列の背景色。カラー指定を英語名で書きました*/
         text-align: center;  /*pのスタイルに「文字中央寄せを追加」しました。*/
       } 
-->
</style>
</head>
<body>
あいうえお
<p> 
あいうえお
</p>

<div> 
あいうえお
</div>

</body>
</html>

divタグに囲まれた文字列が中央寄せになってることに注目ください。
このように「属性項目」を与えるだけで幾らでも「文書の形態や見映え」が替わります。
「カラーナンバー＆カラーネーム」に就いてはzspcの大藤　幹氏作をご覧ください。
下段の指定方法で「名前の定義されている色（140色）「Mac、Win共通パレット（216色セーフカラー）を参考にされると良いと思います。この外に、文字色と背景色の組み合わせも出来るようになっています。

注）「見本と同じになりましたか」は私の設定ではありません。

以上で「The Web Class」さんのサイトを利用しての「タグ」及び「スタイルシート」の検証方法が板についたと思います。そうして、「html」とは、「スタイルシート」とは何ぞや？の事柄が掴めたかと思います。「html」とは、「スタイルシート」とは、「タグ」とは？の疑問は実例を４～５０回繰り返せば自ずから理解出来ることと考えております。
今後は「スタイルシート１日体験シリーズ」をご覧いただいて、特に第２回の「領域枠の設定」をマスターすれば、その他の事柄にも通じるかと思います。私もこの領域枠の設定で「スタイルシート」への道が開けたことを申し添えます。

最後に「スタイルシート用」の属性ほぼ110位あるなかで、私の知り得る一覧を表示します。沢山有るようですが同系等のものが有るので種類としてはそれほどではありません。何しろ領域枠関係のborder属性だけで２０種くらいあるほどですから。
また、「値」の記述については、値についてを参照ください。

<style type="text/css">
<!--
 a:link { color: #00f; text-decoration: none; }      /*未リンク状態の文字色*/
 a:visited { color: #00f; text-decoration: none; }   /*既にリンク済みの文字色*/
 a:active { COLOR: #f0f; font-style: italic; }       /*リンク最中の文字色と斜体*/
 a:hover {background: #0f0; color: #f00;       /*オンマウスで背景色緑色、赤文字*/
 text-decoration: underline;　font-style: oblique; } /*オンマウスの際斜体で下線が表*/ 


 BODY {　　　　　　　　　　         /*スクロールバー色の設定はbodyで行います。*/
       scrollbar-face-color: yellow;      /*▼と▲印ボタン部及びバー表面の色設定*/
       scrollbar-arrow-color: red;        /*上下の矢印の▲と▼の色設定*/
       scrollbar-highlight-color: #cff;   /*ボタンとバーの外枠内側の上と左の色設定*/
       scrollbar-shadow-color: blue;      /*ボタンとバーの外枠内側の右と下の色設定*/
       scrollbar-3dlight-color: blue;     /*ボタンとバーの外枠外側の上と左の色設定*/
       scrollbar-darkshadow-color: white; /*ボタンとバーの外枠外側の右と下の色設定*/
       scrollbar-bace-color: white;   /*全体を同色に設定。単独使用で単純明快です。*/
       margin-bottom: 10pt; 　            /*テキストのセンタリングとマージンです。*/
       background-color: #fffff6;　　　　 /*body全体の背景色です。*/
      } 

 p,div,ol,ul,dl { color: #000090;        /*p,div,ol,ul,dl共通設定*/
                  font-family: ＭＳ 明朝;
                  line-height: 150%; 
                }
 h1 { 
      color: red;　　　　　　　　　　　/*文字色赤色*/
      font-size: 20pt;　　　　　　　　 /*文字サイズ*/
      font-family: ＭＳ 明朝;　　　　　/*書体*/
      text-align: center;　　　　　　　/*テキスト中央*/
      background-color: olive;　　　　 /*領域色（背景色）*/
      height: 37px;　　　　　　　　　　/*領域枠高さ*/
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;　　　　　　　/*領域枠と文字列の上の間隔*/
      padding-bottom: 5px;　　　　　　/*領域枠と文字列の下の間隔*/
      margin-left: 5px; 　　　　　　　/*領域枠の幅の設定で画面の端からの距離*/
      border-width: 15px;　　　　　　 /*枠線の幅*/
      border-style: outset; 　　　　　/*領域枠の形式で、内容浮き出し感の立体感*/
    }

 h2 { 
      color: green;　　　　　　　　　 /*文字色赤色*/
      font-size: 15pt;　　　　　　　　/*文字サイズ*/
      font-family: ＭＳ 明朝;　　　　 /*書体*/
      height: 30px;　　　　　　　　　 /*領域枠高さ*/
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;　　　　　　　/*領域枠と文字列の上の間隔*/
      padding-bottom: 5px;　　　　　　/*領域枠と文字列の下の間隔*/
      background-color: #cccc00;　　　/*領域色（背景色）*/
      margin-left: 5px; 　　　　　　 　/*領域枠の幅の設定で画面の端からの距離*/
      margin-right: 5px;
      margin-top: 5px;
      margin-bottom: 5px;
    }

 p {
     font-size: 12pt;
     width: auto;
     height:auto;
     line-height:
     line-through: 
     text-decoration: none;
     font-style: none;
     font-weight: none;
     font-variant: normal;
     letter-spacing: normal;
     word-spacing: normal;
     word-break: normal;
     word-wrap: normal;
     writing-mode: lr-tb; 

     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 15px;
     padding-right: 15px;

     margin-top: 0;
     margin-bottom: 0;
     margin-left: 10px;
     margin-right:10px;

     border-style: ridge;
     border-width: 2px;

     border-top-color: yellow;
     border-bottom-color: yellow;
     border-left-color: yellow;
     border-right-color: yellow;

     border-top-width:
     border-bottom-width:
     border-left-width:
     border-right-width:
     border-top-style:
     border-bottom-style:
     border-left-style:
     border-right-style:

     background-image: url("haikei.jpg");
     background-repeat: repeat;
     background-position: 0% 0%;
     background-position-x: 0%;
     background-position-y: 0%;
     background-attachment: scrol;
　　} 

 div {
　　　font-size: 15pt
      padding-left: 15px;
      padding-right: 15px;
      margin-left: 10px;
      margin-right:10px;      
      margin-bottom: 15px; 
      border-width: 2px;
      border-style: ridge; 
      writing-mode: tb-rl;
　　 } 

 ol {
      font-size: 12pt;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 30px;
      padding-right: 15px;
      margin-left: 10px;
      margin-right: 10px;
      border-top-color: yellow;
      border-bottom-color: yellow;
      border-left-color: yellow;
      border-right-color: yellow;
　　 }

 ul  {
      font-size: 12pt;
      list-style-type: circle;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 25px;
      padding-right: 15px;
      margin-left: 10px;
      margin-right:10px;
      border-top-color: yellow;
      border-bottom-color: yellow;
      border-left-color: yellow;
      border-right-color: yellow;
      border-width: 2px;
      border-style: ridge; 　　
     }
 dl  { font-size: 12pt;}

 li {
　　　color: #000090;
　　　font-size: 12pt;
　　　font-family: ＭＳ 明朝;
　　　background-color: #fffff6;
　　 }

 hr { background-color: green; 
      width: 80%; 
      height: 5px; 
      margin-top: 20px;
      margin-bottom: 20px;
     }
img { margin-left: 10px;
      margin-right: 10px; 
      margin-top: 10px;
      margin-bottom: 10px;
    }
-->l;
</style>

スタイルシートを実装する