◇3. 続「ＨＴＭＬ」について（スタイルシートへの序章 ３）
◇ 覚えておきたいこと
◇ 3-1.使用する文字について
- DOCTYPE宣言では大文字・小文字を識別します。Transitionalの場合は下記の記述に
限られます。
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- <（小なり括弧）および>（大なり括弧）で挟まれた文字列を< >を含
めて「タグ」と呼びます。
この<>内には「Ｗ３Ｃの規定に基いたタグで記述」する訳ですが、すべての半角の英数文字
と、規定された半角の記号等が使用されます。
アルハベットについては○４※の「フアイル名」を除いて大文字、小文字の識別はされません。半角
英数文字であれば混同で使用しても現在は通用します。しかし、次期バージョンと目される「
XHTML（現在Ver1.1が勧告されている）」ではタグはすべて小文字と規定されます。
- 禁止文字
HTMLを書く上で絶対に「半角のカタカナ」の使用を禁じています。 これは常識ですから必ず守りま
しょう。文字化けを起こしてしまいます。全角であればカナも漢字も表示できます。
- ※「フアイル名」で特に注意する点は「アルフアベットの大文字、 小文字を識別する点で
す。」ですから正確に記入することが必要になります。これを間違えると、たとえ手元では画像や
音響の表現ができたとしても、インターネット上では何の反応もありません。ですから、アレッ！
おかしいな、と思ったとき先ず第一にチエックするのは大文字、小文字が正しく使われているかに
なります。
◇ 3-2 「絶対バス」と「相対バス」
随分と難しそうな名称ですが、具体例で説明しますと、インターネットサーフィンで、「アドレス
・バー」に表示される「URL」が「絶対バス」です。
用語：URL(Uniform Resource Locatorの略）はフアイルや画像などインターネト上にあるデータの
場所を示すものです。
次はgif画像等の解析サイトで/の多いのとHPの名称がマッチしているので参考にしました。
HP名：ミケネコ研究所 / 画像研究室 / 画像フォーマットアナライザー
URL：http://www.mikeneko.ne.jp/~lab/grp/analyzer/
1.「http://」から始まり→2.「サーバー名」→3.「サーバー内に設置されたユーザーのホルダー名」
→4.「フアイル名.htm」まで、順番をすべて記述する方法です。（注：index.htmlは何等かの条件
次第で省略できるようです。）
「絶対バス」では目的とするフアイルまでの「経路」全てを記述します。全部をこれで記述して間違
いはないのですが、そこまでやらなくとも、自分のサイト内なら「
現在のフアイルの位置から数えて目的のフアイルを呼びだせる」のです。それが、相対と呼ば
れる所以です。
（絶対バスに不便なところがあります。一度インターネットに載せないと手元でリンクの確認が
できないのです。今はASDL常時接続なら平気ですが、ダイアルアップのときは非常にこたえまし
た。やむなく「相対バスで関連付けを確認してから、「http://」から始まり→2.「サーバー名」
→3.「サーバー内に設置されたユーザーのホルダー名」を上書きしたのです。絶対は絶対間違い
が無くて結構ですが、なるべく柔軟性のある相対バスを使用したほうが、いろいろと楽のようで
す。余談でした。）
図説：相対バス
下図のような、デレクトリー（ホルダー）構成の場合
用語：デレクトリーは殆ど＝ホルダーですが、階層「/」の意味であると理解すると、「../(2段
上位のデレクトリー)../（１段上位のデレクトリー）、(現在のフアイル)、/(１段下位のデレク
トリー)、/(2段下位のデレクトリー)等の説明が理解できます。
下図はデレクトリー構造図です。（「￥」は「/」スラッシュと同じです。）
●Ｃ￥My Documents ￥toshima フォルダを作りました。
●その「toshima」ホルダーの中に、
トップページの index.html や他の.htmlフアイル及び画像フアイル、または、
ジャンル分けした多くのフォルダを入れました。これらは、皆、兄弟関係とか同格になっています。
１．その内の[現時点フアイル]と[D点フアイル]を例にとり、相対関係を考えるとき「現時点フアイル」に対して「D点フアイル」は、
兄弟関係にあり、ただ単に「フアイル名.html (または.jpg .gif等)」を記述すればリンク付け等、
関連付けの目的が達せられます。この様に自分の地位から相手の地位を割り出して、二者の関係を
表示することを相対バスと言います。
大抵の場合、上記の例が多く、私も単純形式の上記をぺたぺた多用していましたが、フアイル
も１０００個を越えたあたりから、フアイルを探すのに時間が掛かるような状況になりました。
現在は区分けのフォルダ内にフアイルを納めるようにしていて、６〜７０個位のフォルダに分類しています。
旧ファイルも折を見て新規フォルダに移動を試みていますが、そのため、リンク切れが生じバスの修正に時間をかけています。
左図を参考に「バスの記述法」考えて見ます。
その前にトップページの最下段[本文のフレームにする]をクリックしてください。(２フレーム構造からの解放です。)
Ａ：兄弟関係にあるフアイルの場合
現時点フアイル ]から[D点フアイル]を呼び出す場合
ただ単に、[ D点フアイル名 ]となる。
Ｂ：叔父→甥の関係にあるフアイルの場合
○１の場合です。(これは、良く使われます。)
具体的にAかBかCのフォルダ名と「現世代フォルダ内のフアイル名」で、
* 呼び出し側の[現時点フアイル]名は勿論のこと[現世代フォルダ(本家のフォルダ)]名も
記述しません。
例えば、[A/○○.html ] 又は、[ B/○○.jpg ]となります。
私のトップページ参照：本文欄[index2.html]フアイルと[au]フォルダは兄弟関係、[au]の子[keitai.html]を呼び出すには、
[ au/keitai.html ] と記述します。
--- --- ---
１の逆の場合（甥→叔父の関係）
[ ../現時点フアイル名 ]
参照：[ keitai.html ]から、[index2.html]を呼び出すには、[ ../ index2.html]となります。
*親フォルダ=[ABC・・・フォルダ名(ここでは,au)]は記述しません。
--- --- --- --- --- ---
Ｃ：従兄の関係にあるフアイルの場合
図：○２の場合です。(その１)
[一世代前のフォルダ名]それと兄弟関係にある、例えば[Bフォルダ]とすると、
[Bフォルダ]と[Bフォルダ内の対象フアイル名]を記述します。
[ ../一世代前のフォルダのBフォルダ/一世代前フォルダ内の(対象)フアイル名 ]となります。
私のＨＰの[jtrim]の実例で説明いたします。[jtrim]の上下のツリー構造は下記になっています。
アドレスバーに表示されるURLの [ http://nekomomochan.web.fc2.com/ ]は
サーバーにアップロードした [ toshima ]フォルダです。
(１．[jtrim]の子のフアイル)
toshima / jtrim / jtrim.html (を、[現時点フアイル]とした場合)
(２．JTrimフォルダ内容)
toshima / jtrim / jtrim.html
toshima / jtrim / 他のhtmlフアイル・画像フアイル
(３．額縁付き画像フアイル)
toshima / gakubuti / junkosen.jpg
toshima / gakubuti / yosikiri-gosei-waku.jpg
toshima / gakubuti / goisagi-gaku4.jpg
toshima / gakubuti / goisagi-gaku5.jpg
toshima / gakubuti / goisagi-450waku.jpg
(４．貼り付け合成手順説明画像フアイル)
toshima / gosei / fune-iruka-iri-wart2,jpg
toshima / gosei / 他の画像フアイル
以上の、フォルダ・フアイルを使って、「画像レタッチソフトJTrim」のページを作っています。
[index2.html]フアイルと[jtrim]フォルダと[gakubuti]フォルダ
及び[gosei]フォルダ は兄弟関係にあります。
今、[現時点フアイル]のjtrim.htmlから、
親の兄弟の子、即ち従兄の[ junkosen.jpg ]を呼び出す場合です。
相対バス記述は、[ ../gakubuti/junkosen.jpg ]になります。
(「画像レタッチソフトJTrim」のページのソース後半を見ると、
[../]１個 が多く使われ、皆従兄関係です。)
トップページのindex2.html]フアイルに戻すには、
[<a href="../index2.html">トップページへ戻る</a> ]です。
*呼び出し側のフアイル名と、
その親の現世代フォルダ名、ここでは、[jtrim]は不要で、
呼び出される側は、[ ../ 以下フルバス ]になります。
--- --- --- --- --- ---
祖父の兄弟の子を呼び出す場合
○３の場合です。(団体のHPなら別ですが、私の小さなHPでは余り例がありません。)
ようやく、１例探し出しました。
１）アドレスバーからの検証
[野鳥関係目次]をクリックします。
→[シロハラ]をクリックした時のアドレスバー表示は
[ yacho2/sirohara2/sirohara2.html ]
→「野鳥集３(中山正夫野鳥アルバム第３集)」のアドレス バー表示は
[ nakayama3\yachokan3.html ]です。
[ yacho2 ]と[ nakayama3 ]は、兄弟関係です。
[ yacho2 ] の子[ sirohara2 ]の子[ sirohara2.html ]から
[ nakayama3 ]の子[ Yx11.JPG ] を呼び出したところです。
呼び出し者 [sirohara2.html]は、記述の必要ありません。
その親フォルダ[sirohara2] は、[ ../ ]で表現しています。
その親フォルダ[yacho2] も、[ ../ ]で表現しています。
相対バス記述は、[ ../../nakayama3/Yx11.JPG ]になります。
若し、[ ../ ]でなく[sirohara2]、[yacho2]で記述したらどうなるか？
結果は×です。[ ../ ]は、親の代名詞ではなく、世代全般を表しているようです。
ですから、[ nakayama3 ]フォルダは、[ sirohara2.html ]の
２世代前の[ yacho2 ]と同格の兄弟関係にあり、リンクが張れることになります。
２）シロハラ画像のプロパティからの検証
[野鳥関係目次]をクリック→[シロハラ]をクリックして、
最下段の綺麗なシロハラ写真を右クリックして、プロパテイを見て下さい。
アドレス(URL)欄に[ nakayama3/Yx11.JPG ]と表示されます。
[ sirohara2.html ]から見て
親は、[ sirohara2 ]フォルダ、
その親[ yacho2 ]フォルダの兄弟が[ nakayama3 ]フォルダ。
その[ nakayama3 ]フォルダの子[ Yx11.JPG ]を呼び出して使用しているのです。
相対バス記述は [ ../../nakayama3/Yx11.JPG ]になります。
エクスプローラ階層の[下位フアイル]から[トップページ]に戻るには
前述「祖父の兄弟の子を呼び出す場合」の逆になりますが、
ただ、ひたすらに[ ../../../トップページのフアイル名.html ] と記述します。
図の○5、○6、○7の場合、世代が上がる毎に[ ../ ]を１つ重ねます。
◇ 3-3.「実体参照」について
HTMLではソースの記述のために予約されている文字があります。
それらの文字を画面上に表示するには、「実体参照」という概念に添って記述する必要があります。
具体的には、下記の記号がHTMLでは実体参照を用いる必要があります。
（実体参照文字は本来は半角文字ですが画面に表示させるため、全角文字で書いてあります。）
全角文字です。 半角文字&の所に＆amp;を使用して表示 画面に表示
＆ａｍｐ；ｌｔ； ＝ < 「<」
＆ａｍｐ；ｇｔ； ＝ > 「>」
ダブルコーテーション
＆ａｍｐ；ｑｕｏｔ；＝ " 「"」
＆ ＝ & 「&」
半角スペース
＆ａｍｐ；nｂｓｐ； ＝ 「 」
実は次項の「真似々スタイルシート」の「HTML文章のチエック」を受けました。
その中には、微に入り細に渡って間違い箇所の指摘と訂正法が示されています。
私が何処を間違い、どのように指摘訂正されたのかをつづってみました。実体参照の全てがお分かり
いただけると思います。
解説文です。
実体参照というのは、< や & みたいな書き方の
こと(正確には後者は文字参照)で、テキスト中に "<" や ">"
など直接表現できない文字を書くときの方便です。実体参照は "&" で始まって
";" で終わります。
指摘：`&xx;` は不明な実体参照です。
*3*
"<" や ">" など実体参照で参照される名前は、HTMLごとに
決まっています。大文字小文字が区別されるので、 "&" のつもりで
"&" と書くことはできません。WWWブラウザによっては同一視している
ものもあるようですが、本来は間違いです。また、 abc<xyzという風にしてしまうと、
"<xyz" が実体参照だとみなされてしまいます。
CGI呼び出しでのパラメタ区切りは歴史的に & です。この &
も & と書かなければならないことに注意してください。
<A href="uso.cgi?foo=1&bar=2">ではだめです。
<A href="uso.cgi?foo=1&bar=2">としなければなりません。&
のままで動作するのは偶然です。上の例では、たまたま &bar という実体
が定義されていないからに過ぎません。 <A href="uso.cgi?lt=1>=2">では、
<A href="uso.cgi?lt=1>=2">と解釈されてしまいます。
CGI呼び出し中でも実体参照を用いなければならないことは、
RFC1866(
J) 8.2.1 や
HTML4.0(
J)などに書かれています。これにからんで、パラメタ区切りは "&" じゃな
くて ";" にしましょうとも書かれていますが実際そうなりつつあるんでしょうか。
少なくとも、Perlの非標準のライブラリ
cgi-lib.pl や、標準の
CGI.pm
は、比較的新しい版ならどちらの区切りでも受け付けてくれます。
プロバイダ指定のCGIを利用する場合、この"&"
を実体参照で解説しているものはまずありません。言われたとおりに書かなけりゃ動かないと脅されていると思いますが、
"&" と書き直してみてください。動くはずです。これは、CGI側の制約ではなく
WWWブラウザ側の問題だからです。
文字参照
&#NNN;` は限界を超えた文字コードです。参照できるのは `&#MMM;` までです。
*6*
&のような文字参照で参照できる文字コードは、HTMLごとに定められています。例えば、HTML2.0や HTML3.2では
255まで、HTML4.0では 1114111までです。これはSGML宣言に記述されています。
これより大きな値を与えると警告されます。
MozillaやMSIEではチェックされません。DTDが存在しないからです。
メタ文字 `X` は `&xx;` と書かなければなりません。
**
<SCRIPT>など一部のタグの要素を除いて、"<" や
"&"などをテキスト中に直接書くことはできない、と思ってください。
つまり、書きたければ実体参照を用いて、"<" や "&"
と書きます。<PRE>中にはそのまま書けると思っている人もいるようですが、
<PRE>中でも実体参照を用いなければなりません。
本当は、abc & lt xyz のように書くと、この"&" は実体参照では
ないのが明らかなので、正しく"&"と表示されます。
これはSGML的に誤りではないのですが、ちゃんと実体参照を用いて書くようにしましょう。
HTML4.0(
J)
では、16進数の文字参照が記述できるように拡張されています。
テキスト中の `"` は `"` と書きましょう。
*
安全のために、テキスト中の引用符"を実体参照を用いて表現するように促す警告です。実際にはその必要はありません。
下は実体参照ではありませんが、目にとまりましたので載せました。
<HTML> には LANG 属性を指定するようにしましょう。
*3*
<HTML>には、LANG属性を使ってその文書の言語を明示しておくことが
WAI
で薦められています。日本語の場合は次のようにします。
<HTML lang="ja">
<HTML lang="ja-JP">
◇3-4.「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ビルダー」主体で作っています。その際、大抵のページの下段にある「トップへ戻る」「目次へ戻る」
はある決まったページからコピーしていました。結果どうなったかと言いますと、</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> も最後に１個付けてあるだけです。
という訳で殆どタグ無しの文章なので、普通のワープロに過ぎないものです。
(当初は上記の筈だったのですが、H21年3月26日の加筆訂正で、<br><br>のbrタグ2個使用を
<p>タグに直しましたので、pタグが1対だけでなくなりました。また、その他<pre>タグや
<span>タグと<hn>タグも、多く使うようになりました。)
スタイルシートを使用することで、随分手間が省ける一例として掲載しました。
参照：このページのソースをご覧ください。< >タグが左隅の一寸あるだけで、殆どが和文になっています。
ホームページビルダーやワードのWEB化したソースでは、殆ど１行ごとに FONT タグを使用していて、ソースの
8〜90％？を占めています。お目当ての和文を探すのに苦労するのとは大違いです。
もう一つ<p> を「改行に使用するのは間違い」ということです。確かに<br>２個分
改行されますが、若し<p> タグに「スタイル」を設定した場合「改行」のつもりの<p> タグ
に「スタイル」が実行されてしまうからです。これからみても、本来の使用法でないことが分かります。
|
