デザイナーのためのWeb学習帳（1）

まずはHTML。ハイパーなタグ付き言語

江原顕雄
2008/8/26

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

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

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

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

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

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

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

・HTML

画面1　HTMLファイルからでも同じように表示できます（画面をクリックすると、htmlファイルを表示します。同内容のテキストファイルはこちら）

・画像

画面2　もちろん、画像ファイルからでも同じように表示できます（画面をクリックすると、画像ファイルを表示します）

・Flash

画面3　Flashでも同じように表示できます（画面をクリックすると、Flashファイルを表示します）

・JavaScript

画面4　JavaScriptでも同じように表示できます（画面をクリックすると、JavaScriptファイルを表示します。同内容のテキストファイルはこちら）

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

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

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

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

1/5

INDEX
デザイナのためのWeb勉強帳（1）　 まずはHTML。ハイパーなタグ付き言語
	Page1 インターネットはHTMLでできている？ Webページを作っているもの！
	Page2 HTMLの特性 文章同士をリンクさせる「ハイパーリンク」
	Page3 文章を構造化する「マークアップランゲージ」
	Page4 マークアップランゲージの利点
	Page5 HTMLとデザインの話

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）