HTML(Hyper Text Markup Language)はもともと論文などの学術文書を記述するために開発されたマークアップ言語で、ハイパーリンクと呼ばれるドキュメントとドキュメントを論理的なつながりで結びつける機能を持っています。このドキュメント同士を結びつける機能により私たちはWWW(World Wide Web)上でリンクをたどって様々な情報にアクセスすることができます。
サイトのデザイン性に関しては、HTML4が登場した当初はまだ文章中心のWebサイトがほとんどで、、今のように背景に大きな画像を設定したり、リンクをボタンの画像で装飾したりといったサイトはあまり見かけませんでした。これは当時のインターネットの回線がダイアルアップによる低速なものだったため、サイズの大きい画像ファイルを使用することは敬遠されていたことなども原因の一つでした。
HTMLのコーディング方法に関しては、現在のようにCSSで段組みや回り込みを使ってレイアウトを行うのではなく、グリッド特性のある<table>タグを入れ子にすることで文章や画像を配置していく、いわゆる「テーブルレイアウト」と呼ばれる手法がスタンダードになっていました。HTMLはタグの持つ意味できちんと記述することでコンピューターに文章内の情報の重要度を分析させやすくすることができますが、表を作成するための<table>タグをレイアウトのために使用したり、文章のくくりを表す<p>タグを改行のために使用したりと、本来の記述方法から外れた使い方も多く、見た目さえ整えばHTMLソースが煩雑になっても問題ないという流れも当時はありました。
一方CSSは1996年時点ですでにCSS Level2が勧告されていましたが、CSSの役割は単に文字の色や大きさなどを設定するだけにとどまっていました。当時も業界内では(X)HTML+CSSで文章構造とデザイン(見た目)を分離したコーディング手法を推奨していたにもかかわらず、現場レベルではCSSでレイアウトをする方法はハイリスクなものという印象がありました。その理由は、ブラウザごとにCSSの解釈が異なっていたり、独自拡張が乱発していたことで表示崩れが頻繁に起こってしまっていたからです。WebデザイナーがCSSでコーディングしたいと思っていても、全てのレイアウトをCSSで行うだけの環境(ブラウザの対応状況)がまだ整っていませんでした。そうした状況の中で(X)HTML+CSSを使ったコーディング手法が本格的に普及し始めたのは2000年代半ばにFirefoxのようにWeb標準への対応にいち早く乗り出すブラウザが登場したことや、IE(Internet Explorer)もバージョンがあがるにつれCSSの精度が上がってきたこと、そして、(X)HTML+CSSでのコーディングが、GoogleやYahoo!などの検索エンジンで検索結果を上位に表示させるための有効な手段であったということなどが背景にありました。
XHTMLはバージョン1.0の勧告がHTML4.01とほぼ同時期の2000年で、バージョン1.1は2001年に勧告されています(最新バージョンのXHTML1.1 Second Editionは2010年11月に勧告)
XHTMLは、W3CがHTMLをXMLとして定義しなおしたものです。より厳密なXMLのルールに基づいてマークアップしなければいけないので、コーディングの曖昧さが排除され、検索エンジンの解析制度の向上や、Webブラウザが内容を解析しやすくなることでCSSやレイアウトを行った際のWebブラウザの表示崩れを防ぐことができるなどのメリットがあります。このようなメリットから、現在はXHTMLとCSSの組み合わせでWebサイトを構築することがスタンダードになっています。
ただし、2009年の時点で既に次期バージョンのXHTML2.0の策定を終了し、今後はHTML5に引き継ぐことがW3Cから発表されています。
1998年にMacromedia(現Adobe systems)から発売されたFlash3の登場により、無料のプラグインをブラウザにインストールすることでgifアニメーションに代わる軽量で高度なアニメーションを作成できるようになりました。
ソフトウェアのバージョンが上がるにつれ、このFlashは単なるアニメーション制作ソフトの枠にとどまらず、ActionScriptといういプログラム言語を搭載し、音楽や動画などのマルチメディアコンテンツを扱ったり、ゲームやHTMLの枠にとらわれないダイナミックなコンテンツを開発することができる統合開発環境へと成長していきました。
Flashが普及していくにつれ、Webデザイナーの中でもFlashコンテンツの制作を専門で行うひとが登場しました。こうしたソフトウェアの機能向上につれてWebデザイナーはデザインとHTMLコーディングだけでなく、高度なプログラミングの知識が必要とされるようになってきました。
Flashの他にもプラグインを使用することでダイナミックなサイトを構築できるSilverlightやJavaなどがあります。これらはブラウザ(クライアント)上でダイナミックなWebサイトを実現するということで「リッチクライアント」と呼ばれています。
CSS同様、JavaScriptにも大きな変わり目がありました。
Ajaxの登場です。
Ajaxは「Asynchronous JavaScript + XML」の略で、その名の通りJavaScriptでサーバーと非同期のHTTP通信を行いXMLをやり取りするということです。非同期のHTTP通信とは、Webページからの情報の取得とサーバーとの通信のタイミングが対になっていたそれまでの方式に対して、Webページ全体を再取得することなく、必要な情報のみをサーバーから取得する通信方式です。Amazon(http://www.amazon.co.jp/)やGoogle(http://www.google.co.jp/)の検索フォームのように、語句を入力している最中にバックグラウンドで通信を行って、単語の候補を表示したりといった機能が例として挙げられます。
Ajaxの利点は、AjaxそのものがJavaScript標準でもっている機能の一部であることです。つまりJavaScriptが動作する一般的なブラウザであれば、FlashやSilverlightのようにわざわざプラグインをインストールしなくてもWebアプリケーションを使用することができます。
この利点を活かしてGoogleがGoogle MapやGmailなどAjaxを使った実用的なサービスを次々に公開していったことでAjaxの知名度が一気に上がりました。それまでWebアプリケーションといえばPHPやPerlのようにWebサーバー上で処理を行うものを指していましたが、静的コンテンツとして存在していたHTMLがAjaxの登場により動的なWebアプリケーションの基盤として考えられるようになってきました。
前述の通り、AjaxはJavaScriptが動作する一般的なWebブラウザであれば使用可能ですが、ブラウザごとに使用する通信オブジェクトの種類に若干違いがあったり、非同期通信やDOM(Document Object Model)を操作するために必要な関数は基本的なものしか提供されていないため、案件ごとに毎回これらの処理を一から実装していくとなるとプログラムの記述量も増え、複雑になってバグのチェックも大変になります。こうした基本的な処理(関数)をまとめてうまく吸収してくれるAjaxのライブライが多く登場してきました。これらのライブラリの中には非同期通信やDOM処理だけでなく、要素のフェードイン・フェードアウト・スライドといった見た目の処理を簡単に実装できるものもあります。
- 代表的なAjaxのライブラリ
prototype
http://www.prototypejs.org/
jQuery
http://jquery.com/
YUI(Yahoo! User Interface Library)
http://developer.yahoo.com/yui/
Dojo
http://dojotoolkit.org/
Lightbox
http://www.lokeshdhakar.com/projects/lightbox2/
Dreamweaverで作るiPhone/Androidアプリ入門この十数年の間でWebサイトを取り巻く環境は大きく変わり、Webデザイナーの仕事の領域は非常に広くなっています。
2000年代半ばくらいまではWebデザイナーにはHTMLの知識があれば十分でしたが、CSS/Flash/ActionScript/JavaScript/Webサーバー/Webアプリケーションetc...と新しい技術が次々に登場したことで次第にプログラミングなどの専門的な知識が必要となり、その進歩の速さは加速度を増しています。
そしてWebの進歩の中でHTML4・XHTMLの仕様に限界が見えてきました。HTML5/CSS3では、プラグイン不要での動画の再生や図形の描画など、これまでHTMLだけでは実現できなかった多くの仕様が盛り込まれています。