前回は<h1>タグにのみ「スタイル」を設定しました。今回の記事内容は前回と変りませんが、 <h1>見出しタグのスタイル内容を替えたのと（画像を入れる）もう一つ中見出しの<h2>を増やしたことです。
一般的に大見出し、中見出し、小見出しの順位で<h1～6>を使い分けします。

この２種類のソースをコピーして設定値である「値」を書き換えれば<h3>～<h6>と区別を増やすことができるのです。

また、この内容で<div>やリストの<dl>等、その他いろいろなタグにスタイルを設定することができます。

今回は下段に、「ソース」に解説を付け、その意味するところを分かり易くしました。
次回は<body>と<p>タグにスタイル設定です。

スタイル設定シリーズ第２回

HTMLとスタイルシートの解説集と <h2> タグ

このページはこの道の「先達、大家または著名なホームページ作成サイト」に案内して「HTML」の解説を試みるものです。
勉強中の私が説明する場合ですと、あちこちのサイトや参考書からの知識で行うわけですが、その際次の弊害が生じます。１．全文まる写しを避ける為、変に歪曲してしまい勝ちになります。２．重複部分が生じます。３．肝心のところが脱落してしまいます。

との反省もあって、このページを企画しました。なを、案内に当たっては下記３項目を列記しご案内いたします。（これで、著作件の侵害も無くなり、また、私が変に考えることもなく、組み立てだけの作業になりますので、比較的に早いペースで纏めることができそうです。）

著者名
著者サイトのトップページ（カウンター設置のページは必須）必要があれば「サブ・ページ」も　
ズバリ解説のページ（１～ｎ個）

の３項目を出来うる限り明記して「リンク」させていただきます。
先ず導入編として「W3C勧告文書HTML 4.01 specification" 」を和訳したサイト「HTML 4仕様書邦訳計画補完委員会訳（委員長内田明外大橋正典、岡橋一輝、角谷徳仁、水無月ばけら、矢野啓介共訳）「HTML 4仕様書邦訳計画」から入ります。

アーカイブ欄ー「邦訳」をクリック
「HTML 4.01 仕様書邦訳概説」をお読みの上、その「タイトル」をクリックすると
目的とする「W3CHTML 4.01仕様書ー1999年12月24日付W3C勧告」が開きます。
もうこの「正確を期して邦訳したページ」を、仔細にまた、折に触れ熟読すれば、もう何も言うことなく「htmlとスタイルシート入門」は十二分に果たされたことになります。

ただ、その中にあって、愚鈍な私でも「分かり易いな・やさしいな！」と思われるサイトが有ったら、上記６氏や他著者のサイトなど横道をも楽しみたいと思います。しかし、基本は勿論このサイトです。念のため。

第一章 HTMLについて予備知識

htmlとは?

神崎正英氏

トップページ

プロローグ：htmlって何だ　３０分間html入門

正しいhtmlのための若干の知識（実体参照、署名、コメント、文書型宣言の意義説明）　　　取り上げた「要素タイプの一覧」と要素の親子関係」　（表の右側に親と子の要素が記載、下段に親子関係の説明有り。）

（他にも良いサイトが沢山有りますが、私の独断と偏見でこれにしました。以下この調子で行きます。）
３０分間html入門の下段にあります。各ソース例をブラウザで見てみましょう。

実際に試してみよう

The Web Class; トップページ; タグの解説と入力練習　どのタグを選んでも下段に入力練習覧があります。「入力練習だけのページ」
上の練習が終わったら「神崎氏の」「３０分間html入門の下段にあります。各ソース例もやって、ブラウザで見てみましょう。」

タグとは？

上記「 W3CHTML 4.01仕様書」簡略目次３: 「３．SGMLとHTMLの関係」の1/3あたりに緑色斜体で「タグ」と「要素」の違い有り。DTD解説有り。

要素について

上記 W3CHTML 4.01仕様書: 要素索引; 要素名をクリックして下さい。既に和訳された文章でこと細かに解説してあります。

