連載
» 2008年08月26日 00時00分 公開

デザイナーのためのWeb学習帳(1):まずはHTML。ハイパーなタグ付き言語 (1/5)

Webページを構成する技術を超初心者向けに説明。まずは基本の基本である「HTML」について。ハイパーなタグ付きテキストを一緒に解読しましょう

[江原顕雄,@IT]

インターネットはHTMLでできている?

 インターネットの利用者は総務省の調べによると、平成18年度のおととしの時点で8754万人に達したそうです。人口に対する普及率は68.5%で、およそ7割の人が、インターネットを利用していることになります。言われてみれば、60歳以上の年配の方が、メールやチャットでのコミュニケーション、サービスや製品の評判や性能を調べたり、通販やオークションサイトで商品を手に入れたりしていると聞いても、そんなに驚かなくなってきました。

 どっぷりとインターネットが生活にしみこんできているのですが、そんな中で、一番皆さんの目に触れやすいのがWebページだと思います。

 そして、この記事を読んでいる人は、Webページ制作にかかわっている人が多いと思います。Webページを構成する技術はたくさんありますが、まずは基本の基本である「HTML」について前編・後編の2回に分けて連載をしたいと思います。

Webページを司る多彩なファイルたち!

 Webページで文章を表すときにはいろいろな表現方法があります。言い換えると、作り方はさまざまでも、ブラウザで表示すると同じような見た目になります。同じテキスト「インターネットは広大です」をHTML、画像、Flash、JavaScript、Dreamweaverからそれぞれ作成して同じように表示させてみます。

  • HTML
画面1 HTMLファイルからでも同じように表示できます(画面をクリックすると、htmlファイルを表示します。同内容のテキストファイルはこちら 画面1 HTMLファイルからでも同じように表示できます(画面をクリックすると、htmlファイルを表示します。同内容のテキストファイルはこちら
  • 画像
画面2 もちろん、画像ファイルからでも同じように表示できます(画面をクリックすると、画像ファイルを表示します) 画面2 もちろん、画像ファイルからでも同じように表示できます(画面をクリックすると、画像ファイルを表示します)
  • Flash
画面3 Flashでも同じように表示できます(画面をクリックすると、Flashファイルを表示します) 画面3 Flashでも同じように表示できます(画面をクリックすると、Flashファイルを表示します)
  • JavaScript
画面4 JavaScriptでも同じように表示できます(画面をクリックすると、JavaScriptファイルを表示します。同内容のテキストファイルはこちら 画面4 JavaScriptでも同じように表示できます(画面をクリックすると、JavaScriptファイルを表示します。同内容のテキストファイルはこちら

 「文字を見せたい!」という一点突破であれば、HTMLでも画像データでも、Flashでもなんでもいいわけです。

 閲覧者のOSやWebブラウザが違うとフォントや文字同士のすき間のサイズが違ってくるHTMLのページは、デザイナー泣かせです。「イラストレーターで配置して、JPEGで書き出した方がよくない?」と考えた人も多いでしょう?

 しかし、現在のWebページは基本的にHTML(もしくはXHTML)で構成されています。なぜそこまでHTMLが利用されているか、HTMLの機能や利点についてチェックしていきましょう。

画面5 Dreamweaverからでも同じような見た目のWebページが作成できます ワープロソフトのように自由に配置ができるWebページ制作ソフトは、裏で自動的にHTML・XHTMLに組み直してくれている 画面5 Dreamweaverからでも同じような見た目のWebページが作成できます
ワープロソフトのように自由に配置ができるWebページ制作ソフトは、裏で自動的にHTML・XHTMLに組み直してくれている
       1|2|3|4|5 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。