カ ェ
フ のWebサイ を作 て
ト っ

Webデザ ンの
イ
基礎と技術を学ぶ
schoo WEB-campus
2013年10月26日
金澤直毅
Naoki Kanazawa
http://designless.net
?

Webをゼロ ら
か

作った と り すか
こ があ ま ?
?

Webをゼロ ら
か

作る と
こ の意味 は
と?
手仕事
1

読む

2

遊ぶ Playing

3

作る

Making

4

学ぶ

Studying

Reading
1
読む
こ ウ ブページです
れは ェ
http://justinjackson.ca/words_japan.html
設計図 = 完成図
HUMAN

COMPUTER

WEB
SERVER

CLIENT
SKILL?

?

WORDPRE
PHP
ADOBE
JAVASCRIPT
CSS
HTML
SKILL!
2
遊ぶ
Webデザイ
ンの砂場
http://designless.net/editor
HTML
< タグ > H e l l o W o r l d ! < タグ >
html, body, head, h1, h2, h3 h4, h5, h6,
p, ul, li, a, dl, table,
img, div, span,...
HTML

<html>
<head>
メタ情報

</head>
<body>

<h 1 > 最初に伝えたいこと</h 1 >

<p> 説明などの文章 </p>

コ
ンピュ
ータに伝え
る

<h 2 > 次に伝えたいこと</h 2 >...
CSS
セレクタ { プ ロ パ ティ : 値 ; }
color, background, font-size, text-align,
width, height, margin, padding, border,
float, clear,...
CSS
人にやさ
しい装飾と イ ト
レ アウ
JavaScript
イ タラクシ ンな演出と拡張
ン
ョ
jQuery
$ ( セレクタ ) . メソッド ( 値 )
click, hover,
addClass, removeClass,
fade, toggle, animate...
HTML

CSS

内容

装飾

JS

演出
DEVELOPER TOOL
要素の検証
IMAGE
CSS

images

style.css

flower.jpg

index.html
PATH
ディレクトリ構 成
フォル ダ / ファイル 名 . 拡 張 子

. . / フォル ダ / ファイル 名 . 拡 張 子
3
作る
TOOL
ブラウ ザ + エディタ
Google Chrome
Mozilla Firefox

CotEditor
terapad
素材のダウ ロー
ン ド
http://designless.net/data/schoo20131026.zip
ペリカン カフェ

_resource

_design

_www
?

なぜ、 ェのWebサイ なのか
カフ
ト
?
架 空 の カフェ

Pelican Cafe

北欧

青山

www.pelican-cafe.com
BUSINESS

VISUAL
CODE
CONCEPT
1
HTML = 情報構造
タグの入 れ 子
2
属性

src, href, class, id
3
ボックスモ デル

reset.css
4
j Q u e r y プラグイン
bxslider, colorbox
5
jQuer y仕掛け
fade, scroll,
6
Google Map API
4
学ぶ
試行錯誤
SANDBOX
Webデザイ
ンの砂場
ANNTENA
イプト
ン ッ の仕組み
?
レポー
ト課題

Webサイ は ん デ ア
ト ど なメ ィ ?
Upcoming SlideShare
Loading in …5
×

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ

1,512 views

Published on

schoo WEB-campus
http://schoo.jp/class/251

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ

  1. 1. カ ェ フ のWebサイ を作 て ト っ Webデザ ンの イ 基礎と技術を学ぶ schoo WEB-campus 2013年10月26日 金澤直毅
  2. 2. Naoki Kanazawa http://designless.net
  3. 3. ? Webをゼロ ら か 作った と り すか こ があ ま ?
  4. 4. ? Webをゼロ ら か 作る と こ の意味 は と?
  5. 5. 手仕事
  6. 6. 1 読む 2 遊ぶ Playing 3 作る Making 4 学ぶ Studying Reading
  7. 7. 1 読む
  8. 8. こ ウ ブページです れは ェ http://justinjackson.ca/words_japan.html
  9. 9. 設計図 = 完成図
  10. 10. HUMAN COMPUTER WEB
  11. 11. SERVER CLIENT
  12. 12. SKILL? ? WORDPRE PHP ADOBE JAVASCRIPT CSS HTML
  13. 13. SKILL!
  14. 14. 2 遊ぶ
  15. 15. Webデザイ ンの砂場 http://designless.net/editor
  16. 16. HTML < タグ > H e l l o W o r l d ! < タグ > html, body, head, h1, h2, h3 h4, h5, h6, p, ul, li, a, dl, table, img, div, span, em, strong...
  17. 17. HTML <html> <head> メタ情報 </head> <body> <h 1 > 最初に伝えたいこと</h 1 > <p> 説明などの文章 </p> コ ンピュ ータに伝え る <h 2 > 次に伝えたいこと</h 2 > <p> 説明などの文章 </p> <ul> <li> グループ </li> <li> グループ </li> <li> グループ </li> </ul> </body> </html>
  18. 18. CSS セレクタ { プ ロ パ ティ : 値 ; } color, background, font-size, text-align, width, height, margin, padding, border, float, clear, position...
  19. 19. CSS 人にやさ しい装飾と イ ト レ アウ
  20. 20. JavaScript イ タラクシ ンな演出と拡張 ン ョ
  21. 21. jQuery $ ( セレクタ ) . メソッド ( 値 ) click, hover, addClass, removeClass, fade, toggle, animate...
  22. 22. HTML CSS 内容 装飾 JS 演出
  23. 23. DEVELOPER TOOL 要素の検証
  24. 24. IMAGE
  25. 25. CSS images style.css flower.jpg index.html
  26. 26. PATH ディレクトリ構 成 フォル ダ / ファイル 名 . 拡 張 子 . . / フォル ダ / ファイル 名 . 拡 張 子
  27. 27. 3 作る
  28. 28. TOOL ブラウ ザ + エディタ Google Chrome Mozilla Firefox CotEditor terapad
  29. 29. 素材のダウ ロー ン ド http://designless.net/data/schoo20131026.zip
  30. 30. ペリカン カフェ _resource _design _www
  31. 31. ? なぜ、 ェのWebサイ なのか カフ ト ?
  32. 32. 架 空 の カフェ Pelican Cafe 北欧 青山 www.pelican-cafe.com
  33. 33. BUSINESS VISUAL CODE CONCEPT
  34. 34. 1 HTML = 情報構造 タグの入 れ 子
  35. 35. 2 属性 src, href, class, id
  36. 36. 3 ボックスモ デル reset.css
  37. 37. 4 j Q u e r y プラグイン bxslider, colorbox
  38. 38. 5 jQuer y仕掛け fade, scroll,
  39. 39. 6 Google Map API
  40. 40. 4 学ぶ
  41. 41. 試行錯誤
  42. 42. SANDBOX Webデザイ ンの砂場
  43. 43. ANNTENA イプト ン ッ の仕組み
  44. 44. ? レポー ト課題 Webサイ は ん デ ア ト ど なメ ィ ?

×