ページの統一性 

ヘッダーの統一

htmlソースには、<head></head>で挟まれたヘッダー部分があります。この部分は、直接ブラウザの画面には表示されませんが、検索ロボットがデータを収集する際に読み込んだり、ソースをチェックする際に最初に目に触れる部分です。文字化けを防ぐために、ページの構造を定義したり、htmlのバージョンを宣言したりする大事な部分です。これを統一して置くには、最も良い方法は「種ファイル」を統一することです。htmlを新規に作成しないで、必ずこの種ファイルから編集し名前を変えて保存します。
<title>は、お気に入りなどに登録するときの名称になります。これも、省略せずに入れてください。

種ファイルの例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="author" content="千葉明徳短期大学">
<meta name="keywords" content="保育者,,,,,,,">
<meta name="description" content="このページは、保育者養成校である・・・">
<title> </title>
<style type="text/css">a:link { text-decoration: none }
a:visited { text-decoration: none }
a:hover { font-weight: bold; color: ffd700 }
p, td { line-height: 140% }
h1 { font-size: 14pt; font-weight: bold; border-left: 32 solid #00c0c0;
border-right: 0 solid #00c0c0; border-top: 0 solid #00c0c0;
border-bottom: 6 solid #00c0c0; margin-left: 16px;
padding-left: 16px }
</style>
</head>
<body bgcolor="#FFffFF" background>

この中にページデータが入ります。

</body>
</html>

スタイルシートについて

タグを使った表現がhtmlの基本ではありますが、タグに関する考え方が変化してきて、タグで設定するものは「データの構造・種類」というように変わりつつあります。この考え方を進めたものがXMLです。より、共有データや検索データベースとして扱いやすくするものです。ブラウザでの表示に関するものは、スタイルシートで、という方向になっています。このため、<center>や<font>などのタグはhtml規格上では廃止が決まっています。しかし、多くのブラウザではこれらのタグも解釈できる機能は残っていますし、実情は、必ずしも統一規格を全て満たす方向にはいっていません。

タグの表現に限界があるのは事実で、スタイルシートは殆どのブラウザで対応済みであることから、古典的なタグの理解だけではページデザインが難しくなっています。スタイルシートは、古いタグと共存するように使われるので、タグのコマンドかスタイルシートの表現か区別も付きにくく、勉強しにくいものになっています。しかし、ページのデザインを統一するには、スタイルシートで定義しておくと、ソースの節約や作成効率アップにもなります。上記の種ファイルにも、<style></style>で最小限のスタイルを定義しています。スタイルシートは、webデータ作成者の共通理解項目です。

ネーミングの統一

トップページからリンクを張って個別のページに進むようになるので、後からページが増えていく場合、どうしてもつぎはぎの構造になりがちです。早い段階で、階層構造を整理し、ページのネーミングについても統一しておくことが望ましいです。ファイルやフォルダ名は、全角文字は不可なのでローマ字を使うことになります。シュはshuかsyuか、チはchiかtiかなど表記の方法も統一しておきます。ファイルの拡張子も、htmとhtmlが混在するのは良くありません。

 *大文字・小文字について
 windowsでは大文字小文字は区別しません。しかしwebサーバーでは、大文字小文字はきちんと区別されます。このため、パソコンでは見えていたファイルが、FTPした後で表示されなくなるなどは、殆どが大文字小文字の問題です。windowsでは、区別しないので勝手に大文字小文字が変えられる、という癖があります。全て大文字で名前を付けると、頭文字だけ大文字で2文字目以降が小文字になります。また、拡張子もソフトによって大文字でついたり小文字で付いたりします。しかし、見た目は小文字に変えられる場合があります。これは、DOS時代の8.3形式とWindows時代のロングネーム形式とが共存していることにも原因があります。結論から言うと、ファイル名は全て小文字で書く方がトラブルは少なくなります。htmlとhtm拡張子は、好みの問題で選ばれているようですが、パソコンの中ではhtmlのような4文字拡張子は異端ファイルになります。パソコンがトラブルを起こして、dosモードやsafeモードで起動させなければならなくなったとき、このような異端ファイルは救えなくなることがあります。

 *ホームページという呼び方
 最近は、サイトやwebなどの呼び方が一般的で、「ホームページ」は「スタートページ」という意味に使われます。略したHPという言い方も評判が良くありません。トップページへのリンクの呼び方も、ホームへとかトップへという言い方に統一しないと混乱します。「表紙へ」という言い方が分かりやすいのですが、この表という文字が、2バイトの文字コードの中に特殊コードが含まれるため、CGIの中では文字化けしてしまう要注意文字ということもあって、使われなくなってきています。リンクに統一の画像を使うなど、スタイルを共通にする方がよいでしょう。

