隔週金曜日配信 What's New 2005年7月22日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
初心者のためのホームページ作り/Web for beginner
http://www.scollabo.com/banban/
＜最終回＞
banban@scollabo.com
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
まる３年間にわたって配信してきましたが、今回が最後となりました。皆様
のご愛読に感謝します。
今週のコンテンツ
■ やさしいHTML (最終回) --- HTML作成の心得
■ Tips --- HTMLのこれから
■ 最終回に当たって
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆やさしいHTML --- HTML作成の心得
何度もお伝えしてきたとおり、HTMLはレイアウトを施すものではありません。
あくまでコンテンツを論理的な構造の中で配置することが求められます。つま
り、物理的なレイアウトを造作するものではありません。
■論理構造の目的
今やインターネットはインフラ (社会資本) 化し、深く一般家庭にまで浸透し
ています。そして今は、誰でも何時でも何処でも自由にネットに接続できる環
境が整いつつあります。
同時に、個人的ないわばパーソナル・メディアとしてインターネットを利用
する人も加速度的に増えています。その証拠に、日本における Webページの数
が１億を突破しています。
このようにインターネットが一般化する中で Webページの作成において、昨年
には日本工業規格 (JIS) でアクセシビリティが制定されています。
これは、すべての Webページがすべての環境の、すべての人々に平等に閲覧
できることを目的としています。
アクセシビリティの根幹を成すものが「論理的な構造」を正しく構築するこ
とであることは何度か説明してきたとおりです。
閲覧するソフトウェア (ブラウザ) を意識することなく、等しく誰にでも情報
を伝えることは、もはやページ作成者の使命でもあります。正しいHTML、アク
セシビリティ、ユーザビリティはここから始まります。
■正しいマークアップ
情報 (コンテンツ) をタグで囲むマークアップ作業は決して難しいものではあ
りません。ページを作成するためには、何よりも情報がなければなりません。
しっかりとした中身を持ったコンテンツが先です。
その上でマークアップ作業のための設計に入ります。そのほうが効率的で間
違いが少ないものです。
マークアップする際の設計 (デザイン) の段階では、どこが見出しで段落なの
か、あるいは挿入する図画像の位置や大きさなどを紙ベースでスケッチします。
これは私の方法ですが、設計図は使うタグを決定付ける役目もあり、比較的
効率よく作業を進められます。紙ベースで残しておくと、後々の更新作業の際
に、非常に重宝します。
■レイアウト (ビジュアル効果)
派手で綺麗なビジュアル・デザインは人目を引く効果があり、多くのサイトで
華やかに展開されています。
しかしながら、HTMLはレイアウトを構築するためではありません。せっかく
作ったページでも、ブラウザ銘柄や環境が異なるとそのレイアウトは激しく崩
れ見られないことも多々あります。スクリプトはなおさらです。
しっかりとした論理構造の中で作られたページのレイアウトは、できるかぎり
スタイルシートを使いましょう。仮に閲覧者の環境でスタイルシートが再現さ
れなかったとしても、伝えたい情報を正しく表現することができ、表示の問題
になることが少ないのも特徴です。
ある意味で、見た目の派手さは閲覧者に印象を持ってもらう手法となるかもし
れません。しかし、くどいようですが Webページの最大の目的は「見た目」で
はなく「情報」を正しく伝えることです。
見た目の、いわばビジュアル・デザインだけに固執するのではなく、有用な
情報をデザインすることが大切です。
￣￣￣￣￣￣￣
色やスクリプトに頼ったページでは、閲覧者を制限する可能性が高くなりま
す。逆に言うならば、色やスクリプト、ビジュアルデザインに頼らなくても、
十分に情報を伝えられる設計が望まれます。メイン・デッシュはあくまでもコ
ンテンツであり、色使いやスクリプト、ビジュアル・デザインは添え物に過ぎ
ません。主客転倒するようなページは、すぐに飽きられます。
■ページのタイトル
ページのタイトルは各ページやサイトの中身を端的に現した表現にしましょう。
例えば「ばんばんのホームページ」だけでは何のことか分かりません。タイト
ルは検索サーチで表示される重要なキーワードとなります。また、ブログのト
ラックバックにも利用されます。
かといってだらだら長ったらしいのも控えましょう。タイトルを決めるのも
作成者のセンスです。
タイトルは titleタグで囲みますが、HTMLでは必須となっており省略すること
ができません。必ず設定してください。
■見出し
見出しは重要です。音声ブラウザでは見出し部分を「声色」を変えて視覚障害
者に見出しを分からせます。テキストブラウザ (文字だけのブラウザ) では、
他のコンテンツと区別するため中央ぞろえでレンダリングします。
また、検索サーとエンジンも見出し部分を収集する「クセ」があり、検索結
果に反映します。
通常の視覚系ブラウザでは見出しタグに囲まれた文字列は強調 (太字) で表示
され改行されます。これはあくまでブラウザの仕様であって、具体的な表示方
法があるわけではありません。 (すべてのタグも同じである)
太字にするために見出しタグを使うのは明白な文法違反です。また、文字の
大きさを変えるために利用するのも文法違反となります。
■連絡先の明記
閲覧者が訪れ、そこに表された情報に関心を持ったとき、もしかしたら閲覧者
は作者とコンタクトしたくなるかもしれません。あるいは誤記や誤りがあった
ときそれを指摘してくれるかもしれません。
インターネットの側面にコミニティがあります。互いに連絡を取ったり、リ
ンクしあったりと、その輪が成長していきます。その意味でも addressタグを
用いて、連絡先を明示することが望まれています。
ただし、自動メールアドレス収集ソフトによって、スパム (迷惑) メールや
ウィルスを送りつける輩がいるので、扱いは慎重を要します。
■テーブルの功罪
レイアウトを構築する場合に、テーブルを使うケースが非常に多いものです。
手軽にレイアウトをデザインでき、各情報要素を横に並べられる面を持ってい
ます。
しかしながらテーブルは厄介なもので、ブラウザによっては表示データのす
べての読み込みが完了しないと、その間はまったく何も表示せず、通信環境に
よってはイライラさせられるものです。
また、非視覚系ブラウザではテーブルのレンダリングが苦手です。テーブル
は各行のセルを横から解釈します。そのため、縦列の関連がうまく伝えられず、
閲覧者は困惑します。
便利のはずのテーブルが、逆の結果を生むとも限りません。テーブルはレイ
アウトに使うのではなく、あくまで表組として利用しましょう。方法は他にも
あります。
テーブルの更新作業って、けっこう厄介です。私は表組以外ではレイアウトに
用いるのは遠慮したいと考えています。大きな表の更新すら大変なのだから。
■画像の扱い
分かっているようで分からないのが画像の扱いです。つまり、画像がなければ
コンテンツとして成立しないという特殊な場合を除いて、容量の大きい画像を
使う意味がないということです。
音声ブラウザもテキストブラウザも、そして点字ブラウザも画像は表示でき
ません。そのために alt属性で画像の説明を行うのですが、代替テキストにも
問題があり、より複雑にしてしまう場合もあります。
例えば「ばんばん株式会社」のロゴを画像化した場合、その代替テキストには
どう表現したらいいでしょう。「ばんばん株式会社のロゴ」、「ばんばん株式
会社」、さてどうしましょうか？
ロゴに何の意味がなければ何も入れなくていいのです。 alt="" とするだけ
で十分でしょう。ただし、文字を画像化した場合には、その漢字とまったく同
じテキストを代替テキストとすれば、視覚障害者にも通じます。
■リンク先の明示
HTMLという言語の素晴らしさは、他の文書やその所在をハイパーリンクできる
ことでしょう。たった１行で世界中に案内できる非常に有用な機能です。
時折見かけるのがリンク先を明示せず「ここ」とか「こちら」などといった曖
昧なものがあります。あるいは、スタイルシートを使って下線を表示せず、他
のテキストと同じ文字色ならば、そこがリンクとは分かりません。
一般的な視覚系ブラウザでは、リンク部分に下線と他のテキストと異なる文字
色を表示させ、そこがアンカーリンクであることを明示します。何でもないよ
うに見えて極めて重要な機能です。
リンク先は相手先のページタイトルを正しく明示するのがマナーです。ネット
上のマナーをネチケット (ネット上のエチケットの意) と呼ばれます。無駄な
不快感を与えず、よりよきコミニティを創出できることでしょう。リンク先を
「ここ」とか「こちら」では失礼に当たります。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆Tips --- HTMLのこれから
Webの世界標準を制定する機関である W3Cのこの３年間の韓国やドラフトなど
を観察すると、HTMLに関する事案が１つもありません。せいぜいスタイルシー
ト (CSS3) 程度で、HTMLに関する新たな取り組みは終わったと考えるのが当然
のような気がします。
インターネットも新たなステージに向かい、とりわけ Webサービスが主流にな
りつつあり、XML、XHTMLを中心とした次世代マークアップ言語の時代となって
いるようです。
特に最近は XHTMLを駆使したブログ (Weblog) が代表的な例でしょう。
HTMLの活用はすぐにはなくならないでしょう。しかし、メタデータという人間
よりもネットワークにつながるコンピュータが理解可能なデータによって、今
までにない情報とサービスの広がりを見せていることは注視に値します。
HTML4.01Strictで学んだことは、すぐにでも XHTMLに移行可能です。その時、
新たなマークアップ言語 XMLに行き着きます。これからの10年を考えるとHTML
はやがて忘れ去られる運命なのかもしれません。より高度で難解な XMLは、他
のツールや言語と結びついて、我々にたくさんのサプライズを与えるでしょう。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆最終回に当たって
第１号を配信して以来今日まで私自身にも様々な出来事や変化がありました。
メールマガジンを配信するにつれ私自身も勉強の毎日でした。
当初は週１回のペースで配信し続け、我ながらよくがんばったと思います。
その意味では非常に満足し、小さな達成感もあります。誤字脱字が多く読みに
くかった点もありましたが、読者の皆様に励まされてここまで来ることができ
ました。
HTMLは簡単な反面、奥が深く学ぶにつれその難しさに直面します。そしてそれ
が面白くもあり、さらに奥に入り込むことができるでしょう。
ページ作りはHTMLだけではありません。閲覧者の立場を考え、あらゆる工夫
を要求されることもあります。軽く小さな容量で使いやすさを考えることも、
パズル的な楽しさもあります。
そして何よりも大切なのがその中身、コンテンツです。有用で便利で、楽しい
ページを作ることができれば、きっとたくさんの訪問者があることでしょう。
見せるテクニックではなく、コンテンツを正しく伝える方法とマナーを身に
着けてください。HTMLにはそうしたたくさんの方法もあるのです。
皆様のこれから Webサイト構築に少しでも役立つことができれば幸いに思いま
す。短くも長い間、本当にありがとうございました。
※バックナンバーについて
早急にバックナンバーを Webサイト上で公開します。また、圧縮ファイルとい
う形で全号を配布するようにします。バックナンバーのページは当分の間掲載
するつもりです。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
と思います。
ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
てくれると思います。
発行者 ばんばん
協力 スズキ・コラボレーション http://www.scollabo.com/
配信エンジン まぐまぐ http://www.mag2.com/ （ID 0000090196）
誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。
■バックナンバー こちらで公開しています。
プレーンテキスト http://www.scollabo.com/banban/magazine.html
各号のおさらい http://www.scollabo.com/banban/magazine/
アーカイブ http://www.scollabo.com/banban/daf/archive.html
まぐまぐ http://backno.mag2.com/reader/Back?id=0000090196
■配信の変更・中止はこちらです。
個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
かります。
当サイトにて http://www.scollabo.com/banban/magazine/top.html
まぐまぐにて http://www.mag2.com/m/0000090196.htm
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
＜えでぃた〜ず・る〜む＞
肩の荷が下りたような、同時に何となく大事な物をなくしたような気分です。
これからは時間があれば Webサイトの更新などに費やしたいと思います。
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
◆著作権について
個人がご自分のＰＣに保存して利用する以外の記事の転載、引用は基本的に応
じておりません。記事中の内容について、無断で使用することを固く禁じます。
なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
自由に使っていただいても差し支えありません。
Copyright(C) 2002-2005 www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□
最新公開日 2005年7月28日
Copyright(C) 2002-2004 banban@scollabo.com