レ HTML4.01 Transitional DTDスタイル設定 第１回 <h1> タグ
（この項は14.12.11追記の感想文です。）
最初の印象と完成後の印象の違いからスタイルの効果を
肌で感じ先達諸先生がしきりに薦めている「スタイル」の意義の何かを掴めるかも知れない、の思いで
14.10.13 起稿しました。
下記本文にて、リンク紹介のページを、あっさり（この段階では熟読しても分からないし、辛抱もでき
なかったためです。）拾い読みしたのですが、愚鈍な私にとっては「こんなことをするんだ」のイメー
ジは掴んだものの、「スタイル」については９９％分からない状況での、ページスタートだったのです。
ーあちこち資料あさりの期間２〜３か月は別にしてー以後丁度２か月、適切ではないかも知れませんが、
どうやら１０種類程のタグに「スタイル」を施せるようになりました。
矢張り経験しないことには、どのような立派な解説であっても、熟読も理解もできません。今ようやく
３年前購入の「ホームページの上手な作り方教えます」１年半前のスタイルシ−ト辞典、そうしてつい
２月前に購入した「技術評論社のhtmlタグ辞典」を３冊まとめて今度は熟読しています。
じつは、「技術評論社のhtmlタグ辞典」が私に読解力を与えてくれたのです。他の著者のものであって
もそうなったかも知れませんが、たまたま、「フィット」して読む気を与え
てくれたのです。
「ホームページの上手な作り方教えます」は絵入り会話風ありでやさしくしたつもりでしょうが、私に
はなじめませんでした。そこかしこに付箋や下線が記されてはいるものの、そのすべて、１００％記憶
に残っていないのには驚きました。それが今になって読み返すと、要領良くまとめてあるので手離せま
せん。
２月前から、このページを進めながら、そこで得た知識をもって以前のページに修正作業を施しました。
このシリーズの初期のページに「スタイル」が使用してあるのはそのためです。このページでも、この
項は追記のため、「スタイル」しました。
起稿14.10.13
このスタイル設定シリーズは、下記「HTMLとスタイル解説集」の見映えのしないページに一歩二歩と段階
を踏んで「スタイルシート（以下スタイル）」を設定し、１ページを完成させて行きます。
いろいろなタグにいろいろなスタイルを設定し、そうしてスタイルの仕様を指定する「値」を替えて行く
うちに思わぬ発見がもたらされたりします。「遊び感覚」で「スタイルの学習」と行きたいところです。
ただ、是非心得ておきたいこともがあります。<head> 部で「セレクタ」に「属性」「値」を記述
する際たとえ１字でもないがしろにできません、「：、；、{､ } 」のどれが抜けても機能しません。
そればかりか、思うように行かない場合には、必ず何処かに欠陥がある筈なので入念なチェックが必要に
なります。
第１回目は「 <h1> 」タグだけに「スタイル」を設定しました。そこで、タグには「領域枠」があ
ることを知りました（「一覧表としてのテーブル」に、とって替わることはできないにしても、使い方次
第によっては、一般に重いといわれるテーブルに替わっての使用も面白いかもしれません。）
この「 <h1> 」タグだけでもいろいろな「設定値」(殆どが数値を替えるだけです)を変化させれば
自然に用語・用法が身に付き理解ができることと思います。後の３回は膨大な量に見えますが「適用する
タグ」を、ただ増やしたに過ぎませんので、お気軽に挑戦してみてください。
（追記14.11.26の今日、某メルマガ講座の第１回目ですが、インターネットの仕組みの覚え方がありました。
その後段に「はっきりと理解しないでも、先ず大よそのイメージを掴んでから入る。」
というのがありました。
私もこれに全く同感です。私の学習法もそのとおりだったのです。今参考書を読んで見ると以外に易しい感
じがするのです。先月から始めた「スタイルシート入門」では、半分近くもつまらぬ道草を食いながらの学
習でした。しかし、それでも「スタイルシート」のイメージが頭に入ってきたのです。
３つ程例を挙げます。極論ですが、実体参照は「 <； 」「 >； 」「 "； 」だけを覚え
ればそれで良い。カラー表示は「#6桁」「原語名」の「カラーチャート」が手元「
こちら)」（本文でご案内の著者：
Ｋ１６氏Another HTML-lintの色見本にあります。）にあればそれで良く理屈はいらない。若し「#3桁」を
使いたかったら、次のようにしてください。
２〜３の例で説明します。「#ff0000」は「#f00」、「#009900」は「#090」「#663399」は「#639」、
「cc00ff」は「c0f」つまり「 00、 33、 66、 99、 cc、ff 」に限った２桁の６種文字列で構成する
「#aabbcc」のみ、重複文字を１字に短縮できるのです。0，3，6，9、ｃ、ｆ の並び順はどうでも良いのです。
「head」部の「meta」「link」の記述は本ページ下段にあります「
こちら」に必要項目を選んで記述すれば
で十分で、以上３点は理屈は要りません。使っていれば自
然に理解できる事柄です。他にもこのようなことは沢山あります。
問題は「head」部の<style type="text/css">〜</style>の記述だけになりますが、
それをこれから学習していくことになります。
この第１回目はこの道の「先達、大家または著名なホームページ作成サイト」に案内して「HTML」の解説を
試みるものです。
勉強中の私が説明する場合ですと、あちこちのサイトや参考書からの知識で行うわけですが、その際次の弊
害が生じます。１．全文まる写しを避ける為、変に歪曲してしまい勝ちになります。２．重複部分が生じます。
３．肝心のところが脱落してしまいます。
との反省もあって、このページを企画しました。なを、案内に当たっては下記３項目を列記しご案内いたしま
す。（これで、著作件の侵害も無くなり、また、私が変に考えることもなく、組み立てだけの作業になります
ので、比較的に早いペースで纏めることができそうです。）
の３項目を出来うる限り明記して「リンク」させていただきます。
先ず導入編として「 W3C勧告文書 HTML 4.01 specification" 」を和訳したサイト「HTML 4仕様書邦訳計画補完委員会訳（委員 長 内田明外大橋正典、岡橋一輝、角谷徳仁、水無月ばけら、矢野啓介共訳） 「 HTML 4仕様書邦訳計画」から入ります。
アーカイブ欄ー「
もうこの「正確を期して邦訳したページ」を、仔細にまた、折に触れ熟読すれば、もう何も言うことなく「htmlと
スタイルシート入門」は十二分に果たされたことになります。
ただ、その中にあって、愚鈍な私でも「分かり易いな・やさしいな！」と思われるサイトが有ったら、上記６氏や 他著者のサイトなど横道をも楽しみたいと思います。しかし、基本は勿論このサイトです。 念のため。
Noriaki Akifusa氏 （非常に簡潔でわかり易い。
私がお手本にしています。またページのｈｔｍｌソースに感動しています。）
HEAD、META、
LINKの記述
正しいHTML１
（論理構造理解の為サンプル比較で説明） 「正しいHTML２」もどうぞ。
便利ツール紹介
（最初におことわりします。私の一人よがりの実習で、誤作動について責任は持てません。）
以上の各サイトへのリンク集で、HTMLの要点のあらましは網羅したと思います。なを、訪問したページの前後もお読
みいただければ万全かと思います。
スタイルシート（以下：スタイル）設定の場所
その前に、１．「HTMLのタイプのどれを使用」するのか、２．「HEAD部にどれだけの項目」を設けるか、
という構造の問題があります。前者は
「<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional
//EN">
<HTML lang="ja">」
とし、後者は手当たり次第に入れました。「便利ツール」で紹介済の「HTMLテンプレート」のご厄介に
なり記述したものです。下図チェックのレ点をご覧下さい。そうして出来たソースは図の下に表示しました。
レ HTML4.01 Transitional DTD
