クリエイター向け勉強資料 Ver1

Copyright (C) 2007 Pasona Tech Inc. All Rights Reserved.

Pasona Tech Inc. IT HUMANWARE COMPANYPasona Tech Inc. IT HUMANWARE COMPANY

はじめに

Webデザインの歴史を振り返りWebデザインの手法がどのように推移してきたかを確認することでWebクリエイターに必要となる技術要素の理解を深めてもらうための資料です。

Web デザインの歴史ー黎明紀～ Web2.0 時代のデザインテクニック



Agenda

WebデザインとWebブラウザの歴史 Web デザインと Web ブラウザの関係 Web ブラウザの役割 Web ブラウザが変わると役割は異なるの？ Web ブラウザによる機能の違い Web ブラウザによる機能の違いで困ること

Webデザインのテクニックの歴史 Web1.0 以前（黎明紀）のテクニック Web1.0 的なテクニック Web1.0 的なテクニックの問題点何で HTML が複雑になるか Web2.0 的なテクニックなぜ今まで HTML ＋ CSS が使われなかったのか？ HTML ＋ CSS のメリット、デメリット

全体のまとめ



WebデザインとWebブラウザの歴史

黎明紀1993 年頃～

Web 1.01997 年～ 2003 年頃

Web 2.02004 年頃～

MosaicIE4.0/5.0

NN4.0IE6.0/7.0 、 Firefox

Opera

HTML1.0 、 2.0 HTML3.2/4.01 XHTML1.0

•テキスト中心•静的なページ

•テキスト＋画像の表示に加えて、 Tableを駆使した自由なレイアウト

•JavaScript 等による動きのあるページも徐々に登場

•JavaScript の更なる有効活用で表現性がさらに向上

表現性低高

主なブラウザ

HTML バージョン

Web デザイン特徴



WebデザインとWebブラウザの関係

前述のスライドの通りWebブラウザの進化と共にWebデザインの表現力が向上

WebデザインとWebブラウザは切っても切り離せない関係有

Web ブラウザの役割とは？



Webブラウザの役割

ServerServerHTMLHTML

②

www.pasonatech.co.jp というサーバを見つける

無事にサーバが見つかって接続できたら「 index.html というファイルをください！」とサーバーにお願いする

①

HTML タグに書かれている内容を読み込み、その内容に従って文字や写真やイラストなどの情報を表示していく

Http://www.pasonatech.co.jp/index.html というサイトにアクセスした場合



Webブラウザが変わると役割は異なるの？

代表的な Web ブラウザとして、 IE 、 Netscape 、 Firefox 、 Operaなどがあるが、それぞれのブラウザ自体の役割は基本的には同じ

Web ブラウザ毎にビミョーに機能面での違いがある。

例えば、内容を読み込むスピードが速いとか、他のブラウザには無いオリジナルな機能を持っている・・・ etc

機能面の違いがあると、どんなことが生じるの？



Webブラウザによる機能の違い

各ブラウザ毎でビミョーにHTMLの解釈が異なるため、場合によっては意図通りにならないことがある

右の図は以下のようにHTMLで指定した場合の表示結果 16 ピクセルという大きさで表示

12 ポイントという大きさで表示

初期設定の値に対して 100% の大きさで表示

何も指定しない

フォント・サイズの変化 http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/より



Webブラウザによる機能の違いで困ること

各ブラウザ毎でHTMLの解釈が異なるため、HTMLの書き方によってページレイアウトが崩れることがある前述のスライドのようなフォントサイズの解釈の違いで意図しないレイアウトに

なる可能性がある

Web デザイナー HTMLHTML

どのブラウザでも同じレイアウトができるように Web デザイナーが HTML 文書を作成→これが Web デザイナーのスキル



Webデザインのテクニックの歴史

黎明紀1993 年頃～

Web 1.01997 年～ 2003 年頃

Web 2.02004 年頃～

•特に無し •透明な画像と Tableというタグを使って自由自在なレイアウトを実現

•透明画像と Table タグという組み合わせはメンテナンスしづらいため、 HTML ＋ CSSが主流

