おやまだ 小山田 晃浩 - css nite公式サイトcssnite.jp/lp/lp13/lp13_oyamada.pdf(html,...
TRANSCRIPT
![Page 1: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/1.jpg)
![Page 2: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/2.jpg)
(おやまだ あきひろ)
小山田 晃浩
(株)ピクセルグリッド
フロントエンドエンジニア (HTML, CSS, JavaScript, SVG)
twitter@yomotsu
![Page 4: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/4.jpg)
このセッションの流れ
1. 事例について
2. メディアクエリーを利用した振り分け
3. 振り分け後のスタイル適用
4. 注意点
5. その他の対応例
6. まとめ
![Page 5: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/5.jpg)
![Page 6: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/6.jpg)
valveat81
http://valveat81.com/
セレクトショップのWebサイト
店舗内にiPadを置いて見せたい
iPhone、iPadで変形
![Page 7: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/7.jpg)
デスクトップ
![Page 8: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/8.jpg)
iPad 横
![Page 9: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/9.jpg)
iPad 縦
![Page 10: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/10.jpg)
iPhone/iPod touch 縦
![Page 11: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/11.jpg)
iPhone/iPod touch 横
![Page 12: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/12.jpg)
対応したデバイス
1. デスクトップ (IE6含む)
2. iPad 縦
3. iPad 横
4. iPhone/iPod touch 縦
5. iPhone/iPod touch 横
![Page 13: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/13.jpg)
変形に対応するデザイン
![Page 14: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/14.jpg)
![Page 15: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/15.jpg)
![Page 16: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/16.jpg)
320pxのグリッドルール
960px = 3カラム (デスクトップ)
640px = 2カラム (タブレット)
320px = 1カラム (スマートフォン)
![Page 17: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/17.jpg)
320pxのグリッドルール
960px = 3カラム (デスクトップ)
640px = 2カラム (タブレット)
320px = 1カラム (スマートフォン)
![Page 18: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/18.jpg)
320pxのグリッドルール
960px = 3カラム (デスクトップ)
640px = 2カラム (タブレット)
320px = 1カラム (スマートフォン)
![Page 19: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/19.jpg)
![Page 20: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/20.jpg)
![Page 21: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/21.jpg)
![Page 22: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/22.jpg)
![Page 23: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/23.jpg)
レイアウトは変形を前提
![Page 24: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/24.jpg)
変形させるために CSSを振り分ける
![Page 25: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/25.jpg)
振り分けには メディアクエリーを利用
![Page 26: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/26.jpg)
![Page 27: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/27.jpg)
メディアクエリーのおさらい
![Page 28: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/28.jpg)
メディアクエリーのおさらい
デバイスに応じて CSSを振り分ける仕組み
![Page 29: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/29.jpg)
メディアタイプ
1. <link rel="stylesheet" href="print.css" media="print">
![Page 30: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/30.jpg)
メディアクエリーの書式 (media属性)
1. <link rel="stylesheet" href="small.css" media="(max-width: 480px)">
![Page 31: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/31.jpg)
メディアクエリーの書式 (読み込み)
1. @import url("iphone.css") (max-width:480px);
![Page 32: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/32.jpg)
メディアクエリーの書式 (インライン)
1. (max-width: 480px){ 2. .sample{width:400px} 3. }
![Page 33: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/33.jpg)
メディアクエリーの書式 (インライン)
1. (max-width: 480px){ 2. .sample{width:400px} 3. }
![Page 34: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/34.jpg)
Demo http://dl.dropbox.com/u/1236764/temp/cssnite_lp_13/demo0.html
![Page 35: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/35.jpg)
![Page 36: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/36.jpg)
適合すると有効になる
1. body{ 2. background:pink; 3. } 4. 5. @media screen and (max-width: 320px){ 6. body{ 7. background:orange; 8. } 9. }
![Page 37: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/37.jpg)
CSS3 Media Queries
http://www.w3.org/TR/css3-mediaqueries/
![Page 38: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/38.jpg)
幅 device-width
下限幅 min-device-width
上限幅 max-device-width
高さ device-height
角度 orientation
縦横比 aspect-ratio
色数 color
解像度 Resolution
CSS3 Media Queries 一例
![Page 39: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/39.jpg)
![Page 40: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/40.jpg)
クエリーの組み合わせ例
![Page 41: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/41.jpg)
iPad 縦
screen
(min-device-width: 481px)
(max-device-width: 768px)
(orientation:portrait)
「スクリーン、481px~768px、縦」だったら
![Page 42: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/42.jpg)
![Page 43: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/43.jpg)
iPad 縦
1. @media screen and (min-width: 481px) and (max-device-width: 768px) and (orientation:portrait){
2. body{ 3. background:orange; 4. } 5. }
![Page 44: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/44.jpg)
実際のソース
Demo (ファイル分けは失敗...)
http://www.valveat81.com/ asset/styles/import.css
![Page 45: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/45.jpg)
問題点
IE(6~8)はメディアクエリーに 対応していない
デバイスの数だけCSSを用意するのは大変
![Page 46: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/46.jpg)
デスクトップ用CSSは カスケード(継承)して再利用する
![Page 47: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/47.jpg)
デスクトップでの表示
デスクトップ用CSSを読み込む
メディアクエリーは使わない
つまり、これまで通り
![Page 48: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/48.jpg)
![Page 49: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/49.jpg)
iPhoneでの表示
デスクトップ用CSSを読み込む
iPhone用CSSも読み込む
![Page 50: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/50.jpg)
![Page 51: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/51.jpg)
つまり…
CSSだけでも振り分けることが可能
クエリーは組み合わせて使う
デスクトップはベースにする
![Page 52: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/52.jpg)
![Page 53: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/53.jpg)
カスケードを活かして スタイルを適用する
![Page 54: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/54.jpg)
デスクトップ
従来と同じ方法でCSSを書く
![Page 55: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/55.jpg)
その他のデバイス
デスクトップ用CSSをそのまま再利用
各デバイス専用に差分スタイルを上書き
![Page 56: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/56.jpg)
例1 3カラム/1カラムの変形の例
http://dl.dropbox.com/u/1236764/temp/cssnite_lp_13/demo1.html
![Page 57: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/57.jpg)
![Page 58: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/58.jpg)
HTML
1. <div class="container"> 2. <div class="item">カラム</div> 3. <div class="item">カラム</div> 4. <div class="item">カラム</div> 5. </div>
![Page 59: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/59.jpg)
デスクトップのCSS
1. div.container{ 2. width:960px; 3. } 4. div.item{ 5. color:#fff; 6. width:300px; 7. margin:0 10px 10px; 8. float:left; 9. background:#333; 10.}
![Page 60: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/60.jpg)
小さい画面用に 別のCSSを書く?
![Page 61: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/61.jpg)
小さい画面用のCSS
1. @media (max-width: 320px){ 2. div.container {width:320px;} 3. div.item {float:none;} 4. }
デスクトップ用CSSをカスケードしていれば…
![Page 62: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/62.jpg)
つまりカスケードすれば...
デスクトップ用CSSのコード量は これまでとほぼ同じ
各デバイス用CSSのコード量は少ない
![Page 63: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/63.jpg)
例2 複雑なレイアウトを再利用
http://dl.dropbox.com/u/1236764/temp/cssnite_lp_13/demo3.html
![Page 64: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/64.jpg)
![Page 65: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/65.jpg)
HTML
1. <div class="sample"> 2. <ul> 3. <li><img src="naka.jpg" alt=""></li> 4. <li><img src="zudo.png" alt=""></li> 5. <li><img src="hoka.jpg" alt=""></li> 6. </ul> 7. </div>
![Page 66: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/66.jpg)
デスクトップのCSS
1. div.sample{ 2. width:456px; 3. background:#CCC; 4. } 5. div.sample ul{ 6. margin:0; 7. padding:10px 0; 8. list-style:none; 9. } 10. div.sample ul:after{ 11. content:''; display:block; clear:both; height:0; 12. } 13. div.sample ul li{ 14. float:left; 15. margin:0; 16. padding:0 10px; 17. }
![Page 67: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/67.jpg)
小さい画面用にも 同じ量のCSSを書く?
![Page 68: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/68.jpg)
小さい画面用のCSS
1. @media (max-width: 320px){ 2. div.sample { zoom: 0.5; } 3. }
デスクトップ用CSSをカスケードしていれば…
![Page 69: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/69.jpg)
小さい画面用のCSS
1. @media (max-width: 320px){ 2. div.sample { zoom: 0.5; } 3. }
![Page 70: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/70.jpg)
zoom?
![Page 71: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/71.jpg)
zoom?
![Page 72: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/72.jpg)
IEを真似たWebkitの独自拡張
• 要素を拡大/縮小する
• iPhone、iPad、Androidなどで使える
• 複数の画面サイズ対応に最適!
![Page 73: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/73.jpg)
![Page 74: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/74.jpg)
つまり振り分けていれば...
デスクトップ用CSSはこれまで通り
振り分けた後はCSS3やCSS独自拡張もOK
![Page 75: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/75.jpg)
![Page 76: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/76.jpg)
情報が多すぎるのはNG
スマートフォンでの 表示量を視野に入れて考える
iOS Safariが落ちる
情報が多い場合には別の対応策で(後述)
![Page 77: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/77.jpg)
デザイン時から 変形を想定しなくてはならない
組み換え可能なレイアウトを
レイアウト以外の装飾で魅せる
デザイナーはHTMLを書く人と連携を
![Page 78: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/78.jpg)
スマートに見えるが ファイル数が増える
デバイスの分だけCSSや画像が必要
画像やコードはできるだけ再利用
ファイルを分けすぎず、いっしょに管理
![Page 79: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/79.jpg)
スマートに見えるが ファイル数が増える
デバイスの分だけCSSや画像が必要
画像やコードはできるだけ再利用
ファイルを分けすぎず、いっしょに管理
“先程の事例”では失敗した
![Page 80: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/80.jpg)
![Page 81: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/81.jpg)
サッポロビールでのiPhone対応
http://www.sapporobeer.jp/
ビジネス・アーキテクツさんへの協力
既に存在したWebサイト
後付けで小さい画面(iPhoneなど)への対応
HTMLはそのまま利用する
![Page 82: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/82.jpg)
デスクトップ
![Page 83: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/83.jpg)
iPhone
![Page 84: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/84.jpg)
メディアクエリーだけでは 丌可能だった
情報量が違い過ぎた
CSSだけでレイアウトを組み直せない
![Page 85: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/85.jpg)
JavaScriptで 元のHTMLから、 別のHTMLへ再構成
![Page 86: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/86.jpg)
![Page 87: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/87.jpg)
![Page 88: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/88.jpg)
![Page 89: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/89.jpg)
![Page 90: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/90.jpg)
特徴
jQuery templatesを利用
自由に新しいHTMLを組めるので 元のソースを完全無視できる
CMSは丌要
![Page 91: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/91.jpg)
でも…
パフォーマンスはよくない
あくまでも、特殊なケースへの対策
JavaScriptの高い技術レベルが必要
![Page 92: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/92.jpg)
![Page 93: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/93.jpg)
まとめ
デザイン段階からの準備が必要
メディアクエリーで振り分けが可能
デスクトップ用CSSは再利用
iPhoneやAndroidはCSS3をフル活用
CSSだけでもマルチデバイス対応は可能 (CMSは丌要)
![Page 94: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/94.jpg)
まとめ
入門にはメディアクエリーから!
振り分け、拡大縮小、アニメーションなど マルチデバイス対応は新しい技術が使える!
![Page 95: おやまだ 小山田 晃浩 - CSS Nite公式サイトcssnite.jp/lp/lp13/LP13_oyamada.pdf(HTML, CSS, JavaScript, SVG) twitter@yomotsu . HTML5とCSS3とDreameraerネタ ... 画像やコードはできるだけ再利用](https://reader034.vdocuments.us/reader034/viewer/2022050309/5f717004ab9675719d299a06/html5/thumbnails/95.jpg)
ご清聴ありがとうございました
小山田 晃浩 Twitter:@yomotsu