SlideShare a Scribd company logo
1 of 58
Download to read offline
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コーディングの最新常識

More Related Content

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

実践!構造化マークアップ
実践!構造化マークアップ実践!構造化マークアップ
実践!構造化マークアップHiroyuki Ogawa
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121Shohei Aoyama
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様株式会社GreenHack
 
Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用Junzo Matunoo
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?masaaki komori
 
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策ニフティ株式会社
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015Naoki Yamada
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則知己 久保
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方kenji goto
 
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)Takashi Uemura
 
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろうPHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろうYusuke Kawabata
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Noriaki UCHIYAMA
 
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイントWebサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイントKatsumi Tazuke
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶNaoki Kanazawa
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Masakazu Muraoka
 
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返るhiroki-ishikawa
 

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

実践!構造化マークアップ
実践!構造化マークアップ実践!構造化マークアップ
実践!構造化マークアップ
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
Prejob wordpress v2_1121
Prejob wordpress v2_1121Prejob wordpress v2_1121
Prejob wordpress v2_1121
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
 
Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
 
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
 
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
 
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
 
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
 
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろうPHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
 
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイントWebサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
 
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る
 

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

  • 1.
  • 2. 2012 年 4 月よりフリーランスとして独立。 Webデザイン・コーディングの受託を中心に、雑誌への寄稿、 最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。 横浜在住。 小川 裕之 barchin  hiro.ogw 「レスポンシブWebデザイン入門」 「現場のプロが教えるHTML+CSSコーディングの最新常識  知らないと困るWebデザインの新ルール4」執筆
  • 5.
  • 6.
  • 7.
  • 8.
  • 11.
  • 12.
  • 14.
  • 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="「現場のプロが教える
  • 19.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 30. Good performance is good design Brad Frost
  • 31.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 41.
  • 42.
  • 43. <?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>
  • 44.
  • 46.
  • 47.
  • 49.
  • 50.
  • 52.
  • 54.
  • 55.
  • 56.