Suche senden
Hochladen
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
•
35 gefällt mir
•
5,954 views
Naoki Matsuda
Folgen
Melden
Teilen
Melden
Teilen
1 von 28
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料
horike37
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
Empfohlen
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料
horike37
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
Yoshifumi Nishimoto
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
Weitere ähnliche Inhalte
Was ist angesagt?
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
Yoshifumi Nishimoto
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
Was ist angesagt?
(20)
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
WordPressってブログじゃないの?
WordPressってブログじゃないの?
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Webっちゃ vol.01 [Wordpressでできること]
Webっちゃ vol.01 [Wordpressでできること]
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
WordPressってこんなCMS
WordPressってこんなCMS
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Ähnlich wie ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
Kunihiko Miyanaga
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
ksimoji
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
ssuserd60633
Mtddc hokkaido-2010-ideamans-session
Mtddc hokkaido-2010-ideamans-session
Kunihiko Miyanaga
CSS3の最新事情
CSS3の最新事情
Makoto Kato
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
Movable Typeセミナー8月9日@大久保 アイデアマンズ
Movable Typeセミナー8月9日@大久保 アイデアマンズ
Kunihiko Miyanaga
CSS Design and Programming
CSS Design and Programming
Taku AMANO
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
eiji sekiya
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Odyssey Eightbit
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
Windows Phone 8 アプリ開発 03.構築
Windows Phone 8 アプリ開発 03.構築
Akira Hatsune
マークアップ講座 02 CSS
マークアップ講座 02 CSS
eiji sekiya
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
DeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきた
silvers ofsilvers
About rails 3
About rails 3
issei126
Ähnlich wie ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
(20)
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
Mtddc hokkaido-2010-ideamans-session
Mtddc hokkaido-2010-ideamans-session
CSS3の最新事情
CSS3の最新事情
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Movable Typeセミナー8月9日@大久保 アイデアマンズ
Movable Typeセミナー8月9日@大久保 アイデアマンズ
CSS Design and Programming
CSS Design and Programming
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
Twenty Eleven で レスポンシブサイトを つくろう、そうしよう
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Windows Phone 8 アプリ開発 03.構築
Windows Phone 8 アプリ開発 03.構築
マークアップ講座 02 CSS
マークアップ講座 02 CSS
Css preprocessorの始めかた
Css preprocessorの始めかた
DeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきた
About rails 3
About rails 3
Mehr von Naoki Matsuda
DIST.12 「Adobe Creative Station ができるまで」
DIST.12 「Adobe Creative Station ができるまで」
Naoki Matsuda
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
Naoki Matsuda
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
Naoki Matsuda
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
Naoki Matsuda
WordPress関数の処理コストを考えよう
WordPress関数の処理コストを考えよう
Naoki Matsuda
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
Naoki Matsuda
Mehr von Naoki Matsuda
(8)
DIST.12 「Adobe Creative Station ができるまで」
DIST.12 「Adobe Creative Station ができるまで」
HTML5 と SVG で考える、これからの画像アクセシビリティ
HTML5 と SVG で考える、これからの画像アクセシビリティ
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
モックアップやプロトタイプづくりを 加速させる。それが SVG。@DIST.4 「Life is Short」
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
CSS Nite in Ginza, Vol.68 # HiDPI時代のFireworks
WordPress関数の処理コストを考えよう
WordPress関数の処理コストを考えよう
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
1.
第5回 レスポンシブ Web デザインを 学ぼう!実装編
2.
レスポンシブ・ウェブデザイン おさらい
3.
リキッド
< レスポンシブ • ブラウザの幅に応じて • デバイスの幅に応じて、 要素の幅のみが可変 要素の幅だけでなく、 色、背景なども可変 • ベースレイアウトは同じ。 デバイス毎に個別の レイアウトにはならない • レイアウトもデバイス毎に 適したものに可変 • コンテンツ量も可変
4.
レスポンシブ・ウェブデザイン 実装の基本 • HTML+CSSはワンソース • 基本、リキッドレイアウト •
「viewport」を指定する • ブラウザ幅のブレイクポイント • CSS3「Media Queries」で実装する • CSSによるレイアウト
5.
viewport
6.
viewport を指定しない場合
PCサイトを、スマホで 980px そのまま見た場合がこれ。
7.
viewport • メタ要素 <meta
name="viewport" ...> • モバイル端末ブラウザの表示幅を指定 • ピンチによる、拡大縮小の可否の指定 • 拡大縮小の最大・最少倍率の指定
8.
<meta name="viewport"
content="width=640"> 640px ちなみに、Appleのサイトだと、 <meta name="viewport" content="width=1024">
9.
<meta name="viewport"
content="device-width"> 端末毎に設定されている横幅。 各端末によって違います。 320px 480px
10.
breakpoint 320 ~ 480px
480 ~ 768px 768 ~ 1980px ~ 480px 768px
11.
Orientation
端末の向きを変えて使用できる。 「Screen Orientation」 向きでブラウザの横幅が変わる。 portrait 320px landscape 480px
12.
主要スマートフォンの解像度
機種名 ディスプレイサイズ devicePixelRatio ブラウザのサイズ iPhone4 / iPhone4S 640 × 960 2 320 × 480 iOS iPhone3G / 3GS 320 × 480 1 320 × 480 HT-03A 320 × 480 1 320 × 480 Xperia / Xperia arc 480 × 854 1.5 320 × 570 HTC Desire HD 480 × 800 1.5 320 × 533 Android Nexus One 480 × 800 1.5 320 × 533 Galaxy S 480 × 800 1.5 320 × 533 IS03 640 × 960 2 320 × 480 Galaxy Tab 600 × 1024 1.5 400 × 682
13.
device-width Desktop,iPhone、Android、縦向き、横向き。 それぞれの端末や使い方で、 ブラウザの横幅はバラバラ。
14.
breakpoint
640px とかでも可。 何をモバイルとみなすか、で任意の判断
15.
Media Queries W3C Recommendation
19 June 2012 @media screen and (min-width: 768px) {...} <link media="screen and (min-width: 768px)" href="xxxx.css"> @import url("xxxx.css") only screen and (min-width: 768px);
16.
@media ひとつのCSSファイル内で振り分け @media screen and
(min-width: 481px) { body {...} } @media screen and (min-width: 768px) { body {...} }
17.
link 複数CSSファイルをlink要素で読み込む <link href="phone.css"> <link media="screen
and (min-width: 481px)" href="tablet.css"> <link media="screen and (min-width: 768px)" href="desktop.css">
18.
@import 複数CSSファイルをimportで読み込む @import url("phone.css"); @import url("tablet.css")
only screen and (min-width: 481px); @import url("desktop.css") only screen and (min-width: 768px);
19.
@media がおすすめ。 複数CSSファイルに分けると、 デバイスごとのスタイルを管理しやすくなるが... 単一のCSSファイルにした方が、 HTTPリクエスト数を節約でき、 スマートフォン3G回線環境にも 優しい。
20.
Media Queries W3C Recommendation
19 June 2012 width min-width: 400px color min-color: 4 height min-width: 400px color-index min-color-index: 1 device-width device-width: 800px monochrome min-monochrome: 1 device-height device-height: 600px resolution min-resolution: 300dpi orientation portrait | landscape scan progressive | interlace aspect-ratio aspect-ratio:2/2 grid grid:0 http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
21.
CSS - float
& display 480px 768px #main #main #sub1 #main #sub1 #sub2 #sub2 #sub2 #sub1 #sub1 #sub1 float: none; float: left; display: none; display: block; display: block;
22.
CSS
レイアウトに使えるプロパティ ボックスを横並べ ボックスの幅を簡単リキッドに display: box-flex: 1; box; ボックスの幅に、余白も含める flexbox; table-cell; box-sizing: border-box; inline-block; ボックスの表示順を自在に box-ordinal-group: 1;
23.
CSS Framework • CSSの枠組み、基礎設計 •
CSSの初期化と、共通スタイルの定義 • ブラウザ依存なスタイルを吸収 • グリッドシステム 毎回イチからCSSを作るのは大変 基礎設計を定義したフレームワークが便利
24.
グリッドシステム 均等なカラムとガター(隙間)から成り立つ レイアウトのガイドライン
25.
グリッドシステム サイト設計がぶれない レイアウトデザイン品質の維持、コンテンツの配置や設計 秩序を与えるもの デザインに整合性を与えるもの グリッドはあくまでガイドライン。 デザインの個性を奪うものではない。
26.
img要素に、width・height属性を 指定すると比率がおかしくなる
img { max-width: 100%; height: auto; }
27.
IE7でイメージが汚く縮小される
imgSizer.js IE7 を使う Chrome Safari http://unstoppablerobotninja.com/entry/ fluid-images/
28.
CSS Sprite での テキスト飛ばしは、こう書くのが 主流(らしい)
.sprite { .sprite { text-indent: -9999px; text-indent: 100%; } white-space: nowrap; overflow: hidden; 実際、9999px分のエリアが } 描画されてしまうので、負荷 が高めになる。 描画させるエリアを最小限に。
Jetzt herunterladen