リンクの書式

<a href=>のタグにtargetオプションが付けられます。target=”_blank”を指定すると、新しいブラウザが開いて表示します。リンクをこのようにすると、たどるたびに新しいページが開き、閉じる際に一つずつ締める手間がかかるだけでなく、開いたウィンドウの数に比例してパソコンに負担がかかり、最悪は停止することもあります。ページ内でリンクする場合と、新しいページを開く場合と、きちんと分けて設定する方が良いでしょう。基本的に、他人のサイトにリンクする場合は、戻れなくなるのを考慮して新ページで開きます。また、フレームを使っている場合は、フレーム内に他人のページをリンクさせることは、リンク先の了解が必要です。
リンクにブルーのアンダーライン、というのも古くなりつつあります。スタイルシートで定義すると、リンクのアンダーラインを消したり、マウスを載せたときの表示を変更することができます。このような書式も統一しておかないと、見る人に混乱を生じさせます。

ページのレイアウト

htmlは見る人のディスプレーの解像度によって見え方が異なります。VGAの640×480という規格は、もはや少なくなっているはずですが、未だにNASAのページは640ピクセルの横幅になっています。現代では、SVGA(800×600)が最低だと思われるので、横幅は800を限度と考えた方が良いでしょう。XGA(1024×768)以上のディスプレーで編集する場合は、ブラウザの横幅を縮めてチェックすることが必要です。800といっても実際はページの余白があるので、760ピクセルが限度と言うことです。できれば、画面に合わせて横幅が縮小されても、レイアウトが不自然にならないように作ることが必要です。テキストだけのページなら、画面に合わせて折り返されますが、画像は小さくはなりません。また、解像度の高い画面で見た場合に、不自然さが出てしまうことがあります。横長の壁紙を縦に並べる場合、画面が画像の幅よりも小さい場合に矛盾は生じませんが、逆の場合は縦に並ばなくなるので、意図しないデザインになってしまいます。

<table>タグでwidth=90%とすれば、表も画面サイズに合わせて伸び縮みします。このときに、表の中身は折り返されて高さが変化します。中身のレイアウトを壊したくないときは、width=760のようにピクセル単位で少な目に設定しておきます。編集ソフトを使うと、表の作成が楽になりますが、ドラッグで表のサイズ変更をするとピクセル単位の幅が指定されます。これを修正するには、テキスト表示で編集します。<td>タグで分割する場合もwidthオプションは%で設定するようにします。

初歩的な間違いは、スペースを挿入して横位置を調整することです。これでは、ウインドウのサイズでレイアウトが変わってしまいます。同じ原理で画像を横に並べる場合も、横幅によってレイアウトが崩れます。常に小さめのウインドウで確認しながら作ると良いでしょう。

html内の文字の大きさは、<font>タグで指定するものは、相対サイズです。見るブラウザの方で文字サイズを大きくしたり小さくしたりできますが、こうされると著しくレイアウトが崩れます。これを嫌って、フォントサイズは絶対サイズ(ポイント数指定やピクセル指定)で指定する場合もあります。

レイアウトを固定するためや、凝ったレイアウトにするために、<table>で表を組みborder=0で罫線を表示させない方法が一般的です。この場合は、widthは絶対値で指定するので、限界サイズを意識して作りましょう。横にスクロールしないと見えない画面は嫌われます。

これに対し、縦幅が長くなるのは仕方ありません。横長の画面では、縦にスクロールするのは一般的ですから。しかし、これも限度があります。3ページ分以上長くなる場合は、ブックマークを挿入して、リンクを配置し、すぐに移動できるようにしてください。

ブックマーク・タグ     <a name=”***”> *** </a>
ブックマークへのリンク  <a href=”ファイル名/#名前”>  </a>