クリエイター向け勉強資料 Ver1
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,270 views

 

Statistics

Views

Total Views
2,270
Views on SlideShare
2,270
Embed Views
0

Actions

Likes
1
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • はじめに
    • 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=&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=&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=&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のデザインを行う