Más contenido relacionado Más de Satoshi Kikuchi (18) サルでもできるWebデザイン:SwapSkills1. MONKEY CAN DO
サルでもできるウェブデザイン
DESIGN WORKS
2010. 03.06 Takashi Kikuchi
SwapSkills
2010年3月15日月曜日
2. 菊池 崇
allWebクリエイター塾講師
Web Directions East LLC. CEO
SwapSkills
2010年3月15日月曜日
3. ?
書 籍
HTML5 & CSS3
HTML5 doctor
今夏発売!
SwapSkills
2010年3月15日月曜日
7. CSS3
border-radius
rgba/hsla
gradient(radial/liner)
SwapSkills
2010年3月15日月曜日
10. デザインセンス
0
SwapSkills
2010年3月15日月曜日
14. デザイン
レイアウト
Grid System / Vertical Rythm
SwapSkills
2010年3月15日月曜日
15. デザイン
レイアウト カラー
Grid System / Vertical Rythm
SwapSkills
2010年3月15日月曜日
24. (x)html + CSS + browser
コーディング+デザインツール
SwapSkills
2010年3月15日月曜日
29. デザイン デザインカンプ
SwapSkills
2010年3月15日月曜日
30. デザイン デザインカンプ
SwapSkills
2010年3月15日月曜日
31. デザイン デザインカンプ 判断
SwapSkills
2010年3月15日月曜日
32. デザイン デザインカンプ 判断
SwapSkills
2010年3月15日月曜日
33. デザイン デザインカンプ 判断
SwapSkills
2010年3月15日月曜日
34. デザイン デザインカンプ 判断
SwapSkills
2010年3月15日月曜日
35. デザイン デザインカンプ 判断 コーディング
SwapSkills
2010年3月15日月曜日
36. デザイン デザインカンプ 判断 コーディング
SwapSkills
2010年3月15日月曜日
37. デザイン デザインカンプ 判断 コーディング
SwapSkills
2010年3月15日月曜日
38. デザイン デザインカンプ 判断 コーディング
SwapSkills
2010年3月15日月曜日
39. 先入観
preconceptions
SwapSkills
2010年3月15日月曜日
43. 共有
s h a r e
SwapSkills
2010年3月15日月曜日
45. Josef
Muller-Brockmann
SwapSkills
2010年3月15日月曜日
46. ページサイズを割り出すこと
コラムに割ること
デザインすること
- Grid System Raster systeme -
Josef Muller-Brockmann
SwapSkills
2010年3月15日月曜日
47. ページサイズを
割り出 す こ と
SwapSkills
2010年3月15日月曜日
51. コラムに割ること
960/1 = 960
SwapSkills
2010年3月15日月曜日
52. コラムに割ること
960/1 = 960
960/2 = 480
SwapSkills
2010年3月15日月曜日
53. コラムに割ること
960/1 = 960 960/6 = 160
960/2 = 480 960/8 = 120
960/3 = 320 960/10 = 96
960/4 = 260 960/12 = 80
960/5 = 192 960/16 = 60
SwapSkills
2010年3月15日月曜日
54. コラムに割ること
40px 20px
SwapSkills
2010年3月15日月曜日
57. 16
40px
20px
960-16-col.png
SwapSkills
2010年3月15日月曜日
58. 160px x 160pxバナー
60px + 60px + 40px = 160px
960-16-col.png
SwapSkills
2010年3月15日月曜日
59. html {
background : url(../grids/960-16-col.png)
repeat-y top center; }
SwapSkills
2010年3月15日月曜日
61. Jina Bolton
http://sushiandrobots.com/
SwapSkills
2010年3月15日月曜日
63. base grid
ベ ース グ リ ッ ド
SwapSkills
2010年3月15日月曜日
66. x =
SwapSkills
2010年3月15日月曜日
67. 12px x =
font-size
SwapSkills
2010年3月15日月曜日
68. 12px x 1.5 =
font-size line-height
SwapSkills
2010年3月15日月曜日
69. 12px x 1.5 = 18px
font-size line-height base-grid
SwapSkills
2010年3月15日月曜日
70. The n
SwapSkills
2010年3月15日月曜日
71. 12px The n
SwapSkills
2010年3月15日月曜日
72. 18px 12px The n
SwapSkills
2010年3月15日月曜日
73. 18px
18px 12px The n
18px
SwapSkills
2010年3月15日月曜日
74. html {
16px x 87.5% = 14px
font-size : 87.5%; }
SwapSkills
2010年3月15日月曜日
76. 14px
font-size
SwapSkills
2010年3月15日月曜日
77. 14px x
font-size
SwapSkills
2010年3月15日月曜日
78. 14px x 1.5
font-size line-height
SwapSkills
2010年3月15日月曜日
79. 14px x 1.5 =
font-size line-height
SwapSkills
2010年3月15日月曜日
80. 14px x 1.5 = 21px
font-size line-height base-grid
SwapSkills
2010年3月15日月曜日
82. 14px あいう
SwapSkills
2010年3月15日月曜日
83. 21px 14px あいう
SwapSkills
2010年3月15日月曜日
84. 21px
21px 14px あいう
21px
SwapSkills
2010年3月15日月曜日
85. 6pt: non pareil
7pt: min ion
8pt: brevier or small text
9pt: bour geois or gal liard
10pt: long primer or gara mond
11pt: small pica or philo sophy
12pt: pica
14pt: eng lish or augustin
18pt: great primer
21pt: double small pica or double pica
24pt: double pica or two-line pica
36pt: double great primer or 2-line great primer
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4
SwapSkills
2010年3月15日月曜日
86. 見出しのフォントサイズ
h1 = 36px
h2 = 24px
h3 = 20px
h4, h5, h6 = 14px
SwapSkills
2010年3月15日月曜日
88. 14px あいう
SwapSkills
2010年3月15日月曜日
89. 20px 14px あいう
SwapSkills
2010年3月15日月曜日
90. 20px
20px 14px あいう
20px
SwapSkills
2010年3月15日月曜日
91. 20px html {
font-size : 87.5%}
20px
20px p{
margin : 20px 0; }
20px
20px
20px
SwapSkills
2010年3月15日月曜日
92. 20px html {
font-size : 87.5%}
20px
p{
20px margin : 20px 0; }
20px
SwapSkills
2010年3月15日月曜日
94. h1, h2, h3, h4, h5, h6 {
margin-bottom : 20px; }
20px
20px
20px
SwapSkills
2010年3月15日月曜日
96. 20px
base-grid
SwapSkills
2010年3月15日月曜日
97. 20px /
base-grid
SwapSkills
2010年3月15日月曜日
98. 20px / 14px
base-grid font-size
SwapSkills
2010年3月15日月曜日
99. 20px / 14px =
base-grid font-size
SwapSkills
2010年3月15日月曜日
100. 20px / 14px = 1.42857
base-grid font-size line-height
SwapSkills
2010年3月15日月曜日
102. 1em あいう
SwapSkills
2010年3月15日月曜日
103. 1.42857em 1em あいう
SwapSkills
2010年3月15日月曜日
104. 1.42857em
1.42857em 1em あいう
1.42857em
SwapSkills
2010年3月15日月曜日
106. キーカラー
背景色
テキスト
テキスト色(:link, :visited)
テキスト色(:hover, :active)
SwapSkills
2010年3月15日月曜日
108. ① 自然の色
② カラースキーマ
③ 似ている色のウェブサイト
SwapSkills
2010年3月15日月曜日
110. 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
SwapSkills
2010年3月15日月曜日
116. Andy Clarke
http://www.stuffandnonsense.co.uk/
SwapSkills
2010年3月15日月曜日
120. より実践的な
デモに進もう
SwapSkills
2010年3月15日月曜日
121. Andy Clarke
http://www.vimeo.com/8235596
SwapSkills
2010年3月15日月曜日