1週間で学ぶネットワークの要点

いまさら聞けないHTML --- Part0：最新ページを分析

複雑そうなページも分解すれば難しくない

2006/02/25
阿蘇　和人＝日経NETWORK

出典：日経NETWORK2005年5月号　93ページより
（記事は執筆時の情報に基づいており、現在では異なる場合があります）

連載目次へ >>

図1　Webページは多数の要素で出来ている
ウインドウの枠を固定し，多数の要素を貼り込んでいる。ちなみに日経NETWORKのWebページのHTMLファイルのテキストは約800行。それに約70個のファイルを貼り付けて構成されている。

[画像のクリックで拡大表示]

　HTML（hypertext markup language）は，Webページを記述する言語仕様。個人でWebサイトを開設している人なら，Webページを作るために扱ったことがあるだろう。そうでなくても，「WebページはHTMLで記述されている」ということや，「＜と＞で囲んだ記号で記述する」といったことは知っている人が多いだろう。

　でも，HTMLソースを一から書き上げていくのは，なかなか大変。ならば，ツールを使おう。HTMLエディタHTMLエディタを使えば，HTMLの書式を知らなくてもWebページが作れる。Wordなどのワープロ・ソフトでも，HTML形式でファイルを保存する機能が備わっている。社内文書をワープロ・ソフトで読み込んで，HTML形式で保存——。これだけでWebページが出来上がる。

　そうすれば，ネットワーク利用規程のような社内文書をイントラネットに公開するのは簡単だ。自分だけのリンク集を作ったりもできる。

ほかのWebページを参考にする

　こうしてWebページを作り始めると，もっと使い勝手がよく，見栄えのいいWebページにカスタマイズしたくなる。インターネットに公開されている企業のWebページなどは，立体的なボタンがメニューとしてきれいに配置されていたり，動画が表示されたり，BGMが流れたりと，派手でかっこいい。

　それならば，気に入ったWebページを参考にさせてもらおう。HTMLエディタやワープロ・ソフトで作った自分のWebページと，インターネットに公開されている見栄えのいいWebページはどこがどのように違うのかを調べ，自分のページをカスタマイズしていくのである。

　ただ，そうした比較をしようとすると，やはりHTMLを生のまま眺めなければならない。しかも，かっこいいWebページのHTMLソースは数百行にもなっていたりする。例えば，日経NETWORKのWebページ（http://itpro.nikkeibp.co.jp/NNW/）のHTMLソースは約800行。これでは，手も足も出ないのか。

　そんなことはない。コツさえつかめば，他人が作ったWebページのHTMLソースを読み解くのは難しくない。HTMLの文書構造を把握していれば，すべてのテキストを順番に追わなくても，カギになる部分を探し出して，そこだけを調べれば済む。

　というわけで，この特集記事では，今どきのWebページを題材に，基本的なHTMLの書式や使い方を学んでいく。読み終わるころには，企業のWebページなどを参考にして，自分のWebページをカスタマイズできる知識が，身についているはずだ。

今のページはレイアウトが崩れない

　本編に入る前に，もう少しお付き合いいただきたい。インターネットに公開されている最近のWebページがどうなっているかを確認しよう。図1[拡大表示]は日経NETWORKのWebページである。ほかの企業のWebページも，だいたい似た作りになっていることが多い。

　特徴は三つある。その一つは，Webページを表示するウインドウの横幅を変えても，レイアウトが崩れないこと。試しに日経NETWORKのWebページをブラウザで表示して，ウインドウの幅を広げてみると右側が空白になる。幅を狭めると，右側が見えなくなる代わりに，ウインドウの下側に横スクロール・バーが表示される。こうして，ブラウザのウインドウの大きさを変えても，制作側の意図通りに表示されるようになっている。

　二つめは，同一Webサイト内の複数のページにまたがって見栄えを統一している点だ。上部に表示されるタイトル・イメージやメニュー・ボタン，あるいは左側に表示されるリンク・メニューなどは，どのページでも共通だ。また，見出しや本文の文字の大きさや色なども統一されている。

　三つめの特徴は，テキストや静止画以外の多数の要素を貼り付けたり，埋め込んでいることだ。例えば，ウインドウ上部に表示される「日経NETWORK」と書かれたボタンをクリックすると，その下にサブメニューが現れる。これは，Webページにスクリプトを埋め込んで実現している。例に挙げたWebページは採用していないが，動画や音声データを埋め込んでいるWebページも少なくない。

　つまり，今どきのWebページは，ブラウザのウインドウ・サイズにかかわらずレイアウトを固定して，Webサイト内で共通の見栄えを実現する。さらに個々のWebページには，さまざまな種類のデータが埋め込まれたり，貼り付けられていたりするわけだ。

　そこで，この特集記事では最初のPart1で，今どきのWebページの作りを解析するために必要なHTMLの基本を解説する。すでに，HTMLの書式は理解している人は読み飛ばして，あとから確認してもかまわない。

　Part2では最新Webページが採用しているレイアウト手法と，見栄えを共通化する技を紹介する。技といっても特別なものではない。HTMLの基本さえ押さえていれば理解できる。

　最後のPart3は，動画やスクリプトをWebページに貼り付けたり，埋め込むテクニックを解説する。