Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2012 年 4 月よりフリーランスとして独立。
Webデザイン・コーディングの受託を中心に、雑誌への寄稿、
最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。
横浜在住。
小川 裕之
barchin  hiro.ogw
...
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.f...
<!DOCTYPE html>
<html lang="ja" xmlns="http://
www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://
www.f...
• •
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=...
Webfontsの利用
Font Awesome PS
http://design-spice.com/2014/04/16/reducing-image-size/
component




デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
Upcoming SlideShare
Loading in …5
×

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

2,199 views

Published on

スタートアップの現場で求められるデザイ
ナーのスキルとは? - Co-Edo Designers Talk #1のスライド。

Published in: Technology
  • Be the first to comment

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

  1. 1. 2012 年 4 月よりフリーランスとして独立。 Webデザイン・コーディングの受託を中心に、雑誌への寄稿、 最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。 横浜在住。 小川 裕之 barchin  hiro.ogw 「レスポンシブWebデザイン入門」 「現場のプロが教えるHTML+CSSコーディングの最新常識  知らないと困るWebデザインの新ルール4」執筆
  2. 2. https://peraichi.com/
  3. 3. http://sket.in/
  4. 4. Jade
  5. 5. https://peraichi.com/
  6. 6.
  7. 7. Photo by Jeremy Keith
  8. 8. コーディング
  9. 9. <!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="「現場のプロが教える
  10. 10. <!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="「現場のプロが教える
  11. 11. • •
  12. 12. Animation
  13. 13. perfomance
  14. 14. Good performance is good design Brad Frost
  15. 15. Director InfraDesigner FrontEnd
  16. 16. Director InfraDesigner FrontEnd
  17. 17. CSSの利用
  18. 18. SVGの利用
  19. 19. <?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>
  20. 20. Webfontsの利用
  21. 21. Font Awesome PS
  22. 22. http://design-spice.com/2014/04/16/reducing-image-size/
  23. 23. component
  24. 24. 
 


×