スライド 1

Size: px

Start display at page:

Download "スライド 1"

あかりつくとの
7 years ago
Views:

2 ( おやまだあきひろ ) 小山田晃浩 ( 株 ) ピクセルグリッドフロントエンドエンジニア (HTML, CSS, JavaScript, SVG) twitter@yomotsu

3 HTML5 と CSS3 と Dreameraer ネタ連載してます

4 このセッションの流れ 1. 事例について 2. メディアクエリーを利用した振り分け 3. 振り分け後のスタイル適用 4. 注意点 5. その他の対応例 6. まとめ

6 valveat81 セレクトショップのWebサイト店舗内にiPadを置いて見せたい iphone ipadで変形

7 デスクトップ

8 ipad 横

9 ipad 縦

10 iphone/ipod touch 縦

11 iphone/ipod touch 横

12 対応したデバイス 1. デスクトップ (IE6 含む ) 2. ipad 縦 3. ipad 横 4. iphone/ipod touch 縦 5. iphone/ipod touch 横

13 変形に対応するデザイン

16 320px のグリッドルール 960px = 3 カラム ( デスクトップ ) 640px = 2 カラム ( タブレット ) 320px = 1 カラム ( スマートフォン )

17 320px のグリッドルール 960px = 3 カラム ( デスクトップ ) 640px = 2 カラム ( タブレット ) 320px = 1 カラム ( スマートフォン )

18 320px のグリッドルール 960px = 3 カラム ( デスクトップ ) 640px = 2 カラム ( タブレット ) 320px = 1 カラム ( スマートフォン )

23 レイアウトは変形を前提

24 変形させるために CSS を振り分ける

25 振り分けにはメディアクエリーを利用

27 メディアクエリーのおさらい

28 メディアクエリーのおさらいデバイスに応じて CSS を振り分ける仕組み

29 メディアタイプ 1. <link rel="stylesheet" href="print.css" media="print">

30 メディアクエリーの書式 (media 属性 ) 1. <link rel="stylesheet" href="small.css" media="(max-width: 480px)">

31 メディアクエリーの書式 ( 読み込み ) url("iphone.css") (max-width:480px);

32 メディアクエリーの書式 ( インライン ) 1. (max-width: 480px){ 2..sample{width:400px} 3. }

33 メディアクエリーの書式 ( インライン ) 1. (max-width: 480px){ 2..sample{width:400px} 3. }

34 Demo

36 適合すると有効になる 1. body{ 2. background:pink; 3. } 4. screen and (max-width: 320px){ 6. body{ 7. background:orange; 8. } 9. }

37 CSS3 Media Queries

38 CSS3 Media Queries 一例幅下限幅上限幅高さ角度縦横比色数解像度 device-width min-device-width max-device-width device-height orientation aspect-ratio color Resolution

40 クエリーの組み合わせ例

41 ipad 縦 screen (min-device-width: 481px) (max-device-width: 768px) (orientation:portrait) スクリーン 481px~768px 縦だったら

43 ipad 縦 screen and (min-width: 481px) and (max-device-width: 768px) and (orientation:portrait){ 2. body{ 3. background:orange; 4. } 5. }

44 実際のソース Demo ( ファイル分けは失敗...) asset/styles/import.css

45 問題点 IE(6~8) はメディアクエリーに対応していないデバイスの数だけ CSS を用意するのは大変

46 デスクトップ用 CSS はカスケード ( 継承 ) して再利用する

47 デスクトップでの表示デスクトップ用 CSS を読み込むメディアクエリーは使わないつまりこれまで通り

49 iphone での表示デスクトップ用 CSS を読み込む iphone 用 CSS も読み込む

51 つまり CSS だけでも振り分けることが可能クエリーは組み合わせて使うデスクトップはベースにする

53 カスケードを活かしてスタイルを適用する

54 デスクトップ従来と同じ方法で CSS を書く

55 その他のデバイスデスクトップ用 CSS をそのまま再利用各デバイス専用に差分スタイルを上書き

56 例 1 3 カラム /1 カラムの変形の例

58 HTML 1. <div class="container"> 2. <div class="item"> カラム </div> 3. <div class="item"> カラム </div> 4. <div class="item"> カラム </div> 5. </div>

59 デスクトップの 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. }

60 小さい画面用に別の CSS を書く?

61 小さい画面用の CSS デスクトップ用 CSS をカスケードしていれば (max-width: 320px){ 2. div.container {width:320px;} 3. div.item {float:none;} 4. }

62 つまりカスケードすれば... デスクトップ用 CSS のコード量はこれまでとほぼ同じ各デバイス用 CSS のコード量は少ない

63 例 2 複雑なレイアウトを再利用

65 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>

66 デスクトップの 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. }

67 小さい画面用にも同じ量の CSS を書く?

68 小さい画面用の CSS デスクトップ用 CSS をカスケードしていれば (max-width: 320px){ 2. div.sample { zoom: 0.5; } 3. }

69 小さい画面用の CSS (max-width: 320px){ 2. div.sample { zoom: 0.5; } 3. }

70 zoom?

71 zoom?

72 IE を真似た Webkit の独自拡張要素を拡大 / 縮小する iphone ipad Android などで使える複数の画面サイズ対応に最適!

74 つまり振り分けていれば... デスクトップ用 CSS はこれまで通り振り分けた後は CSS3 や CSS 独自拡張も OK

76 情報が多すぎるのは NG スマートフォンでの表示量を視野に入れて考える ios Safari が落ちる情報が多い場合には別の対応策で ( 後述 )

77 デザイン時から変形を想定しなくてはならない組み換え可能なレイアウトをレイアウト以外の装飾で魅せるデザイナーは HTML を書く人と連携を

78 スマートに見えるがファイル数が増えるデバイスの分だけ CSS や画像が必要画像やコードはできるだけ再利用ファイルを分けすぎずいっしょに管理

79 スマートに見えるがファイル数が増えるデバイスの分だけ CSS や画像が必要画像やコードはできるだけ再利用ファイルを分けすぎずいっしょに管理先程の事例では失敗した

81 サッポロビールでの iphone 対応ビジネスアーキテクツさんへの協力既に存在したWebサイト後付けで小さい画面 (iphoneなど) への対応 HTMLはそのまま利用する

82 デスクトップ

83 iphone

84 メディアクエリーだけでは丌可能だった情報量が違い過ぎた CSS だけでレイアウトを組み直せない

85 JavaScript で元の HTML から別の HTML へ再構成

90 特徴 jquery templates を利用自由に新しい HTML を組めるので元のソースを完全無視できる CMS は丌要

91 でもパフォーマンスはよくないあくまでも特殊なケースへの対策 JavaScript の高い技術レベルが必要

93 まとめデザイン段階からの準備が必要メディアクエリーで振り分けが可能デスクトップ用 CSSは再利用 iphoneやandroidはcss3をフル活用 CSS だけでもマルチデバイス対応は可能 (CMS は丌要 )

94 まとめ入門にはメディアクエリーから! 振り分け拡大縮小アニメーションなどマルチデバイス対応は新しい技術が使える!

95 ご清聴ありがとうございました小山田晃浩

SaCSS 49 LT

SaCSS 49 LT レスポンシブサイトの作り方ワンソースで構築するWebサイトの基本的な作り方 2014/6/9 Ver.1.1 Hirotaka Ichimura レスポンシブ Web デザインとは今まで一般的だったWebサイト制作の方法は PC 用携帯専用と分けられ別々にサイトを構築し閲覧したユーザーの端末によりプログラムで振り分けることで表示するサイトを変更して対応してきましたそのため単純計算で最低でも2