第6 章 サウジアラビア「ビジョン2030」とサル …第6 章 サウジアラビア「ビジョン2030」とサルマーン体制の課題 85 CPSA)と経済開発評議会(Council
サルでもできるウェブデザイン : SwapSkills 2010 Vol01
-
Upload
satoshi-kikuchi -
Category
Design
-
view
1.340 -
download
4
description
Transcript of サルでもできるウェブデザイン : SwapSkills 2010 Vol01
![Page 1: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/1.jpg)
SwapSkills
Takashi Kikuchi2010. 03.06
サルでもできるウェブデザインMONKEY CAN DO DESIGN WORKS
2010年3月15日月曜日
![Page 2: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/2.jpg)
SwapSkills
菊池 崇
Web Directions East LLC. CEO
allWebクリエイター塾講師
2010年3月15日月曜日
![Page 3: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/3.jpg)
SwapSkills
HTML5 & CSS3
HTML5 doctor? 今夏発売!
書 籍
2010年3月15日月曜日
![Page 5: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/5.jpg)
SwapSkills
海外のカンファレンスに参加自分の技術を研鑽すること
2010年3月15日月曜日
![Page 6: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/6.jpg)
SwapSkills
コーダー/マーケッター
2010年3月15日月曜日
![Page 7: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/7.jpg)
SwapSkills
CSS3border-radius
rgba/hsla
gradient(radial/liner)
2010年3月15日月曜日
![Page 8: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/8.jpg)
SwapSkills
コーダー/マーケッター
2010年3月15日月曜日
![Page 9: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/9.jpg)
SwapSkills
コーダー/マーケッター
デザインセンス+
2010年3月15日月曜日
![Page 10: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/10.jpg)
SwapSkills
0デザインセンス
2010年3月15日月曜日
![Page 11: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/11.jpg)
SwapSkills2010年3月15日月曜日
![Page 12: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/12.jpg)
SwapSkills
デザインセンスが”0”でウェブデザインは可能か
2010年3月15日月曜日
![Page 13: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/13.jpg)
SwapSkills
デザイン
2010年3月15日月曜日
![Page 14: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/14.jpg)
SwapSkills
デザイン
レイアウト
Grid System / Vertical Rythm
2010年3月15日月曜日
![Page 15: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/15.jpg)
SwapSkills
デザイン
カラーレイアウト
Grid System / Vertical Rythm
2010年3月15日月曜日
![Page 16: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/16.jpg)
SwapSkills2010年3月15日月曜日
![Page 17: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/17.jpg)
SwapSkills
ロジカルにやればできる
2010年3月15日月曜日
![Page 18: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/18.jpg)
SwapSkills
デザインツール
2010年3月15日月曜日
![Page 19: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/19.jpg)
SwapSkills2010年3月15日月曜日
![Page 20: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/20.jpg)
SwapSkills2010年3月15日月曜日
![Page 21: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/21.jpg)
SwapSkills2010年3月15日月曜日
![Page 22: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/22.jpg)
SwapSkills
(x)html + CSSコーディング
2010年3月15日月曜日
![Page 23: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/23.jpg)
SwapSkills
(x)html + CSS + browser
2010年3月15日月曜日
![Page 24: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/24.jpg)
SwapSkills
(x)html + CSS + browserコーディング+デザインツール
2010年3月15日月曜日
![Page 25: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/25.jpg)
SwapSkills2010年3月15日月曜日
![Page 26: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/26.jpg)
SwapSkills2010年3月15日月曜日
![Page 27: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/27.jpg)
SwapSkills
デザイン
2010年3月15日月曜日
![Page 28: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/28.jpg)
SwapSkills
デザイン
2010年3月15日月曜日
![Page 29: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/29.jpg)
SwapSkills
デザイン デザインカンプ
2010年3月15日月曜日
![Page 30: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/30.jpg)
SwapSkills
デザイン デザインカンプ
2010年3月15日月曜日
![Page 31: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/31.jpg)
SwapSkills
デザイン デザインカンプ 判断
2010年3月15日月曜日
![Page 32: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/32.jpg)
SwapSkills
デザイン デザインカンプ 判断
2010年3月15日月曜日
![Page 33: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/33.jpg)
SwapSkills
デザイン デザインカンプ 判断
2010年3月15日月曜日
![Page 34: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/34.jpg)
SwapSkills
デザイン デザインカンプ 判断
2010年3月15日月曜日
![Page 35: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/35.jpg)
SwapSkills
デザイン デザインカンプ 判断 コーディング
2010年3月15日月曜日
![Page 36: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/36.jpg)
SwapSkills
デザイン デザインカンプ 判断 コーディング
2010年3月15日月曜日
![Page 37: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/37.jpg)
SwapSkills
デザイン デザインカンプ 判断 コーディング
2010年3月15日月曜日
![Page 38: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/38.jpg)
SwapSkills
デザイン デザインカンプ 判断 コーディング
2010年3月15日月曜日
![Page 39: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/39.jpg)
SwapSkills
先 入 観preconceptions
2010年3月15日月曜日
![Page 40: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/40.jpg)
SwapSkills2010年3月15日月曜日
![Page 41: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/41.jpg)
SwapSkills2010年3月15日月曜日
![Page 42: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/42.jpg)
SwapSkills2010年3月15日月曜日
![Page 43: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/43.jpg)
SwapSkills
共 有s h a r e
2010年3月15日月曜日
![Page 44: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/44.jpg)
SwapSkills
Grid System
2010年3月15日月曜日
![Page 45: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/45.jpg)
SwapSkills
Josef
Muller-Brockmann
2010年3月15日月曜日
![Page 46: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/46.jpg)
SwapSkills
ページサイズを割り出すこと
コラムに割ること
デザインすること
- Grid System Raster systeme -Josef Muller-Brockmann
2010年3月15日月曜日
![Page 47: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/47.jpg)
SwapSkills
ページサイズを割り出すこと
2010年3月15日月曜日
![Page 48: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/48.jpg)
SwapSkills
960px
ページのサイズを割り出すこと
2010年3月15日月曜日
![Page 49: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/49.jpg)
SwapSkills
コラムに割ること
2010年3月15日月曜日
![Page 50: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/50.jpg)
SwapSkills
コラムに割ること
2010年3月15日月曜日
![Page 51: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/51.jpg)
SwapSkills
960/1 = 960
コラムに割ること
2010年3月15日月曜日
![Page 52: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/52.jpg)
SwapSkills
960/1 = 960
960/2 = 480
コラムに割ること
2010年3月15日月曜日
![Page 53: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/53.jpg)
SwapSkills
960/1 = 960
960/2 = 480
960/3 = 320
960/4 = 260
960/5 = 192
960/6 = 160
960/8 = 120
960/10 = 96
960/12 = 80
960/16 = 60
コラムに割ること
2010年3月15日月曜日
![Page 54: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/54.jpg)
SwapSkills
40px 20px
コラムに割ること
2010年3月15日月曜日
![Page 55: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/55.jpg)
SwapSkills
960gs
2010年3月15日月曜日
![Page 56: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/56.jpg)
SwapSkills2010年3月15日月曜日
![Page 57: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/57.jpg)
SwapSkills
40px20px
16
960-16-col.png
2010年3月15日月曜日
![Page 58: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/58.jpg)
SwapSkills
960-16-col.png
160px x 160pxバナー60px + 60px + 40px = 160px
2010年3月15日月曜日
![Page 59: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/59.jpg)
SwapSkills
html {
background : url(../grids/960-16-col.png)
repeat-y top center; }
2010年3月15日月曜日
![Page 60: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/60.jpg)
SwapSkills
Vertical Rythm
2010年3月15日月曜日
![Page 61: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/61.jpg)
SwapSkills
http://sushiandrobots.com/
Jina Bolton
2010年3月15日月曜日
![Page 62: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/62.jpg)
SwapSkills2010年3月15日月曜日
![Page 63: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/63.jpg)
SwapSkills
base gridベースグリッド
2010年3月15日月曜日
![Page 64: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/64.jpg)
SwapSkills2010年3月15日月曜日
![Page 65: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/65.jpg)
SwapSkills
x
2010年3月15日月曜日
![Page 66: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/66.jpg)
SwapSkills
x =
2010年3月15日月曜日
![Page 67: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/67.jpg)
SwapSkills
x =12px
font-size
2010年3月15日月曜日
![Page 68: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/68.jpg)
SwapSkills
x =12px
font-size
1.5
line-height
2010年3月15日月曜日
![Page 69: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/69.jpg)
SwapSkills
x =12px
font-size
1.5
line-height
18px
base-grid
2010年3月15日月曜日
![Page 70: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/70.jpg)
SwapSkills
The n
2010年3月15日月曜日
![Page 71: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/71.jpg)
SwapSkills
The n12px
2010年3月15日月曜日
![Page 72: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/72.jpg)
SwapSkills
The n12px18px
2010年3月15日月曜日
![Page 73: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/73.jpg)
SwapSkills
The n12px18px
18px
18px
2010年3月15日月曜日
![Page 74: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/74.jpg)
SwapSkills
html {
font-size : 87.5%; }16px x 87.5% = 14px
2010年3月15日月曜日
![Page 75: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/75.jpg)
SwapSkills2010年3月15日月曜日
![Page 76: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/76.jpg)
SwapSkills
14px
font-size
2010年3月15日月曜日
![Page 77: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/77.jpg)
SwapSkills
x14px
font-size
2010年3月15日月曜日
![Page 78: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/78.jpg)
SwapSkills
x14px
font-size
1.5
line-height
2010年3月15日月曜日
![Page 79: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/79.jpg)
SwapSkills
x =14px
font-size
1.5
line-height
2010年3月15日月曜日
![Page 80: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/80.jpg)
SwapSkills
x =14px
font-size
1.5
line-height
21px
base-grid
2010年3月15日月曜日
![Page 81: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/81.jpg)
SwapSkills
あいう
2010年3月15日月曜日
![Page 82: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/82.jpg)
SwapSkills
あいう14px
2010年3月15日月曜日
![Page 83: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/83.jpg)
SwapSkills
あいう14px21px
2010年3月15日月曜日
![Page 84: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/84.jpg)
SwapSkills
あいう14px21px
21px
21px
2010年3月15日月曜日
![Page 85: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/85.jpg)
SwapSkills
6pt: non pareil7pt: min ion8pt: brevier or small text9pt: bour geois or gal liard10pt: long primer or gara mond11pt: small pica or philo sophy12pt: pica14pt: eng lish or augustin18pt: great primer21pt: double small pica or double pica24pt: double pica or two-line pica36pt: double great primer or 2-line great primer
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4
2010年3月15日月曜日
![Page 86: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/86.jpg)
SwapSkills
h1 = 36px
h2 = 24px
h3 = 20px
h4, h5, h6 = 14px
見出しのフォントサイズ
2010年3月15日月曜日
![Page 87: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/87.jpg)
SwapSkills
あいう
2010年3月15日月曜日
![Page 88: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/88.jpg)
SwapSkills
あいう14px
2010年3月15日月曜日
![Page 89: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/89.jpg)
SwapSkills
あいう14px20px
2010年3月15日月曜日
![Page 90: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/90.jpg)
SwapSkills
あいう14px20px
20px
20px
2010年3月15日月曜日
![Page 91: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/91.jpg)
SwapSkills
20px
20px
20px
20px
20px
20px
html {
font-size : 87.5%}
p {
margin : 20px 0; }
2010年3月15日月曜日
![Page 92: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/92.jpg)
SwapSkills
20px
20px
20px
20px
html {
font-size : 87.5%}
p {
margin : 20px 0; }
2010年3月15日月曜日
![Page 93: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/93.jpg)
SwapSkills
margin-bottom のみで指定
2010年3月15日月曜日
![Page 94: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/94.jpg)
SwapSkills
20px
20px
20px
h1, h2, h3, h4, h5, h6 {margin-bottom : 20px; }
2010年3月15日月曜日
![Page 95: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/95.jpg)
SwapSkills2010年3月15日月曜日
![Page 96: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/96.jpg)
SwapSkills
20px
base-grid
2010年3月15日月曜日
![Page 97: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/97.jpg)
SwapSkills
/20px
base-grid
2010年3月15日月曜日
![Page 98: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/98.jpg)
SwapSkills
/20px
base-grid
14px
font-size
2010年3月15日月曜日
![Page 99: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/99.jpg)
SwapSkills
/ =20px
base-grid
14px
font-size
2010年3月15日月曜日
![Page 100: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/100.jpg)
SwapSkills
/ =20px
base-grid
14px
font-size
1.42857
line-height
2010年3月15日月曜日
![Page 101: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/101.jpg)
SwapSkills
あいう
2010年3月15日月曜日
![Page 102: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/102.jpg)
SwapSkills
あいう1em
2010年3月15日月曜日
![Page 103: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/103.jpg)
SwapSkills
あいう1em1.42857em
2010年3月15日月曜日
![Page 104: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/104.jpg)
SwapSkills
あいう1em1.42857em
1.42857em
1.42857em
2010年3月15日月曜日
![Page 105: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/105.jpg)
SwapSkills
Color
2010年3月15日月曜日
![Page 106: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/106.jpg)
SwapSkills
背景色
テキスト色(:link, :visited)テキスト色(:hover, :active)
キーカラー
テキスト
2010年3月15日月曜日
![Page 107: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/107.jpg)
SwapSkills
Adobe Kuler
2010年3月15日月曜日
![Page 108: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/108.jpg)
SwapSkills
① 自然の色
② カラースキーマ
③ 似ている色のウェブサイト
2010年3月15日月曜日
![Page 109: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/109.jpg)
SwapSkills
http://www.snook.ca/technical/
colour_contrast/colour.html
2010年3月15日月曜日
![Page 110: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/110.jpg)
SwapSkills
Further Reading•http://www.subtraction.com/pics/0703/grids_are_good.pdf
•http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-
better-typography
•http://thinkit.jp/article/807/1/ 自分の記事
image•http://www.autismhangout.com/userfiles/image/monkey.jpg
2010年3月15日月曜日
![Page 111: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/111.jpg)
SwapSkills
Thanks !
2010年3月15日月曜日
![Page 112: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/112.jpg)
SwapSkills
One more thing
2010年3月15日月曜日
![Page 113: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/113.jpg)
SwapSkills
CSS3
2010年3月15日月曜日
![Page 114: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/114.jpg)
SwapSkills2010年3月15日月曜日
![Page 115: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/115.jpg)
SwapSkills
2006/01 -
2010年3月15日月曜日
![Page 116: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/116.jpg)
SwapSkills
http://www.stuffandnonsense.co.uk/
Andy Clarke
2010年3月15日月曜日
![Page 117: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/117.jpg)
SwapSkills2010年3月15日月曜日
![Page 118: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/118.jpg)
SwapSkills2010年3月15日月曜日
![Page 119: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/119.jpg)
SwapSkills
一生そろいません
2010年3月15日月曜日
![Page 120: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/120.jpg)
SwapSkills
より実践的なデモに進もう
2010年3月15日月曜日
![Page 121: サルでもできるウェブデザイン : SwapSkills 2010 Vol01](https://reader033.fdocuments.net/reader033/viewer/2022052321/555618b8d8b42a3f168b534d/html5/thumbnails/121.jpg)
SwapSkills
http://www.vimeo.com/8235596
Andy Clarke
2010年3月15日月曜日