SaCSS 49 LT

Size: px

Start display at page:

Download "SaCSS 49 LT"

つねたけいなくら
4 years ago
Views:

1 レスポンシブサイトの作り方ワンソースで構築するWebサイトの基本的な作り方 2014/6/9 Ver.1.1 Hirotaka Ichimura

2 レスポンシブ Web デザインとは今まで一般的だったWebサイト制作の方法は PC 用携帯専用と分けられ別々にサイトを構築し閲覧したユーザーの端末によりプログラムで振り分けることで表示するサイトを変更して対応してきましたそのため単純計算で最低でも2 倍の工数がかかる計算となりクライアントと開発側とも負荷が大きく制作運営管理が大変でしたその後スマートフォンやタブレットが普及し HTMLやCSSの新しい規格の開発が進むことで現在では一つのWebサイトをCSSの命令でPCやタブレットスマートフォンなど各端末に振り分けて表示するレスポンシブWebデザインを踏襲したWebサイトの制作へと移行しつつあります

3 レスポンシブ Web デザインの特徴レスポンシブWebデザインの特徴は基本となるHTMLファイルが1コンテンツ1ページで作られていることですこのファイルに PC 用タブレット用スマートフォン用などその使用用途に合わせたCSSを適用することでレスポンシブWebデザインのサイトを構築しています PC タブレットスマホを 1HTML 1CSS で表現可能

4 ビューポイント制作している Web サイトをスマートフォンやタブレットで表示する場合のサイトの見え方を決める指定のことをビューポイントと呼びます記述は HTML の head タグの中に meta 要素として記述していきます <meta name="viewport" content="width=device-width"> デバイスの幅で指定そのほかの指定は今のところない方が良い

5 メディアクエリレスポンシブWebデザインを適用させるためにはCSSのメディアクエリという命令を使います条件に該当した場合括弧の中に記述されている複数のCSSが適用されます screen and (max-width: 600px) { CSS の記述 } CSS の命令でどの媒体に対して CSS を適用するか指定したサイズ ( 今回は 600px) より小さい場合 CSS を適用パソコンのスクリーンに対して

6 メディアクエリメディアクエリに記述する条件にはいくつかの種類があります max-width: XXXpx min-width: XXXpx orientation:portrait > このサイズより小さい場合 > このサイズより大きい場合 > スマホの向きが縦の場合 orientation:landscape > スマホの向きが横の場合 max-width と min-width を 2 つ書いてその中間を指定できる -webkit-min-device-pixel-ratio:2 > デバイスピクセル比が 2 の場合デバイスピクセル比とは Retina ディスプレイ対応の高解像度用スマホに合わせた条件

7 ブレイクポイント CSSのメディアクエリの表示を切り替える条件のことをブレイクポイントと呼びます例えば PCとスマートフォン縦のみだけ閲覧できれば良いWebサイトがある場合ブレイクポイントは1つになりますところがタブレットやスマートフォンには縦横の向きがありまた機種によってサイズが違う Retinaディスプレイの高解像度などもありますメディアクエリは必要であれば非常に細かく線引きすることが可能なためあらかじめどの程度まで線引きブレイクポイントを作るのかクライアントと打ち合わせしておくことが重要です

8 コンテンツ表示の優先度レスポンシブ Web デザインでは新着情報など PC では必要だがスマートフォンではあまり必要でないコンテンツなどが存在しますこの場合端末に応じてコンテンツ自体を非表示にしコンテンツの優先度を決める必要があります display:none; を使いコンテンツの表示非表示を行う

9 画像の表示方法スマホなど端末によって画像サイズを変えなければいけない場合細かく調整すると作業負荷が大きくなりますそのため画像を可変サイズに変更しあるブレイクポイントになったら画像は自動調整されるよう CSS で設定します img { max-width: 100%; height: auto; }

10 背景画像の表示方法背景画像も同様に可変するよう設定しますこれにベンダープレフィックスをつけます background-size:cover; background-size:contain; 背景画像の縦横比を保持したまま表示画像ははみ出る背景画像の縦横比を保持したまま背景画像の全体を表示 background-size:100% 100%; background-size:100% auto; background-size:auto 100%; 背景画像の縦横比を保持しないで表示画像のどちらかを基準に残りを自動設定

11 Retina ディスプレイ対応 Retinaディスプレイに対応したPC タブレットスマホは基本画像だと画像があれて表示されますそのためRetinaディスプレイ用に画像を切り替えるプログラムを導入して対応しますからDLして設置 <script type="text/javascript" src="js/retina.js"></script> retina_image.jpg 通常と高解像度用の画像を2 枚用意し IMGタグに通常画像を設置すると画像を自動で入れ替える

12 デザイン上で高解像度画像を作るには通常用の画像と Retina 向けの高解像度用画像倍角の画像を作るにはPhotoshopで作った通常用画像のレイヤーに指定の条件で命名しアセット機能から書き出すことで作成することが可能ですまた IllustratorやFireworks Macのアプリ ( 有償 ) として似た様な画像書き出し機能があります

13 画像の軽量化スマートフォンなど回線が細い端末で PC 用の画像を使うと容量が大きいため表示が遅くなりますそれを回避するために基本画像の見た目を損なわない程度の軽量化作業が必要ですこのほかにもWebサービス追加機能ツールアプリなど様々なものが出ています使用するものにより画像劣化や軽量化に違いがあります

14 SVG 画像 SVG (Scalable Vector Graphics) はベクターと呼ばれる方式で作られた画像ファイルのことで拡大縮小しても画像が劣化せずに変化します容量が軽い傾向が多いことからスマホ向けの画像として使われることが多いものとなっています Illustratorで作成し書き出す方式が基本となっています

15 Web フォントの使用フォントも画像ではなく Web 専用のフォントを使うことで容量を軽くすることができます

16 Web アイコンの使用 Web アイコンは Web フォントの中身をアイコンとして表現しているものを使い容量を軽くします

17 読み込み速度の確認制作した Web サイトの読み込み速度を確認する Google のサービスがあります下記 URL より該当するサイトの URL を入力することで読み込み速度のチェックをし結果を表示します

18 レスポンシブ Web デザインの注意点レスポンシブ Web デザインの Web サイトは最近のモダンブラウザなら表示に問題ありませんが IE8 が HTML5 と CSS3 の基本命令に対応していないため基本では対応できませんそのため下記プログラムを介して擬似的に IE8 に対応させます css3-mediaqueries.js Respond.js

19 css3-mediaqueries.js html5.js や IE9.js と併用できる人気のあるプログラムです  media type screen and (max-width:768px){} IE7 IE8 はローカル環境で動作しない

20 Respond.js 動作が高速で安定度も高い IE6~8 でメディアクエリに対応させることができますから DL <script src="respond.min.js"></script> style 要素には非対応 HTML への style を使った CSS 読み込みは不可

21 \(^o^)/

スライド 1

スライド 1 ( おやまだあきひろ ) 小山田晃浩 ( 株 ) ピクセルグリッドフロントエンドエンジニア (HTML, CSS, JavaScript, SVG) twitter@yomotsu HTML5 と CSS3 と Dreameraer ネタ連載してます http://goo.gl/8cpxb このセッションの流れ 1. 事例について 2. メディアクエリーを利用した振り分け 3. 振り分け後のスタイル適用