第1回の<h1>、第２回の<h2>に次いで　第３回目の「スタイル設定」作品です。
このページにおけるスタイルの設定は、<p> とリスト関係タグ３種<ul> <dl> <ol> の４つのタグです。<p> だけでは <ul> <dl> <ol> の部分が未設定のデフォルト仕様に残って、見映えが悪いので一緒に措置しました。

元の文章は同じでも、各種タグに「スタイル」を設定することで、見映えが全然違ってくるのがお分かりと思います。今回のポイントは全体背景色（body部で１つのみ設定）と各タグの持つ「領域枠の背景色」を揃えたことです。さらに、その他の設定も同一の背景色にしましたので、あだかも一つのタグを使用したように見えます。しかし、文字列の配置書き出し位置は、はっきり区別されています。（デザイン上必要があれば、勿論 <dl> <ul> <ol> のリストタグにも諸スタイル設定が可能です。
なお、リストの設定では <head> 記述と「外部フアイル,css」の使用と２箇所で設定しました。詳しくは最下段をご覧ください。また、ソース「head」部もご覧下さい。

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

HTMLとスタイルシートの解説集と <li> 関係

このページはこの道の「先達、大家または著名なホームページ作成サイト」に案内して「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著：タグの解説と入力練習　入力htmlソースをその場でWeb表示
上記大藤幹著：カラーチャート　HTMLテンプレート

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

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

以上の文章は前回のとうりですが、後半の「リスト部分」は「箇条書きあり」に替えいろいろの箇条書きを施しました。

第三章「シリーズ　第３回」上のとおりです

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

「実践編」第１回は大見出し <h1> タグにスタイルを設定しました。２回目は中見出し <h2> にのみスタイル設定しまました。

今回は <p> タグだけに設定する予定でしたが、<p> については１回２回の<h> タグ」の設定法と全く同様ですので。<p> の設定と同時に「リスト書き」の <dl> <ul> <ol> にも「スタイル」を設定しました。
<dl> 箇条書きの定義のみで記号、番号はありません。<dt> で説明 <dd> で内容になり、字引と同じ使用法です。
<ul> 箇条書きー通し番号なし
<ol> 箇条書きー通し番号あり

但し、この３つの「リストタグ」にも <p> タグと全く同じスタイルを設定にしました。

これではあまり進展がないので「外部スタイルシート,css」を使用しました。
それには、予めいろいろなパターンを一覧表示し、その中から paramナンバーで取り出すように
なっています。その使用法解説等も入れておきました。下記はそのソースです。


<style type="text/css">
<!--
ul.param1  {list-style-type: disc;}          /*黒丸*/
ul.param2  {list-style-type: circle;}        /*白丸*/
ul.param3  {list-style-type: square;}        /*四角*/
ol.param4  {list-style-type: decimal;}       /*10進数*/
ol.param5  {list-style-type: iower-roman;}   /*小文字ローマ数字*/
ol.param6  {list-style-type: upper-roman;}   /*大文字ローマ数字*/
ol.param7  {list-style-type: iower-alpha;}   /*小文字アルファベット*/
ol.param8  {list-style-type: upper-alpha;}   /*大文字アルファベット*/


/*上の箇条書きparamNo.を予め書き出しておいて使用する方法の説明です。
必要とするparam No.を該当するタグに設定する。設定方法は下記のとおりです。
「　<ul class="param No."><li>～</li> 　 」

   ul   { rist-style-type:}　で指定すると全体を対象に設定できる。
   ol   { rist-style-type:}　で指定すると全体を対象に設定できる。
  <ul><ol> タグは「ブロックタグ」なので段落タグのスタイルが使用可能*/

   li   { list-style-type:}　で指定すると個別に設定できる。
   <li> タグは「インラインタグ」として機能、文字の修飾スタイルが使用可能

箇条書き「タグ」種類と適用についての説明
１．箇条書きの定義のみは <dl> です。  
　　<dt>は箇条書きの見出し部分です。
　　<dd>は内容部分で、いくらでも繰り返せます。  
　　<dl>タグは「ブロックタグ」なので段落タグのスタイルが使用可能、
　　また、<dt><dd>タグは「インラインタグ」として機能し、文字の
    修飾スタイルが使用可能」

２．通し番号なし（黒丸白丸四角のマークは付く）　   は ul> です。
３．通し番号あり　　　　　　　　　　　　　　   　　は <ol> です。*/

-->
</style>

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