基礎編 6/13
| Homepageの仕組み | HTMLで出来ること | 注意すべきこと |
HTMLで出来ること
レイアウト
リンク




レイアウト

●テーブル
テーブルはもともと表組を作るための機能ですが、これを応用するとかなり自由なレイアウトが組めます。枠線の太さ・高さも自由に設定できますし(消すこともできます)中のセルに色を引くことも可能です。もちろん、中に入れた文字にも自由な色を付けられますし、画像も配置できます。またテーブルの中にテーブルを入れる(ネスト)ことも可能です。
下の2つを見比べて下さい。(クリックしてください)上はオリジナルで、下は解るようにテーブルの枠線を表示してあります。

オリジナル
枠線表示

何かくれるなら(笑)
甘いもの(和洋問わず)
酒類
×辛いもの
もともとテーブルは表組の機能

何かくれるなら(笑)
甘いもの(和洋問わず)
酒類
×辛いもの
枠線も消せるし、色も付けられる

テーブルをネストさせる
テーブル一つでこの位のレイアウトは可能です。
ただし、この便利なテーブルにもデメリットがあります。
一つは、テーブルは「その中に挿入された全てのDATAを読み込んでから表示を開始する」ということです。つまり通常は読み込み終わったDATAから順々に表示されていくのに対し、テーブルを使うと画面になかなか現れない(実際は表示し終わるまでの時間に大差はないのですが)ので、見ている人にとって重たいページに感じてしまいます。
もう一つ。テーブルを多用するとHTML自体が多少複雑になりますので、後からの更新作業が少々めんどくさくなります。作った本人がしっかり把握していれば問題ありませんが、他の人がいじるケースがある場合、更新するのにどこを直せば良いのかが、わかりにくくなります。HTMLにタブやインデント、コメントタグなどを使い、分かりやすいHTML文章を作るよう心がけましょう。

●フレーム
画面を縦横に分割出来るのがフレームです。よく見かけるのは「左側にメニューがあり、ボタンをクリックすると右側に内容が表示される」というパターンです。これはナビゲーションの効率も良く、うまく使えばすっきりして見やすいホームページになる優れ物です。これもネスト(フレームの中にフレームを入れる)ことが出来ますので、色々工夫してみて下さい。

フレームの例(ちょっと手抜きです。笑)




リンク

リンクは説明するまでもありませんね。このページを見ているということは、どこかのホームページのリンクをたどってここへ来られたのだと思います。このリンクという機能があってこそ、インターネットがこれだけ普及したと言ってもいいでしょう。他人のページへ、また自分のサイトの他のページへ、クリック一つで飛んでいけるからこそ、膨大な情報の中を渡り歩くことができるのです。
また同じページ内でリンクを張ることもできます。例えばこのページは少々長いので、スクロールして下の方を(このあたり)見ていると思います。このページ内で上の方へリンクを張ると、一気に上の方へ飛ぶことができます。長いページなどに有効です。また他のページの特定部分にジャンプする事も可能です。

このページのトップへ
前ページのGIFアニメーションへ

backindexnext