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

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

Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

WebデザインとWebブラウザの歴史黎明紀 1993 年頃～ Web 1.0 1997 年～ 2003 年頃 Web 2.0 2004 年頃～ Mosaic IE4.0/5.0 NN4.0 IE6.0/7.0 、 Firefox Opera HTML1.0 、 2.0 HTML3.2/4.01 XHTML1.0 ,[object Object],[object Object],[object Object],[object Object],[object Object],表現性低高主なブラウザ HTML バージョン Web デザイン特徴

WebデザインとWebブラウザの関係 ,[object Object],[object Object],Web ブラウザの役割とは？

Webブラウザの役割 Server HTML ② www.pasonatech.co.jp というサーバを見つける無事にサーバが見つかって接続できたら「 index.html というファイルをください！」とサーバーにお願いする ① HTML タグに書かれている内容を読み込み、その内容に従って文字や写真やイラストなどの情報を表示していく ,[object Object]

Webブラウザが変わると役割は異なるの？ ,[object Object],[object Object],[object Object],機能面の違いがあると、どんなことが生じるの？

Webブラウザによる機能の違い ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],フォント・サイズの変化 http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/ より

Webブラウザによる機能の違いで困ること ,[object Object],[object Object],Web デザイナー HTML どのブラウザでも同じレイアウトができるように Web デザイナーが HTML 文書を作成 ->これが Web デザイナーのスキル

Webデザインのテクニックの歴史黎明紀 1993 年頃～ Web 1.0 1997 年～ 2003 年頃 Web 2.0 2004 年頃～ ,[object Object],[object Object],[object Object],易難技術習得度

Web1.0以前（黎明紀）のテクニック ,[object Object],[object Object]

Web1.0的なテクニック Table というタグで Excel のような表を作成部分的にセルを結合罫線を消去＆セルの中に文字やイラスト配置

Web1.0的なテクニックの問題点 ,[object Object],<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が複雑になるの？ ,[object Object],[object Object],[object Object],[object Object],これが今風な Web2.0 的なテクニック < レイアウト情報 > テキスト情報 < レイアウト情報 > < レイアウト情報 > < レイアウト情報 > テキスト情報 < レイアウト情報 > 画像情報 < レイアウト情報 > テキスト情報 HTML < レイアウト情報 > テキスト情報 < レイアウト情報 > テキスト情報画像情報テキスト情報 HTML CSS < レイアウト情報 > < レイアウト情報 > < レイアウト情報 >

Web2.0 的なテクニック globalnavi contents headnavi menu 文書などしか含まれないようなシンプルな HTML を作成各段落の位置を示した CSS ファイルを準備 HTML と CSS を合わせて表示 globalnavi menu

なぜ今までHTML＋CSSが使われなかったのか？ ,[object Object],[object Object],[object Object],出典元： http://admn.air-nifty.com/books/2004/12/swd_2.html

HTML＋CSSのメリット、デメリット ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],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; }

全体のまとめ ,[object Object],[object Object],[object Object],[object Object],[object Object]

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

Recommended

Recommended

More Related Content

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

Similar to クリエイター向け勉強資料 Ver1 (20)

More from Hiroshi Oyamada

More from Hiroshi Oyamada (20)

Recently uploaded

Recently uploaded (16)

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