狠狠撸

狠狠撸Share a Scribd company logo

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

?Download as PPT, PDF?
?
Hiroshi Oyamada
Hiroshi Oyamada
1 of 18
はじめに 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.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 テキスト中心 静的なページ テキスト＋画像の 表示に加えて、 Table を駆使した自由なレイアウト JavaScript 等による 動きのあるページも 徐々に登場 JavaScript の更なる 有効活用で表現性が さらに向上 表現性 低 高 主なブラウザ HTML バージョン Web デザイン特徴
WebデザインとWebブラウザの関係 前述のスライドの通り Web ブラウザの進化と共に Web デザインの表現力が向上 Web デザインと Web ブラウザは切っても切り離せない関係有 Web ブラウザの役割とは？
Webブラウザの役割 Server HTML ② 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 デザイナー HTML どのブラウザでも同じレイアウトができるように Web デザイナーが HTML 文書を作成 ->これが Web デザイナーのスキル
Webデザインのテクニックの歴史 黎明紀 1993 年頃～ Web 1.0 1997 年～ 2003 年頃 Web 2.0 2004 年頃～ 特に無し 透明な画像と Table というタグを使って 自由自在なレイアウト を実現 透明画像と Table タグ という組み合わせは メンテナンスしづらい ため、 HTML ＋ CSS が主流 易 難 技術習得度
Web1.0以前（黎明紀）のテクニック 何も工夫しないとこのように、画面左上を基点として、文章が 左->右 上->下 という順番で表示されるだけの単調なレイアウトのデザインになってしまう 出来ることに限りがあるため、テクニックにも限界がある
Web1.0的なテクニック Table というタグで Excel のような表を作成 部分的にセルを結合 罫線を消去＆セルの中に文字やイラスト配置
Web1.0的なテクニックの問題点 Table タグを使いすぎると HTML が複雑になって更新作業がとっても つらい?? <table width=&quot;490&quot; border=&quot;0&quot; align=&quot;center&quot; bgcolor=&quot;#FFFFFF&quot;> <tr align=&quot;center&quot;> <td colspan=&quot;2&quot;> <img src=/slideshow/ver1-530790/530790/&quot;images/spacer.gif&quot; alt=&quot; ダミー画像 &quot; width=&quot;490&quot; height=&quot;120&quot;> <!-- ここにタイトルの画像を入れる --></td> </tr> <tr> <td width=&quot;130&quot; valign=&quot;top&quot;><table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;8&quot; cellspacing=&quot;8&quot;> <tr> <td bgcolor=&quot;#333333&quot;> <!-- ここに左側のメニューの文字を入れる --> <img src=/slideshow/ver1-530790/530790/&quot;images/spacer.gif&quot; alt=&quot; ダミー画像 &quot; width=&quot;98&quot; height=&quot;300&quot;> </td> </tr> </table> </td> <td width=&quot;360&quot; valign=&quot;top&quot;><table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;8&quot; cellpadding=&quot;0&quot;> <tr> <td> <!-- ここに右側のメインのコンテンツを入れる --> <img src=/slideshow/ver1-530790/530790/&quot;images/spacer.gif&quot; alt=&quot; ダミー画像 &quot; width=&quot;344&quot; height=&quot;300&quot;> </td> </tr> </table> </td> </tr>
そもそも何でHTMLが複雑になるの？ HTML ファイルの中で テキスト情報など と レイアウトのための情報 が混在するため 混ざっているモノを分割すれば、楽になるのでは？ テキスト情報など： HTML ファイルに記述 レイアウト情報：基本的には CSS に記述 これが今風な Web2.0 的なテクニック < レイアウト情報 > テキスト情報 < レイアウト情報 > < レイアウト情報 > < レイアウト情報 > テキスト情報 < レイアウト情報 > 画像情報 < レイアウト情報 > テキスト情報 HTML < レイアウト情報 > テキスト情報 < レイアウト情報 > テキスト情報 画像情報 テキスト情報 HTML CSS < レイアウト情報 > < レイアウト情報 > < レイアウト情報 >
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のデザインを行う