著者：WDG(Web Design Group): 翻訳権者：加藤泰孝氏サイト; HTML4.0要素の機能別一覧タブ「Hide non- strict elements」でHTML4.01strict仕様要素に、同じく「ShowでHTML4.01transitional」仕様要素への変換ができて便利です。; ブロっク要素　　　　　　　　　　　　　同上; インライン要素　　　　　　　　　　　　　同上

著者：Ｋ１６氏: Another HTML-lint ここで,html文法のチエックもできます。; 「タグ一覧」から必要とするhtmlタイプを選択。例えば「ｘhtml1.1 」の場合です。; 行頭のタグをクリックで即座に目的のタグへ飛び、用法も一覧できます。（上級用でしょうか。）

HTMLの記述に入ります。

Noriaki Akifusa氏　（非常に簡潔でわかり易い。私がお手本にしています。またページのｈｔｍｌソースに感動しています。）
HEAD、META、LINKの記述
 正しいHTML１（論理構造理解の為サンプル比較で説明）「正しいHTML２」もどうぞ。

要素「p」のparagraphと段落論

著者：矢野啓介（ご指示により直接ページへリンク）

HTMLにおける「段落」をめぐって

HTMLのDTDを読んでみよう　　

WDG 著

P 要素について　上記WDGｈｔｍｌ4.0要素からも入れます。タブ「Hide non- strict elements and attributes」で「Show」との切り替えもついています。
DIV 要素について　　　　　　　　　同上
SPAN 要素について　　　　　　　同上

HTMLで使用する主な用語

著者：大藤幹

ZSPC

html4.0についてー用語について　上で解説のあった用語等必要な事柄を簡潔にわかり易く述べてあります。

要素の親子関係と継承

著者：WEB for biginner 作成支援　

要素の親子関係（図説）

（私はここ発行のメルマガの受信者です。私のページのスタイルシートに多用します。著作権の問題上引用・説明等に触れることが出来ません。

ません。

便利ツール紹介

Excite エキサイト辞書：研究社新英和・和英中辞典（英和コンピュータ用語辞典有）
上記 The Web Class著：タグの解説と入力練習　入力ｈｔｍｌソースをその場でWeb表示
上記大藤幹著：カラーチャート　HTML テンプレート

第ニ章スタイルシート入門編

何処へ、どのような形態で設定するのか？

著者：上記神崎正英氏

スタイルシート1 - スタイル設定の方法

スタイルシート2 - CSSのプロパティ

以上の文章は前回のとうりですが、以下から文章を替えます。

第三章早々と「スタイル設定」の第２回です

（最初におことわりします。私の一人よがりの実習で、誤作動について責任は持てません。）

「設定」第１回は大見出し<h1>タグにスタイルを設定しました。今回第２回目は中見出し<h2>を加えました。
中見出しのグレーは、浮き上がり感が良くでています。
ここは「テストのページ」です。スタイルを設定することでページの印象が変化することを試しているのです。

「テキストをそのまま表示するタグ」に「どのようなスタイルが設定」できるかの 一覧表（「約５０種の属性」と夫々の属性に対応する「値」）いうものが手元にありましたので、そのなかから記述しています。
表の全部そっくりは表示できませんが半数以下を挙げてみました。著作権もありますので。

使用可能なスタイル	スタイルの機能	値
color	文字色	カラー名、カラーコード
background	１.背景色２.背景画像のURL ３.繰り返し方法４.背景画像の固定指定５.背景画像の表示位置等スタイルの一括指定	１.同上　２.url,ナシはnone 3.repeat,repeat-x, repeat-y,no-repeat/ 4.scrol,fixed/ 5.left.right,top,bottom,center
background-color	背景色	カラー名、カラーコード
font-style	文字形状	normal正常,italic,oblique
font-family	書体名	例ＭＳ明朝、ＭＳゴジック等
text-decoration	文字装飾	noneしない,underline,overline line-through,(blink:NNのみ)
letter-spacing	文字間隔　　（値normalで正常）	絶対サイズin,cm,mm,pt,pc,px 相対サイズem,ex,%
word-spacing	単語間隔　　（値normalで正常）	同上
border	枠形式一括指定（上下左右の４辺)	太さ色形状の３つについて一括
border-width	枠線幅一括指定	n,cm,mm,pt,pc,px。em,ex。枠の太さthin,thicj,medium
border-top-width	上枠線幅（下枠bottom-width有）　　　（値に絶対、相対サイズ有）	in,cm,mm,pt,pc,px。em,ex。枠の太さthin,thicj,medium
border-left-width	左枠線幅(右枠線幅有)（値同上)	同上
border-top-color	上枠色（下枠bottom-cokor有）	カラー名、カラーコード
border-left-color	左枠色（右枠ｒight-cokor有）	同上
border-left-style	左枠形状ー右有(丸い点線四角い点線、凹凸、実践や浮き出し感じ)	dotted,dashed,solid,double,groove ridge,inset,outset。　ナシはnone､hidden
padding	パデング一括指定（上下左右の４辺）領域枠と枠内文章間の余白	絶対サイズin,cm,mm,pt,pc,px 相対サイズem,ex,%
padding-top	上パデング(下有)枠と枠内文章間の上余白	同上
padding-left	左パデング(右有)枠と枠内文章間の左余白	同上
text-underline-position	下線表示位置

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

