HTML初歩の初歩

〜その10〜
使いやすいPAGE


コードの参照

自分でテキスト・エディターを使ってタグを打ち込み HTML を書き始めると、他人の書いたページのソース・コードが気になりだすかも知れません。私のページに書いてある範囲内で打ち込んでいるならば、それ程酷いソースにならないと思います。しかし世間は広い。思わず笑い出してしまうようなソースを平然と公開しているページも山ほどあります。(エキスパートから見たら私のソースもお笑いものかも知れません)

揚げ足取りのような真似をして、自分の貴重な時間を無駄にしてはいけませんが、親しい友人が恥ずかしいソースを書いているようなら、メールでそっと教えてあげましょう。(友情を壊さない方法で、、、)

ページのタイトル

Net Surfingをしていて参考になるページは、「保存して」幾度も参照したいものです。Internet Explorerでしたら、「ファイル」から「名前を付けて保存」を選び「Webページ、完全(.htm,.html)」をクリックすると、HTMLファイルとそのページで使われている画像とCSS、JavaScriptなどが入ったフォルダーの計二つが保存されます。

<head>〜</head>内の<title>〜</title>に書かれた名前が、UAの左上隅にページのタイトルとして表示されるのは既に述べた通りです。このタイトルが「初期設定」では保存されるファイルの名前となります。

企業のページの中には非常に長いタイトルを付けたり、Windowsでは使えない文字を使用したタイトルがここに書かれている事があります。そのまま保存すると、その長くて時にWindowsで使えない文字を含んだタイトルがファイル名になって保存されてしまいます。

Windowsでファイル名に使えない文字
  ¥    ⁄    :    ,    ;    *    ?    "    <    >    |

おまけに「Webページ完全」では、.htm という拡張子の付いたHTMLファイルと、背景画像や挿入画像の .gif.jpg などのファイルが入ったフォルダーが同じ名前で保存されるのです。これらのファイルとフォルダーを CD-R/W を使ってバックアップしようとすると、使えない文字が入っていると言われて名前の変更をさせられる。変更しないと CD-R/W には焼き込めないのです。さらに名前を書き換えてしまうと、参照が出来なくなってしまうから折角保存した画像が読み込まれなかったり、 CSS まで無視されてしまいます。

こんな不便をユーザーに強いる諸悪の原因は、長いファイル名であり変な文字をタイトルに使った作者です。くれぐれも皆さんはこうした文字をタイトルに使わないよう気をつけて欲しいものです。

CSS や JavaScript、はたまた GIF(ジフと発音するようです)や JPEG(ジェイペグと言われるようです)を再利用するのでなければ「 Web アーカイブ、単一のファイル( .mht )」を選んだ方が、サイズは少々大きくなりますがファイルも一つにまとまっていて、片割れを見失う心配もないでしょう。

ところがこうして保存したページの内容が「更新」されていないか確かめたい場合や、友人にもその役に立つページを教えてあげようとした場合に問題が生じる事がしばしばあります。アドレス(URI)が分からなくなっている事があるのです。かろうじて同サイト内の別ページへのハイパー・リンクがあれば、逆算して当のページのURIを友人に教える事が出来たりします。

これでは極めて不便ですし、ページ作者の不親切・怠慢と言われても仕方ありません。自分の作ったページを参照してくれるという方の便利を少し考えると、ページごとにURIを明記するべきなのです。

このサイトのように、ページの右下に URI を表示すると後々の利用が大変楽になります。さらに、おかしな事ですが「自分のページへ」のハイパー・リンクを貼っておくと、更新の確認がワン・クリックで済みます。印刷した場合にも情報源が表示されて好都合です。余りこうした事をやっているサイトを見かけませんが、是非とも普及してもらいたい習慣です。

更新日の明記

また情報の新鮮さを保証するためには、更新日時を添えることも有用です。「ドッグ・イヤー(世間一般に比べて犬の年齢並に進み具合が速いコンピューターの世界を指してこう言うようです)」とも言われる PC の世界です。3年も4年も前の情報では役に立たなくなっていたり、時代に合わない記述が目立ったりするからです。

簡単に更新日を入れるには、JavaScript の利用が便利です。ただし表示の仕方がUA(ブラウザー)によって多少異なり、場合によっては上手く表示されない事があることも知っておくべきです。最も確実なのは大きな更新をした場合に、その都度更新日時を文末にでも書き込む事です。

JavaScript を HTML 中に書き込むには、CSS 同様外部ファイルにして読み込ませるのがスマートです。この方法なら JavaScript が利用できないUAでも、単に表示できないだけでそれ以上の不具合は生じないと思います。

参考までに私のサイトで利用している更新日時自動表示のコードを書き添えておきます。ここでは一番単純なインラインに書き込む方法を紹介しておきます。

アクセシビリティー(Accessibility)への配慮

Webページを利用するのは、きらびやかなカラー画面や(こけおどしの)動画に驚く人ばかりではありません。バリアフリーという言葉を良く耳にします。各人の感覚や身体機能に差があっても、情報に接する事が健常者と同じ様に出来る社会作りが念頭にあるようです。

しかしバリアフリーという言葉に、バリア(障害物)があるという前提を感じさせる点で消極性を認め、より積極的にあらゆる人があらゆる環境で同じ様に情報に接する事の出来る理想を、ユニヴァーサルという形容詞で表現する例が見かけられるようになりました。

健常者の場合でも出先の携帯端末の小さくて見難い画面で情報を得ようとする状況は、これからますます増えてくるでしょう。そうした状況を考慮しないページは、真の意味で役に立つページとは言えません。大きな画面にフルカラー、マウスでのクリック操作を前提にしたページは、言うならば特定の場面でだけ有効なページと成りかねません。

それでは実際にページを作る際には、どんな配慮が必要でしょうか。W3Cの中にあるWAI(Web Accessibility Initiative)を見ると、ユニヴァーサルなページ作りの指針が示されています。

WAI のページ冒頭には World Wide Web の発明者で W3C のディレクターを務めている Tim Berners-Lee の次の言葉が引用されている。

"The power of the Web is in its universality.
Access by everyone regardless of disability is an essential aspect."

アクセシビリティーは重要度順に基準を満たさなくてはならない(must)Priority 1、満たすべきである(should)Priority 2、満たした方が良い(may)Priority 3に分けられる。

以下、各段階から主要な基準を紹介しておく。詳細なガイドラインはWAIを参照されたい。


MS Japan のアクセシビリティサイト

マイクロソフト社でもアクセシビリティサイトで、様々な情報を提供しています。日本語のページですので読みやすいでしょうから、一度はご覧下さい。そこから本家USのAccessibilityのページへもリンクしています。

MSの色覚に障害を持っていたとしたら、あなたのサイトは見えるでしょうか ? というページも必見です。

第1回  第2回  第3回  第4回  第5回  第6回  第7回  第8回  第9回  詳細目次  ページ冒頭

>


saiton.net/easy/html10.htm

©SAITO Toshiyuki