2012 年 4 月よりフリーランスとして独立。
Webデザイン・コーディングの受託を中心に、雑誌への寄稿、
最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。
横浜在住。
小川 裕之
barchin  hiro.ogw
「レスポンシブWebデザイン入門」
「現場のプロが教えるHTML+CSSコーディングの最新常識
 知らないと困るWebデザインの新ルール4」執筆
https://peraichi.com/
http://sket.in/
Jade
https://peraichi.com/


Photo by Jeremy Keith
コーディング
<!DOCTYPE html>
<html lang="ja" xmlns="http://
www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://
www.facebook.com/2008/fbml"
xml:lang="ja">
<head>
<meta charset="utf-8">
<meta property="og:image"
content="http://design-spice.com/
wp/wp-content/uploads/2015/04/
tn_jyoshiki.jpg">
<meta property="og:title"
content="「現場のプロが教える
<!DOCTYPE html>
<html lang="ja" xmlns="http://
www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://
www.facebook.com/2008/fbml"
xml:lang="ja">
<head>
<meta charset="utf-8">
<meta property="og:image"
content="http://design-spice.com/
wp/wp-content/uploads/2015/04/
tn_jyoshiki.jpg">
<meta property="og:title"
content="「現場のプロが教える
• •
Animation
perfomance
Good performance is good design
Brad Frost
Director InfraDesigner FrontEnd
Director InfraDesigner FrontEnd
CSSの利用
SVGの利用
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/20
y="0px" viewBox="0 0 400 400" enable-background="new
<g>
<g>
<g>
<path fill="#E2E4E5" d="M379.2,19.5c-81-17.2
c-2.2,4.2-4.5,8.4-6.7,12.7c-3.8,7.2-7.6,14
v52.9c33.4,0,117.6-59.9,117.6-156.4C35
</g>
</g>
<g>
<g>
<path fill="#F0F1F1" d="M148.2,329.1c-7.3,3.7
C145.6,105.2,248.5-8.3,379.2,19.5C406.
</g>
</g>
<g>
<path fill="#FFFFFF" d="M168.1,104.8c-33.8,37-64.3
l33,33L378.7,19.4C295.2,1.9,224.9,42.6,168.1,
</g>
<g>
<g>
<circle fill="#40C9E7" cx="308.5" cy="90.2" r=
</g>
</g>
<g>
<g>
<path fill="#3E3E3F" d="M148.2,329.1c-7.3,3.7
</g>
Webfontsの利用
Font Awesome PS
http://design-spice.com/2014/04/16/reducing-image-size/
component




デザイナーも知っておきたい HTML+CSSコーディングの最新常識

デザイナーも知っておきたい HTML+CSSコーディングの最新常識

  • 2.
    2012 年 4月よりフリーランスとして独立。 Webデザイン・コーディングの受託を中心に、雑誌への寄稿、 最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。 横浜在住。 小川 裕之 barchin  hiro.ogw 「レスポンシブWebデザイン入門」 「現場のプロが教えるHTML+CSSコーディングの最新常識  知らないと困るWebデザインの新ルール4」執筆
  • 3.
  • 4.
  • 9.
  • 10.
  • 11.
  • 13.
  • 15.
  • 16.
    <!DOCTYPE html> <html lang="ja"xmlns="http:// www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http:// www.facebook.com/2008/fbml" xml:lang="ja"> <head> <meta charset="utf-8"> <meta property="og:image" content="http://design-spice.com/ wp/wp-content/uploads/2015/04/ tn_jyoshiki.jpg"> <meta property="og:title" content="「現場のプロが教える
  • 17.
    <!DOCTYPE html> <html lang="ja"xmlns="http:// www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http:// www.facebook.com/2008/fbml" xml:lang="ja"> <head> <meta charset="utf-8"> <meta property="og:image" content="http://design-spice.com/ wp/wp-content/uploads/2015/04/ tn_jyoshiki.jpg"> <meta property="og:title" content="「現場のプロが教える
  • 18.
  • 20.
  • 29.
  • 30.
    Good performance isgood design Brad Frost
  • 32.
  • 33.
  • 34.
  • 40.
  • 43.
    <?xml version="1.0" encoding="utf-8"?> <!DOCTYPEsvg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w <svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/20 y="0px" viewBox="0 0 400 400" enable-background="new <g> <g> <g> <path fill="#E2E4E5" d="M379.2,19.5c-81-17.2 c-2.2,4.2-4.5,8.4-6.7,12.7c-3.8,7.2-7.6,14 v52.9c33.4,0,117.6-59.9,117.6-156.4C35 </g> </g> <g> <g> <path fill="#F0F1F1" d="M148.2,329.1c-7.3,3.7 C145.6,105.2,248.5-8.3,379.2,19.5C406. </g> </g> <g> <path fill="#FFFFFF" d="M168.1,104.8c-33.8,37-64.3 l33,33L378.7,19.4C295.2,1.9,224.9,42.6,168.1, </g> <g> <g> <circle fill="#40C9E7" cx="308.5" cy="90.2" r= </g> </g> <g> <g> <path fill="#3E3E3F" d="M148.2,329.1c-7.3,3.7 </g>
  • 45.
  • 48.
  • 51.
  • 53.
  • 57.