このページにおけるスタイルの設定は、「リンク文字列」（従来から実施）と前回<h1>と今回
の<h2>のスタイルのソースです。

<style type="text/css">
<!--
         /*下４行はリンク文字列の色の指定です。*/
         a:link { color: #080; text-decoration: none; }    /*未リンク状態の文字色*/
         a:visited { color: #099; text-decoration: none; } /*既にリンク済みの文字色*/
         a:hover {background: #0f0; color: #f00;           /*オンマウスで背景色緑色、赤文字*/
                  text-decoration: underline; }            /*オンマウスの際下線が表示*/
         a:active { COLOR: #f0f; text-decoration: none; }  /*リンク最中の文字色*/   
 
  h1   { 
         color: red;                                      /*文字色は赤色*/
         text-align: center;                              /*文字列(テキスト)を中央に*/
         height: 37px;                                    /*領域枠の高さ37ptに*/
         padding-top: 8px;                                /*領域枠と文字列の上の間隔*/

        font-size: 20pt;                                  /*文字サイズ*/
        font-family: ＭＳ 明朝;                           /*書体*/
        font-weight: bold;                                /*文字強調*/
        background-color: #ccc;                           /*領域枠色（背景色）*/
　
                /*前回に<h1>に、今回追加設定分*/
         　padding-bottom: 8px;                           /*領域枠と文字列の下の間隔*/
           border-top-color: red;　　　　　               /*上の枠線を赤色に*/
           border-width: 10px;　　　　　                  /*上の枠線幅四周一括指定*/

           border-style: outset;              /*領域枠の形式で、内容浮き出し感の立体感*/
           text-decoration: underline;　　    /*decorationは装飾。アンダーラインを引く*/
           background-image: url("a002icn1.png");         /*領域枠に画像をいれました。*/
           background-repeat: no-repeat;　　　　　        /*画像の繰り返しはノーで１個だけ*/
           background-position: left;　　　　 　          /*画像の水平方向の位置*/
      }

　　　　　/*前回と同文ですが、今回タグ<h2>にスタイルを設定しました。*/

 　H2     {color:#00f;                        /*文字色青色*/
           text-align:left;                   /*テキスト左寄せ*/
           height:28px;                       /*領域枠高さ28px*/
           padding-top: 6px;                  /*領域枠と文字列の上の間隔*/
           
           font-size: 16pt;                    /*文字サイズ*/
           font-style: oblique;                /*斜体でイタリックと同じです。*/
           font-family: ＭＳ Ｐゴジック;　     /*書体*/
           font-weight: bolder;                /*文字強調を「より強調に」*/
           background-color: #ccc;             /*領域枠色グレイ（背景色）*/

           margin-left: 25px;     /*領域枠の広さの設定、body枠（ベースライン）からの左間隔*/
           margin-right: 25px;                /*同上で右間隔*/
           border-style: outset;              /*領域枠の形式で、内容浮き出し感の立体感*/
           padding: 10px;     　　　　　   　 /*領域枠と文字列の間隔四周一括設定10px*/
           }
-->
</STYLE>>

トップへ戻るスタイルシート目次へ戻る