易難技術習得度



Web1.0以前（黎明紀）のテクニック

何も工夫しないとこのように、画面左上を基点として、文章が

左→右上→下

という順番で表示されるだけの単調なレイアウトのデザインになってしまう

出来ることに限りがあるため、テクニックにも限界がある



Web1.0的なテクニック

Table というタグでExcel のような表を作成

部分的にセルを結合罫線を消去＆セルの中に文字やイラスト配置



Web1.0的なテクニックの問題点

Tableタグを使いすぎるとHTMLが複雑になって更新作業がとってもつらい・・

<table width="490" border="0" align="center" bgcolor="#FFFFFF"> <tr align="center"> <td colspan="2"> <img src="images/spacer.gif" alt=" ダミー画像 " width="490" height="120"> </td> </tr> <tr> <td width="130" valign="top"><table width="100%" border="0" cellpadding="8" cellspacing="8"> <tr> <td bgcolor="#333333">  <img src="images/spacer.gif" alt=" ダミー画像 " width="98" height="300"> </td> </tr> </table> </td> <td width="360" valign="top"><table width="100%" border="0" cellspacing="8" cellpadding="0"> <tr> <td>  <img src="images/spacer.gif" alt=" ダミー画像 " width="344" height="300"> </td> </tr> </table> </td> </tr>



そもそも何でHTMLが複雑になるの？

HTMLファイルの中でテキスト情報などとレイアウトのための情報が混在するため

混ざっているモノを分割すれば、楽になるのでは？テキスト情報など： HTML ファイルに

記述レイアウト情報：基本的には CSS に記

述

これが今風な Web2.0 的なテクニック

< レイアウト情報 > テキスト情報< レイアウト情報 >< レイアウト情報 > < レイアウト情報 > テキスト情報 < レイアウト情報 > 画像情報 < レイアウト情報 > テキスト情報

HTMLHTML

< レイアウト情報 > テキスト情報 < レイアウト情報 > テキスト情報画像情報テキスト情報

HTMLHTML

CSSCSS

< レイアウト情報 >< レイアウト情報 >< レイアウト情報 >



Web2.0的なテクニック

globalnavi contents

headnavi

menu

文書などしか含まれないようなシンプルな HTML を作成

各段落の位置を示した CSS ファイルを準備

HTML と CSS を合わせて表示

globalnavi

menu



なぜ今までHTML＋ CSSが使われなかったのか？

モダンブラウザ＝ CSS の解釈がきちんとできる Web ブラウザが世間に広まったため

Firefox 、 Opera 、 Safai は CSS の表示は比較的問題無し

IE の古いバージョンが軒並み CSS の表示に難有り

出典元： http://admn.air-nifty.com/books/2004/12/swd_2.html



HTML＋ CSSのメリット、デメリット

メリット

文書情報とレイアウト情報が分離しているので、修正が必要になった時にラクチン

Google などの検索エンジンは HTML ＋CSS で作った文書を比較的良いページと判断してくれて、検索結果にヒットしやすくなる

デメリット

ブラウザ毎に CSS の解釈が異なるため、それぞれのブラウザで同じレイアウトを実現させるための CSS を作るのがとっても難しい

あまり直感的でない。（特に Dreamweaver 等のツールを使ってデザインしてきた人に） CSS のサンプル

/* basic design */

body {background:#333;

}

#container {margin-left: auto;margin-right: auto;padding: 0px;width:490px;background:#fff;

}

/* basic layout */

#header {margin: 0px 0px -25px 0px;padding: 0px;width:490px;

}



全体のまとめ

WebサイトのデザインはWebブラウザの進化と共に発展

ブラウザ毎に機能的に差があるため、どのブラウザでも同じようなレイアウト表示ができるようなHTMLを作成することがWeb製作者に求められる Web1.0 的なテクニック： Table タグ中心

Web2.0 的なテクニック： HTML ＋ CSS

デザイナーはブラウザ毎のビミョーな機能の違いを理解してWebのデザインを行う

Business

クリエイター向け勉強資料 Ver1