Submit Search
Upload
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
•
9 likes
•
3,058 views
Hiroyuki Ogawa
Follow
スタートアップの現場で求められるデザイ ナーのスキルとは? - Co-Edo Designers Talk #1のスライド。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 58
Download now
Download to read offline
Recommended
2012: A Web Odyssey
2012: A Web Odyssey
Fuminori Mori
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
Wix study
Wix study
Yu Hayashi
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
Takashi Endo
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
Recommended
2012: A Web Odyssey
2012: A Web Odyssey
Fuminori Mori
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
Wix study
Wix study
Yu Hayashi
メディア工房サマーワークショップ「Webアプリ制作」1日目
メディア工房サマーワークショップ「Webアプリ制作」1日目
Takashi Endo
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
実践!構造化マークアップ
実践!構造化マークアップ
Hiroyuki Ogawa
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
株式会社GreenHack
Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用
Junzo Matunoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
masaaki komori
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティ株式会社
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
プロトタイプ時代の WordPressテーマの作り方・考え方
プロトタイプ時代の WordPressテーマの作り方・考え方
kenji goto
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Takashi Uemura
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Katsumi Tazuke
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る
hiroki-ishikawa
More Related Content
Similar to デザイナーも知っておきたい HTML+CSSコーディングの最新常識
実践!構造化マークアップ
実践!構造化マークアップ
Hiroyuki Ogawa
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
株式会社GreenHack
Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用
Junzo Matunoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
masaaki komori
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティ株式会社
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
Naoki Yamada
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
プロトタイプ時代の WordPressテーマの作り方・考え方
プロトタイプ時代の WordPressテーマの作り方・考え方
kenji goto
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
Takashi Uemura
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Yusuke Kawabata
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Katsumi Tazuke
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
Masakazu Muraoka
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る
hiroki-ishikawa
Similar to デザイナーも知っておきたい HTML+CSSコーディングの最新常識
(20)
実践!構造化マークアップ
実践!構造化マークアップ
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
Webディレクターとして word pressを提案するときに考えること + 運用
Webディレクターとして word pressを提案するときに考えること + 運用
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Web制作者は変化についていけるか? 変化についていくべきか?
Web制作者は変化についていけるか? 変化についていくべきか?
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
ニフティセミナー資料 最初にやっておくべき!内部SEO4つの基本対策
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
エンジニアからデザイナーに贈るプロトタイピングのすすめ - 春のフロントエンド祭り 2015
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
プロトタイプ時代の WordPressテーマの作り方・考え方
プロトタイプ時代の WordPressテーマの作り方・考え方
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
PHPとフロントのイイ関係・動くスタイルガイドをつくろう
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
2013年 Webデザインのトレンドを振り返る
2013年 Webデザインのトレンドを振り返る
デザイナーも知っておきたい HTML+CSSコーディングの最新常識
1.
2.
2012 年 4
月よりフリーランスとして独立。 Webデザイン・コーディングの受託を中心に、雑誌への寄稿、 最近ではスタートアップの手伝いや自サービスの開発など幅広く活動している。 横浜在住。 小川 裕之 barchin hiro.ogw 「レスポンシブWebデザイン入門」 「現場のプロが教えるHTML+CSSコーディングの最新常識 知らないと困るWebデザインの新ルール4」執筆
3.
https://peraichi.com/
4.
http://sket.in/
5.
6.
7.
8.
9.
Jade
10.
https://peraichi.com/
11.
12.
13.
Photo by Jeremy
Keith
14.
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.
• •
19.
20.
Animation
21.
22.
23.
24.
25.
26.
27.
28.
29.
perfomance
30.
Good performance is
good design Brad Frost
31.
32.
Director InfraDesigner FrontEnd
33.
Director InfraDesigner FrontEnd
34.
CSSの利用
35.
36.
37.
38.
39.
40.
SVGの利用
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.
45.
Webfontsの利用
46.
47.
48.
Font Awesome PS
49.
50.
51.
http://design-spice.com/2014/04/16/reducing-image-size/
52.
53.
component
54.
55.
56.
57.
Download now