〜
〜〜
◇１．スタイルシート入門
◇ 1-1 なぜスタイルシートが必要なのか
最近ではHTMLのみでページの見映えを工夫できるようになりましたが、もともとHTMLの初期は「論理構造」
を記
述するだけのものであって「デザイン」は範疇外だったようです。
最近「デザイン」の要望が
高まるにつれ、双方をHTMLで処理するには無理が生じてきたことから、HTMLには本来の「論理構造」だ
けとし「デザイン面」はスタイルシートに委ねるという方針が打ち出されました。
HTML3.2から
、この方針が採用され、ＩＥ3.0が始めてCSS Level 1をサポートし、漸次波及して行ったのですが、2
年後には、CSS Level 2が勧告され、より細かい設定が可能にになったということです。
、W3Cから
の勧告もHTML3.2、,4.0、4.01とバージョンがアップされ、今度は「XHTML1.1」の勧告となりました。
あの複雑怪奇な「XML」への前段階として登場するらしく、現用のHTML4.01 Transitional の汎用性に比べ
ると、かなり正確な記述が要求されます。しかし、Transitional的な形式はある期間残すようですが。
問題の「XML」についてですが、対応のブラウザはＭＳ−ＩＥのみです。ＭＳ-Word2000で編集して、
Web形式保存するとXML書式になり、そのソースを編集する際、なにがどこやら、非常にてこずる難解な
ものです。そうして、やたらとフアイル容量が大きいのです。
そうは言っても、時代の流れに
対応せざるを得ません。むしろ段階を経て「XML」に到達できることは、一面幸せかもしれないのです。
もしも私が「HTML」も知らずに、いきなり「XML」に入門したとすると、膨大なソースにギブアップし
て断念「ホームページ作成ソフト」だけがたよりになってしまうでしょう。
次世代の「XML」 はさておいて、当面「XHTML」に統一された時を考慮すると、これから作成するフア
イルは全面的にスタイルシートを導入しておかなければならないようです。一例だけを挙げても、あれほ
ど使い易すかった<br>に終止形の<br />を使いなさいというのだそうです。これは大変な
訂正作業になりそうです。
このような事情から「HP作成キット」の完成を断念（奥行きが広くて、もともと無理だったのです。
しかし、学習の一過程としては、有意義であり、次に繋がったことは確かです。）また「真似々スタイ
ルシート」とは別に「スタイルシート入門」として正面から取り組んで行く方向に方針を変更しました。
◇2．HTMLバージョンアップとタグの増減
◇ 2-1 HTML4.01 Transitional のタグ一覧
<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <B>
<BASE> <BDO> <BIG> <BLOCKQUOTE> <BODY> <BR>
<BUTTON> <CAPTION> <CITE> <CODE> <COL> <COLGROUP>
<DD> <DEL> <DFN> <DIV> <DL> <DT> <EM>
<FIELDSET> <FORM> <H1> <H2> <H3> <H4>
<H5> <H6> <HEAD> <HR> <HTML> <I> <IMG>
<INPUT> <INS> <KBD> <LABEL> <LEGEND> <LI>
<LINK> <MAP> <META> <NOSCRIPT> <OBJECT> <OL>
<OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q>
<SAMP> <SCRIPT> <SELECT>
<SMALL> <SPAN> <STRONG> <STYLE> <SUB> <SUP>
<TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH>
<THEAD> <TITLE> <TR> <TT> <UL> <VAR>
（非推奨タグ）
<APPLET> <BASEFONT> <CENTER> <DIR> <FONT> <IFRAME> <ISINDEX> <MENU> <NOFRAMES> <S> <STRIKE> <U>
以上８９点
◇ 2-2 HTML4.01 strict のタグ一覧
<A> <ABBR> <ACRONYM> <ADDRESS> <AREA> <B>
<BASE> <BDO> <BIG> <BLOCKQUOTE> <BODY> <BR>
<BUTTON> <CAPTION> <CITE> <CODE> <COL> <COLGROUP>
<DD> <DEL> <DFN> <DIV> <DL> <DT> <EM>
<FIELDSET> <FORM> <H1> <H2> <H3> <H4>
<H5> <H6> <HEAD> <HR> <HTML> <I> <IMG>
<INPUT> <INS> <KBD> <LABEL> <LEGEND> <LI>
<LINK> <MAP> <META> <NOSCRIPT> <OBJECT> <OL>
<OPTGROUP> <OPTION> <P> <PARAM> <PRE> <Q>
<SAMP> <SCRIPT> <SELECT>
<SMALL> <SPAN> <STRONG> <STYLE> <SUB> <SUP>
<TABLE> <TBODY> <TD> <TEXTAREA> <TFOOT> <TH>
<THEAD> <TITLE> <TR> <TT> <UL> <VAR>
以上７７点
（HTML4.01 Transitional から下記１２点が削除されました。）
<APPLET> <BASEFONT> <CENTER>
<DIR> <FONT> <IFRAME> <ISINDEX> <MENU>
<NOFRAMES> <S> <STRIKE> <U>
◇ 2-3 XHTML1.1のタグ一覧と構造
<a> <abbr> <acronym> <address> <area> <b> <base> <bdo> <big> <blockquote> <body> <br> <button> <caption> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <head> <hr> <html> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <meta> <noscript> <object> <ol> <optgroup> <option> <p> <param> <pre> <q> <rb> <rbc> <rp> <rt> <rtc> <ruby> <samp> <script> <select> <small> <span>
<strong> <style> <sub> <sup> <table> <tbody>
<td> <textarea> <tfoot> <th> <thead> <title>
<tr> <tt> <ul> <var>
以上８３点
（HTML4.01 Strict にルピ関連タグ６点追加されました。）
構造自体に変化はありません。 ただ、タグに使用する文字は、DOCTYPE宣言のある文字を除き、
全部英数半角小文字に統一されます。
<br>は<br />の形になりました。ルビ関連要素として６点追加されました。
また、Transitional版が残る場合は下記の形になるのでしょうか。(//ENは原典が英語版である
ことを表示します。)
!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.1 Transitional //EN"
<html lang=ja>
<head>
<title>タイトル名</title>
</head>
<body>
<p>
<br />
</p>
</body>
</html>
◇ 復習 HTML文章の｢タグ｣と｢マークアップ｣について
○文書HTML4.01 Transitional の場合の記述・意味
「HP作成キット」や「スタイルシート序章」で書きましたが、整理して再度。
例：
<p align=center><font color=red size=5 face=ＭＳ 明朝>タグとは、要素とは
何</font></p>の場合、
形の上からみると、<p>、または<p ･･･>や<font ･･･>のように「<」の直後
に書いてある文字列が要素名で、単なる要素名に過ぎません。半角ス ペースを開いて区切られるとそれ
はもう要素名ではなく属性名ということになります。
要素名は、< と >の山形括弧に囲まれて、初めて「段落タグ」とか「フォントタグ」と呼ばれて
以下の「>〜<のように山形括弧に挟まれた「〜」の文字列に作用を及ぼします。若し途中の文字
列にフォントを変更したいのなら、一旦</font>の終止形を記述してから、新たに<font ･･･>
と記述することになります。
○要素・属性・属性値
例文から、p を要素 alignを属性 centerを値、と種類別けします。
要素名としては、このページの例だけでも、html、head、title、body、p、font、br等が挙げられ、これ
ら要素名を「<（小なり不等号記号）」と「>（大なり不等号記号）で囲んだものが「タグ」で、
「命令や指示」を与えます。
この説明に従って上の「<font color=red size=5 face=ＭＳ 明朝>
」を考えると、<と>の山括弧内全体を「フォント・タグ」と言うことができます。
通常、要素とは<p> のようにタグそのものを呼ぶ場合と <font color=redsize=5 face=ＭＳ 明朝>まで
の属性と値まで指して言う場合があります。また例えば、<p>〜</p>や<font>〜</font>の
ように〜の内容を含めて指す場合もあります。
タグは単に<p> とか<body>というように要素そのものだけを指します。属性とは、要素その
ものに対してどのような表現をするのかを指示し、また、値は属性の指示に対して具体的な形式や数値等
をあらわします。
（フォントについては、ＩＥではデフォルトで（初期設定で） color＝黒色、size＝３、face＝MSp
ゴジッ クに）定めてありますので現在は必須とまではいたりませんが、他のタグについて、特別なタグを除いて
属性、属性値は必須です。）
要素名、属性名 等、その他について下記サイトをご覧下さい。
Web作成支援 「初めてのホームページ講座」
このなかの、HTMLを覚えようーHTML4.01リフアレンスにあります。
エンプテイ要素の場合、表では「終了tag」欄にｘ印で記されています。ちなみに「ｐ」要素は△印で省
略可ということでした。
それが、また、「XHTML1.1」の覧では、エンプテイ要素の「ｂｒ」に終了形が必要になることなど紹介
されております。
と言うことで、開始タグ「<要素名>」と、その終了タグの「</要素名>」が記述されるま
での区間がマークアップされ「タグの命令」が実行され、タグ命令どうりブラウザによって処理され
画面上に表示されることになります。
と、これまでは”テキスト マークアップ ランゲージ”部分です。そこで、HTMLの前身とか基礎と
なっている「DTD」,「SGML」について、分かりやすく解説したサイト「Web作成支援
「初めてのホームページ作り
をご覧下さい。
（私もこのメルマガ講座の生徒です。）いろいろなWeb作成支援のサイトを探したのですが、全体像
が見渡せた上、分かり易いです。また、メル、マガのバックナンバーありますので、以後このサイトを
も参照しながら話を進めたいと思います。
◇参考 「Web セーフカラー」について
ページのカラー装飾の主なものとして。文字色、背景色、テーブル内の背景色、更には枠の色、
リンク文字列の色、そうしてスクロールバーの色にまで及びます。カラー抜きでは装飾が語れません。
◇そこで、カラーについて考えてみました。
●その前に予備知識として、先ず１６進数列の説明から入ります。
１６進数とは、１６になった次に１つ上に繰り上がるという変則的な数列です。
私たちが使い慣れている１０進法は、９の次が１０になり１０の代に繰り上がるるとい
うものですが、１６進法は「０〜９」の後は英字「A〜F」６字をつづけた１６文字を使った表記になります。
00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15（10進法の数列で16個あります。）
00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F（16進法の文字列で16個有ります）
次の17番目（00スタートなので、数では16です）以降を表すには、１の代の
「10」「11」〜・・・・・・・・・・・・・・・・・・・・・・・・・・・・・〜「1F」になります。その次は、２の代を使い
「20」「21」〜・・・・・・・・・・・・・・・・・・・・・・・・・・・・・〜「2F」になります。
このようにして１６進法に直して数えていくと、最後は「FF」で終りになり「255」
の数を表しています。
数学の順列、組み合わせからも、１６ｘ１６＝２５６通りの結果になります。即ち[２桁の文字列で
０〜２５５までの数値とか順位とかを表現]したことになるのです。
上述はただ、数の数え方の説明です。この数え方「0〜255」の数列を２桁の「00〜ff」で間に合わせ
ようということで１６進法使用になったのかもしれません。
●本題の「Webセーフカラー」の説明に入ります。
HTMLにおけるカラー表示は「＃RRGGBB」の形で表現します。
これで、２５６の３乗の16,777,216色（24ビットフルカラーと言います。）の表現が可能なわけですが、
その中にあって、どのプラットホームやブラウザでも忠実に再生するとみられる２１６色を定めました。
「Webセーフカラー」と呼ばれています。以下はその構成に就いてです。
「Webセーフカラー」では、３原色である赤色、緑色、青色の夫々の発光強度を０（を最低）〜２５５（を最強）
としその中から「５１番飛び」の0、51、102、153，204、255番目の強度の６箇所を抽出、使用するこ
とになっています。
そうして、
夫々を２桁の「00、 33、 66、 99、 cc、ff」で表示して「ＲＲ」「ＧＧ」「ＢＢ」に適宜入力す
ることで２１６色が作れることになります。
カラーチャートを参考にした方が早いこともありますが、慣れてくると大体の見当がついて
自分でできる人もいるようです。
一例を挙げますと、
１．赤色の場合、「#FF0000」となります。
即ち、RRが２５５（最大）の発光強度、
GGは00（最小）、BBも00の発光強度を与えて各色を混合させた結果なのです。
当然、次のことが類推できます。
２．「#00FF00」は緑色です。
３．「#0000FF」は青色です。
４．「#FFFFFF」は赤、緑、青色各色の発光強度が最大で白色になります。
５．逆に「#000000」は３色の発光強度が０なので黒色になります。
セーフカラーについては「
初めてのホームページ作り のWebSafeColorの記事で全てがわかります。 また、「 Webセーフカラー一覧表」
をダウンロードして、デスクトップにショウトカットを置くと非常に重宝します。
これには下記、３種類のカラー表示が載っています。この３種類についても、考え方もその意味も、
上の説明どうりなのですが表示方法がチョット違っているだけです。
１．「＃RRGGBB」の６桁表示（上記のとおり。）
２．「＃RGB」の３桁表示 （表示は上の簡略形に見えますが、内容は全く同じ。 ）
（RGB中には上の「00、33」等の重複した文字列を夫々０、３、６、９、C、Fの１字に
短縮したものと考えると分かり易く使い易いです。
理論的には１６進法の、０〜１５区間を「２つ置き」
に抽出、３つの色を夫々0、3、6、9、C、Fの６段階の発光強度に限定し、いろいろと組み合わせて、
混合色を作ったものです。これも、６ｘ６ｘ６＝２１６色になります。
３．３原色の発光強度を数値で「RGB(0,255,204)」のように表現
これも上と全く同じですが、数値の０、５１、１０２、１５３，２０４、２５５の６種に限定し
たものを使用、赤色の変化が６通り、緑色の変化が６通り、青色の変化６通りになりますので
全部で２１６色になります。
参照：別のページですが、「
名前（原語名）
付き色見本」をご覧ください。
１〜９やabcdefの文字が自由に使われています。このような表示もあるのです。但し色
あいについては保障されないかもしれません。
◇ 参考HPビルダー所感とスタイルシートの効用例
HPビルダー経験談とスタイルシート使用の一例から。：私のページ作成は「メモ帖」一辺倒でなく
「HPビルダー」主体で作っています。その際、大抵のページの下段にある「トップへ戻る」「目次へ戻る」
はある決まったページからコピーしていました。結果どうなったかと言いますと、</font> とか
、<font color="" size="" face="ＭＳ 明朝"> とかが
１００個内外も重複して並んでしまったのです。
これを削除したところ”15Kb”もフアイル容量が減りました。HPビルダー内でのコピーには注意が必要です。
（これ以来、何をコピーするにも一度メモ帖に写しそれからコピーするようにしています。絶対に書式等を
引きずってこない利点があるからです。特にネット上からのコピーにお勧めです。）
まだ、その先があります。上のように何時間もかけて折角削除整理したものが、再びビルダーで開く
と「元の木阿弥」で削除以前と同様になってっしまったのです。これには参りました。やむなく今度はビ
ルダーの「自動修正機能」をなくすようにしました。方法は「ヘルプで自動修正」を探すと「自動修正を
off」にする方法がかいてありました。ツール→オプション→一般から「html構文エラーを自動修正する」
のチェクボックスの「レ点」をoffにします。」
ここでまた、新たな発見をしました。「上の自動修正オフ」のお陰で、HPビルダーのhtml構文チェ
ックが手動で行えることです。完全かどうかはさておいて結構役立っています。このシリ
ーズでインターネット上のhtml構文チェックを紹介させていただきましたが、その前段階に手軽にチェッ
ク出来る便利さがあります。
この「私の経験」は全部メモ帖を使いhtml文章で作りました。「何故」かと言いますと、このページ
には殆ど、<font color="" size="" face="ＭＳ 明朝"> や
</font> が有りません。スタイルシートで <head> 部に「P」セレクタ「H」セレクタ「LI」セレクタ
を指定して、その仕様を埋め込んで有りますので <body> 部にはその必
要はないからです。注、このページに限っては<p> も最初に１個、</p> も最後に１個付けて
あるだけです。という訳で殆どタグ無しの文章なので、普通のワープロに過ぎなかったからです。
スタイルシートを使用することで、随分手間が省ける一例として掲載しました。(参照：ページのソース)
もう一つ<p> を「改行に使用するのは間違い」ということです。確かに<br>２個分
改行されますが、若し<p> タグに「スタイル」を設定した場合「改行」のつもりの<p> タグ
に「スタイル」が実行されてしまうからです。これからみても、本来の使用法でないことが分かります。
|
