今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第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 をスタイルシートで設定することによって簡単に表示が可能です。下記文章は、それを用いたものです。

■ リンクの扱い

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

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

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

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

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

例えば、

戻りはこちらです。

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

■ スクリプトの扱い

ページに動きを表現する 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;
}