More Related Content

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

  • 1. はじめに Web デザインの歴史を振り返り Web デザインの手法がどのように推移してきたかを確認することで Web クリエイターに必要となる技術要素の理解を深めてもらうための資料です。
  • 2. Web デザインの歴史 ー 黎明紀～ Web2.0 時代のデザインテクニック
  • 3. Agenda Web デザインと Web ブラウザの歴史 Web デザインと Web ブラウザの関係 Web ブラウザの役割 Web ブラウザが変わると役割は異なるの？ Web ブラウザによる機能の違い Web ブラウザによる機能の違いで困ること Web デザインのテクニックの歴史 Web1.0 以前（黎明紀）のテクニック Web1.0 的なテクニック Web1.0 的なテクニックの問題点 何で HTML が複雑になるか Web2.0 的なテクニック なぜ今まで HTML ＋ CSS が使われなかったのか？ HTML ＋ CSS のメリット、デメリット 全体のまとめ
  • 4. 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 テキスト中心 静的なページ テキスト＋画像の 表示に加えて、 Table を駆使した自由なレイアウト JavaScript 等による 動きのあるページも 徐々に登場 JavaScript の更なる 有効活用で表現性が さらに向上 表現性 低 高 主なブラウザ HTML バージョン Web デザイン特徴
  • 5. WebデザインとWebブラウザの関係 前述のスライドの通り Web ブラウザの進化と共に Web デザインの表現力が向上 Web デザインと Web ブラウザは切っても切り離せない関係有 Web ブラウザの役割とは？
  • 6. Webブラウザの役割 Server HTML ② www.pasonatech.co.jp というサーバを見つける 無事にサーバが見つかって接続できたら「 index.html というファイルをください！」とサーバーにお願いする ① HTML タグに書かれている内容を読み込み、その内容に従って文字や写真やイラストなどの情報を表示していく Http://www.pasonatech.co.jp/index.html というサイトにアクセスした場合
  • 7. Webブラウザが変わると役割は異なるの？ 代表的な Web ブラウザとして、 IE 、 Netscape 、 Firefox 、 Opera などがあるが、それぞれのブラウザ自体の役割は基本的には同じ Web ブラウザ毎に ビミョーに機能面での違いがある。 例えば、内容を読み込むスピードが速いとか、他のブラウザには無いオリジナルな機能を持っている??? etc 機能面の違いがあると、どんなことが生じるの？
  • 8. Webブラウザによる機能の違い 各ブラウザ毎でビミョーに HTML の解釈が異なるため、場合によっては意図通りにならないことがある 右の図は以下のように HTML で指定した場合の表示結果 16 ピクセルという大きさで表示 12 ポイントという大きさで表示 初期設定の値に対して 100% の大きさで表示 何も指定しない フォント?サイズの変化 http://itpro.nikkeibp.co.jp/article/COLUMN/20070104/257273/ より
  • 9. Webブラウザによる機能の違いで困ること 各ブラウザ毎で HTML の解釈が異なるため、 HTML の書き方によってページレイアウトが崩れることがある 前述のスライドのようなフォントサイズの解釈の違いで意図しないレイアウトになる可能性がある Web デザイナー HTML どのブラウザでも同じレイアウトができるように Web デザイナーが HTML 文書を作成 ->これが Web デザイナーのスキル
  • 10. Webデザインのテクニックの歴史 黎明紀 1993 年頃～ Web 1.0 1997 年～ 2003 年頃 Web 2.0 2004 年頃～ 特に無し 透明な画像と Table というタグを使って 自由自在なレイアウト を実現 透明画像と Table タグ という組み合わせは メンテナンスしづらい ため、 HTML ＋ CSS が主流 易 難 技術習得度
  • 11. Web1.0以前（黎明紀）のテクニック 何も工夫しないとこのように、画面左上を基点として、文章が 左->右 上->下 という順番で表示されるだけの単調なレイアウトのデザインになってしまう 出来ることに限りがあるため、テクニックにも限界がある
  • 12. Web1.0的なテクニック Table というタグで Excel のような表を作成 部分的にセルを結合 罫線を消去＆セルの中に文字やイラスト配置
  • 13. Web1.0的なテクニックの問題点 Table タグを使いすぎると HTML が複雑になって更新作業がとっても つらい?? <table width=&quot;490&quot; border=&quot;0&quot; align=&quot;center&quot; bgcolor=&quot;#FFFFFF&quot;> <tr align=&quot;center&quot;> <td colspan=&quot;2&quot;> <img src=/slideshow/ver1-530790/530790/&quot;images/spacer.gif&quot; alt=&quot; ダミー画像 &quot; width=&quot;490&quot; height=&quot;120&quot;> <!-- ここにタイトルの画像を入れる --></td> </tr> <tr> <td width=&quot;130&quot; valign=&quot;top&quot;><table width=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;8&quot; cellspacing=&quot;8&quot;> <tr> <td bgcolor=&quot;#333333&quot;> <!-- ここに左側のメニューの文字を入れる --> <img src=/slideshow/ver1-530790/530790/&quot;images/spacer.gif&quot; alt=&quot; ダミー画像 &quot; width=&quot;98&quot; height=&quot;300&quot;> </td> </tr> </table> </td> <td width=&quot;360&quot; valign=&quot;top&quot;><table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;8&quot; cellpadding=&quot;0&quot;> <tr> <td> <!-- ここに右側のメインのコンテンツを入れる --> <img src=/slideshow/ver1-530790/530790/&quot;images/spacer.gif&quot; alt=&quot; ダミー画像 &quot; width=&quot;344&quot; height=&quot;300&quot;> </td> </tr> </table> </td> </tr>
  • 14. そもそも何でHTMLが複雑になるの？ HTML ファイルの中で テキスト情報など と レイアウトのための情報 が混在するため 混ざっているモノを分割すれば、楽になるのでは？ テキスト情報など： HTML ファイルに記述 レイアウト情報：基本的には CSS に記述 これが今風な Web2.0 的なテクニック < レイアウト情報 > テキスト情報 < レイアウト情報 > < レイアウト情報 > < レイアウト情報 > テキスト情報 < レイアウト情報 > 画像情報 < レイアウト情報 > テキスト情報 HTML < レイアウト情報 > テキスト情報 < レイアウト情報 > テキスト情報 画像情報 テキスト情報 HTML CSS < レイアウト情報 > < レイアウト情報 > < レイアウト情報 >
  • 15. Web2.0 的なテクニック globalnavi contents headnavi menu 文書などしか含まれないようなシンプルな HTML を作成 各段落の位置を示した CSS ファイルを準備 HTML と CSS を合わせて表示 globalnavi menu
  • 16. なぜ今までHTML＋CSSが使われなかったのか？ モダンブラウザ＝ CSS の解釈がきちんとできる Web ブラウザが世間に広まったため Firefox 、 Opera 、 Safai は CSS の表示は比較的問題無し IE の古いバージョンが軒並み CSS の表示に難有り 出典元： http://admn.air-nifty.com/books/2004/12/swd_2.html
  • 17. 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; }
  • 18. 全体のまとめ WebサイトのデザインはWebブラウザの進化と共に発展 ブラウザ毎に機能的に差があるため、 どのブラウザでも同じようなレイアウト表示ができるような HTML を作成することがWeb製作者に求められる Web1.0的なテクニック：Tableタグ中心 Web2.0的なテクニック：HTML＋CSS デザイナーはブラウザ毎のビミョーな機能の違いを理解してWebのデザインを行う