初心者のためのホームページ作り 第31号

Web作成支援

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号  第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号  第21号  第22号  第23号  第24号  第25号  第26号  第27号  第28号  第29号  第30号  目次

プレーンテキスト版バックナンバー

今週<第31号>マガジンのおさらい

                  毎週金曜日配信 What's New 2002/12/13
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題 ■ 初心者が犯すミスとタブー

HTMLの文書構造

HTMLとは、他の文書を参照したり移動できるハイパーテキストを含むマークアップ言語です。基本的なマークアップとは、文書の構造を示すものです。

ツリー構造 左の図は、文書の構造を表しています。段落や表組の中には画像があるかもしれません。スクリプトが組み込まれていることもあるでしょう。

このように、「構造」とは、大きな「枠」に囲まれた「ブロック」が示されます。すべてのコンテンツは、この「ブロック」の中に配置されなければなりません。

正しく配置されたコンテンツは、ブラウザに正しく理解され、すばやく表示されるに違いありません。HTMLでは、このブロックをブロックレベル要素と呼ばれ、その中にコンテンツを記述するように推奨されています。

ブロックレベル要素一覧

address、blockquote、center、dir、div、dl、fieldset、frameset、form、h1〜h6、hr、isindex、menu、noframes、ol、p、pre、table、ul

ブロックレベル要素は、「枠」を設定します。ブロックレベル要素には、一部を除いて、要素中にブロックレベル要素を記述できないものがありますので、注意してください。また、インラインレベル要素中にブロックレベル要素は記述できません。

子要素にブッロクレベルが持てない要素

address、dir、dl、frameset、h1〜h6、hr、menu、noframes、ol、p、pre、ul

センタリングと強制改行

強制改行を用いる br要素を連発して段落に見せることがしばしば見受けられますが、決して段落ではありません。強制改行を用いる場合は、実に限られています。ブラウザの自動改行に任せるのが一番自然で、見苦しいことはまったくありません。英単語の場合には、単語の途中で改行されることもありません。

また、テキストをセンタリングさせる場合の改行位置にも注意が必要です。なるべくなら、テキストはセンタリングさせないようにすることが望ましいでしょう。下記に悪いサンプルを表示しました。

強制改行を用いて、テキストをセンタリングさせる場合には、想像以上に読みにくい場合があります。
変な位置でセンタリングさせると、こうなってしまいます。

しかし、センタリングを解除するだけで、ずっと見やすくなります。
テキストのセンタリングの相性は、決して良いものではありません。

blockquote要素について

blockquote要素とは、引用文を表示する場合のみ用いられるもので、決して見栄え効果を狙って用いるべきではありません。下記文章は、blockquote要素を用いています。分かりやすく背景色を使いました。
インターネットで使用する色は、全216色の Web Safe Color と呼ばれる色を用いることで、マシン環境を意識することなく安全に表示できるように設定することが推奨されています。
どうしても見栄え向上のために利用したい場合には、汎用ブロックレベル要素 div をスタイルシートで設定することによって簡単に表示が可能です。下記文章は、それを用いたものです。
インターネットで使用する色は、全216色の Web Safe Color と呼ばれる色を用いることで、マシン環境を意識することなく安全に表示できるように設定することが推奨されています。

リンクの扱い

ページにアンカー要素を使ってホットリンクを記述する際の、使いやすいナビゲーションを確保するためにも、以下の点に注意しましょう。

画像を用いたリンクの場合、必ず alt属性で代替のテキストを記述するようにしましょう。

Back to Home 非視覚系ブラウザでは画像を読み取ることができません。

ホームに戻る 代替テキストがあれば、非視覚系ブラウザでも理解でき、ナビゲーションとして役立ちます。

また、テキストを使ったリンクの場合でも、リンク先の情報が得られる簡単な文章を記述するようにしましょう。

例えば、

戻りはこちらです。

これは絶対ダメです。「ここ」とか「クリック」だけでは、利用者にとって使いにくいナビゲーションになってしまいます。できる限りリンク先の内容がわかるように工夫することが望まれます。

スクリプトの扱い

ページに動きを表現する JavaScript華やかな時代になりました。誰も彼も、どこもここもスクリプトだらけです。決してスクリプトを仇にしているわけではありません。使い方の問題です。

こんなメッセージを見たことがありませんか?

JavaScriptでエラーが表示される図

これは、Windows版 MSIE6.02 で表示される JavaScriptのエラー表示です。スクリプトに少しでも間違いがあると、このような悲しいメッセージがブラウザに表示されます。もし、これがサイトのトップページで表示されたらあなたはどう思いますか? きっとサイト全体の信用を疑って、訪れたユーザはサッサと逃げてしまう確率が高いのは言うまでもないでしょう。

また、Microsoft Interbet Explorer では、独自のスクリプト JScript があります。一見すると JavaScriptに見えますが、仕様が異なり他のブラウザではサポートされていないものが圧倒的に多く、動作しません。動作しないだけならいいのですが、表示が崩れたり、やたらと重かったり、ブラウザによってはフリーズする場合もあります。特に、スクリプトを提供しているサイトからコピーしたものの多くに、JScriptが存在しています。JScriptの扱いには十分に気をつけましょう。

JScriptサンプル

もし下記のスクリプトが、JScriptであることが分かった方は、相当 JavaScriptに精通しています。これは、プルダウンメニューを表示させる JScriptです。

flag = false;
function pulldownmenu() {
  if(flag)pdMenu.style.visibility = "hidden";
  else    pdMenu.style.visibility = "visible";
  flag = !flag;
}


Copyright(C) 2002-2003 banban@scollabo.com