MyTools.NET - 独学HTMLのススメ

HTMLエディタと手書き、どっちがいい？ 〜 最近は充実してるけど

　「HTMLなんてエディタ使ったほうが楽じゃん」という意見もありますが、ここはやはり手書きでいくべきだと思います。HTMLの文法はそんなに難しくないです。基本はタグで囲むだけ。普段使うタグなんて数えるほどです。「FONT, A, BR, P, TABLE, UL, IMG, HR」くらい覚えておけば８割は書けるでしょう。あとはその都度文法書を引けば十分です。

　手書きだとHTMLエディタでできない微妙な調整ができます。最近はエディタも進歩してきたとはいえ、「テーブル全体を縮小」とか「」とかまだまだ使いづらいです。また、HTMLエディタはブラウザ特化のタグを吐きやすいということも言えます。得に某Ｍ社のツールは平気で独自タグを使いまわしますので、Netscape では全く見られないページが出来上がることもしばしばです。また、将来的にCGIプログラムなどを書きたい人は、タグを書きながら表示のイメージを追いかけるという作業ができないと、非常に効率が悪くなります。以上の理由から、手書きを強く推奨します。

[index]

全てはマネからはじまる 〜 人のソース見て我がソース直せ

　「あ、このページかっこいいな」と思ったら、とりあえず保存しておくことです。HTMLは良くも悪くも、右クリックして「ソースの表示」を選ぶだけで、簡単にソースを覗くことができます。かっこいいページを作るには、かっこいいページのマネをすればよいのです。但し、これはHTMLソースを見て、どのタグがどの部分にあたるかを解析できることが条件です。そのためにも、普段から手書きでHTMLを書いていたほうがよいでしょう。

[index]

絵が描けなくても大丈夫？ 〜 フリー素材集＆TABLEタグでクールな構成

　「私は絵が描けないからきれいなページは作れないわ」という人も工夫次第です。特にTABLEタグはセルごとに色をつけることができるという特性を生かすと、様々な表現ができるようになります。ここのページのタイトル部分は全てTABLEタグとBGCOLORを組み合わせたものです。（詳細は後述。）

　また、最近はフリー素材としてアイコンや背景、タイトル用のプレートなどが、多数のページで公開されています。中にはその素材を使ってどうやってHTMLを組むか、というテンプレートを置いているところもあります。それを使うとページデザインも非常に楽になります。

[index]

配色のポイント 〜 カラフルより統一感

　配色というのはページのイメージを一発で決めてしまいます。きれいな配色というのは、デザインを専門にやっている人でないと難しいです。私のようなデザイン初心者は、基本となる色を決めて、それを濃くしたり薄くしたりした色のみを使うという方法でやるときれいにいくようです。例えば青だったら青系で統一、赤だったら赤系で統一、といった風です。これだと色がケンカしないので美しく見えます。ただし、白背景と黒文字は、どんな場合でも合うようです。

[index]

移動のしやすさに気を使え 〜 リンクスパゲティは客が飽きる

　私はクールなデザインの基本は「画面遷移の分かりやすさ」だと思います。原則は「どのコンテンツにももトップページからワンクリックで行ける」です。強烈に興味がある人は別ですが、ふらっと覗きにきた人は目的のコンテンツにたどり着くまでにユーザが飽きてしまいます。

　「全体は上から下に行くに従って分かれていく木構造」にしましょう。違うコンテンツにアクセスしてもらうときは、一度トップページに戻ってもらい、新たに下にたどっていくという形になります。一見面倒そうですが、分かりやすさは抜群です。内部で横に繋げると、そのサイト構成を知り尽くしている人でないとごちゃごちゃになります。

　また、掲示板を「みんなの広場」とだけ書いておくような、分かりづらいリンク名、コーナー名は、そのリンクの近くに文字で説明をつけておきましょう。自分的には分かっていても、人には分かりづらいことも多々あります。

　とにかく、「自分が何も知らずにそのページにきたら、求めるコンテンツに一直線に向かえるか」ということを常に念頭におきながら作成しましょう。

[index]

新技術は使うべきか 〜 JavaScriptとかXMLとかCSSとかJavaとか

　最近はブラウザも新しいものを使う人が増えてきていて、ブラウザの新技術への対応度という面に関しては問題も少なくなってきました。しかし、これらの技術はあくまでもページ作成用の道具ということを忘れないで下さい。例えば、JavaScriptで「現在の時刻は○時×分です」とリアルタイムで表示しているところがありますが、そんなもの部屋の時計を見れば分かります。新技術を使うこと自体を目的とするのはやめましょう。道具は「使いやすさ」「シンプルさ」を実現するためのものであって、邪魔することがあってはいけません。「ここにこれを使うとこんなに便利だよ」と人に説明できる場合のみにしてください。また、最近の新技術にはブラウザ特有のものが多いです。JavaScriptなどを使った場合は、NetscapeとInternet Explorerの両方でチェックすることを心がけましょう。

[index]

必ずIEとNN両方でチェックを 〜 頼むから仲良くしてください＞２社

　「新技術」のところでも話しましたが、世の中で最も使われている二つのブラウザ「Netscape Navigator」と「Internet Explorer」では、新技術だけでなく通常のHTMLでも表示が違うことが多々あります。

　特にTABLEタグ関連では、「セルに隙間があいてしまう」「文字が一箇所に寄ってしまう」など、片方でちゃんと見えても片方では見られたもんじゃない、という現象がよく起きます。ページに「Netscapeで見てください」と書けば済む問題ではありません。片方のブラウザのみでチェックしている人は、訪問者の半分は意図したデザインで見ていないことになります。折角きれいに書いているのに、それは非常にもったいないことです。

　きちんと気をつければ、両方のブラウザで見た目をそろえることは不可能ではありません。今ではNNもIEもフリーになったとはいえ、訪問者にブラウザ交換の余計な負担を強いることは、アクセス数の減にもつながります。デザイン後のチェックは必ず両方のブラウザで行うように心がけましょう。

[index]

TITLEタグ内にはページの説明を 〜 ネットサーファーの行動原理を読め

（執筆中）

[index]

TITLEに「&」を使うとブックマークが崩れる 〜 けっこう多いです。これ。

（執筆中）

[index]

BGCOLORは必ず指定 〜 （執筆中）

（執筆中）

[index]

常に同じレイアウトで見せる工夫 〜 （執筆中）

（執筆中）

[index]

<BR>は大きなお世話？ 〜 （執筆中）

（執筆中）

[index]

WIDTH, HEIGHTは必ず指定 〜 （執筆中）

（執筆中）

[index]

リンクの枠線を消すには？ 〜 （執筆中）

（執筆中）

[index]

IE4とNN4での表示差に注意 〜 （執筆中）

（執筆中）

[index]

押されたボタンによって処理を振り分ける 〜 （執筆中）

（執筆中）

[index]

RETURNキーでSUBMIT 〜 （執筆中）

（執筆中）

[index]

巨大なテーブルは表示に時間がかかる 〜 （執筆中）

（執筆中）

[index]

BGCOLORを用いた効果的なタイトル(1) 〜 （執筆中）

（執筆中）

[index]

BGCOLORを用いた効果的なタイトル(2) 〜 （執筆中）

（執筆中）

[index]

セルにボタンをきっちり収める 〜 （執筆中）

（執筆中）

[index]