SwapSkills
Takashi Kikuchi2010. 03.06
サルでもできるウェブデザインMONKEY CAN DO DESIGN WORKS
2010年3月15日月曜日
SwapSkills
菊池 崇
Web Directions East LLC. CEO
allWebクリエイター塾講師
2010年3月15日月曜日
SwapSkills
HTML5 & CSS3
HTML5 doctor? 今夏発売!
書 籍
2010年3月15日月曜日
SwapSkills
海外のカンファレンスに参加自分の技術を研鑽すること
2010年3月15日月曜日
SwapSkills
コーダー/マーケッター
2010年3月15日月曜日
SwapSkills
CSS3border-radius
rgba/hsla
gradient(radial/liner)
2010年3月15日月曜日
SwapSkills
コーダー/マーケッター
2010年3月15日月曜日
SwapSkills
コーダー/マーケッター
デザインセンス+
2010年3月15日月曜日
SwapSkills
0デザインセンス
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
デザインセンスが”0”でウェブデザインは可能か
2010年3月15日月曜日
SwapSkills
デザイン
2010年3月15日月曜日
SwapSkills
デザイン
レイアウト
Grid System / Vertical Rythm
2010年3月15日月曜日
SwapSkills
デザイン
カラーレイアウト
Grid System / Vertical Rythm
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
ロジカルにやればできる
2010年3月15日月曜日
SwapSkills
デザインツール
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
(x)html + CSSコーディング
2010年3月15日月曜日
SwapSkills
(x)html + CSS + browser
2010年3月15日月曜日
SwapSkills
(x)html + CSS + browserコーディング+デザインツール
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
デザイン
2010年3月15日月曜日
SwapSkills
デザイン
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ 判断
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ 判断
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ 判断
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ 判断
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ 判断 コーディング
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ 判断 コーディング
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ 判断 コーディング
2010年3月15日月曜日
SwapSkills
デザイン デザインカンプ 判断 コーディング
2010年3月15日月曜日
SwapSkills
先 入 観preconceptions
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
共 有s h a r e
2010年3月15日月曜日
SwapSkills
Grid System
2010年3月15日月曜日
SwapSkills
Josef
Muller-Brockmann
2010年3月15日月曜日
SwapSkills
ページサイズを割り出すこと
コラムに割ること
デザインすること
- Grid System Raster systeme -Josef Muller-Brockmann
2010年3月15日月曜日
SwapSkills
ページサイズを割り出すこと
2010年3月15日月曜日
SwapSkills
960px
ページのサイズを割り出すこと
2010年3月15日月曜日
SwapSkills
コラムに割ること
2010年3月15日月曜日
SwapSkills
コラムに割ること
2010年3月15日月曜日
SwapSkills
960/1 = 960
コラムに割ること
2010年3月15日月曜日
SwapSkills
960/1 = 960
960/2 = 480
コラムに割ること
2010年3月15日月曜日
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日月曜日
SwapSkills
40px 20px
コラムに割ること
2010年3月15日月曜日
SwapSkills
960gs
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
40px20px
16
960-16-col.png
2010年3月15日月曜日
SwapSkills
960-16-col.png
160px x 160pxバナー60px + 60px + 40px = 160px
2010年3月15日月曜日
SwapSkills
html {
background : url(../grids/960-16-col.png)
repeat-y top center; }
2010年3月15日月曜日
SwapSkills
Vertical Rythm
2010年3月15日月曜日
SwapSkills
http://sushiandrobots.com/
Jina Bolton
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
base gridベースグリッド
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
x
2010年3月15日月曜日
SwapSkills
x =
2010年3月15日月曜日
SwapSkills
x =12px
font-size
2010年3月15日月曜日
SwapSkills
x =12px
font-size
1.5
line-height
2010年3月15日月曜日
SwapSkills
x =12px
font-size
1.5
line-height
18px
base-grid
2010年3月15日月曜日
SwapSkills
The n
2010年3月15日月曜日
SwapSkills
The n12px
2010年3月15日月曜日
SwapSkills
The n12px18px
2010年3月15日月曜日
SwapSkills
The n12px18px
18px
18px
2010年3月15日月曜日
SwapSkills
html {
font-size : 87.5%; }16px x 87.5% = 14px
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
14px
font-size
2010年3月15日月曜日
SwapSkills
x14px
font-size
2010年3月15日月曜日
SwapSkills
x14px
font-size
1.5
line-height
2010年3月15日月曜日
SwapSkills
x =14px
font-size
1.5
line-height
2010年3月15日月曜日
SwapSkills
x =14px
font-size
1.5
line-height
21px
base-grid
2010年3月15日月曜日
SwapSkills
あいう
2010年3月15日月曜日
SwapSkills
あいう14px
2010年3月15日月曜日
SwapSkills
あいう14px21px
2010年3月15日月曜日
SwapSkills
あいう14px21px
21px
21px
2010年3月15日月曜日
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日月曜日
SwapSkills
h1 = 36px
h2 = 24px
h3 = 20px
h4, h5, h6 = 14px
見出しのフォントサイズ
2010年3月15日月曜日
SwapSkills
あいう
2010年3月15日月曜日
SwapSkills
あいう14px
2010年3月15日月曜日
SwapSkills
あいう14px20px
2010年3月15日月曜日
SwapSkills
あいう14px20px
20px
20px
2010年3月15日月曜日
SwapSkills
20px
20px
20px
20px
20px
20px
html {
font-size : 87.5%}
p {
margin : 20px 0; }
2010年3月15日月曜日
SwapSkills
20px
20px
20px
20px
html {
font-size : 87.5%}
p {
margin : 20px 0; }
2010年3月15日月曜日
SwapSkills
margin-bottom のみで指定
2010年3月15日月曜日
SwapSkills
20px
20px
20px
h1, h2, h3, h4, h5, h6 {margin-bottom : 20px; }
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
20px
base-grid
2010年3月15日月曜日
SwapSkills
/20px
base-grid
2010年3月15日月曜日
SwapSkills
/20px
base-grid
14px
font-size
2010年3月15日月曜日
SwapSkills
/ =20px
base-grid
14px
font-size
2010年3月15日月曜日
SwapSkills
/ =20px
base-grid
14px
font-size
1.42857
line-height
2010年3月15日月曜日
SwapSkills
あいう
2010年3月15日月曜日
SwapSkills
あいう1em
2010年3月15日月曜日
SwapSkills
あいう1em1.42857em
2010年3月15日月曜日
SwapSkills
あいう1em1.42857em
1.42857em
1.42857em
2010年3月15日月曜日
SwapSkills
Color
2010年3月15日月曜日
SwapSkills
背景色
テキスト色(:link, :visited)テキスト色(:hover, :active)
キーカラー
テキスト
2010年3月15日月曜日
SwapSkills
Adobe Kuler
2010年3月15日月曜日
SwapSkills
① 自然の色
② カラースキーマ
③ 似ている色のウェブサイト
2010年3月15日月曜日
SwapSkills
http://www.snook.ca/technical/
colour_contrast/colour.html
2010年3月15日月曜日
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日月曜日
SwapSkills
Thanks !
2010年3月15日月曜日
SwapSkills
One more thing
2010年3月15日月曜日
SwapSkills
CSS3
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
2006/01 -
2010年3月15日月曜日
SwapSkills
http://www.stuffandnonsense.co.uk/
Andy Clarke
2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills2010年3月15日月曜日
SwapSkills
一生そろいません
2010年3月15日月曜日
SwapSkills
より実践的なデモに進もう
2010年3月15日月曜日
SwapSkills
http://www.vimeo.com/8235596
Andy Clarke
2010年3月15日月曜日