CSSによるレイアウト

モバイル環境への最適化

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
モバイル環境でWebページが表示されたときの表示方法を制御するための方法と、パフォーマンスを向上する方法について学びます。
講師:
09:33

字幕

このレッスンでは モバイル環境で ウェブぺージが表示された時の 表示方法を 制御するための方法と パフォーマンスを向上する方法について 学びます メディアクエリを使うと 画面サイズに基づいて レイアウトを変更できますが スマートフォンなどの モバイルデバイスでは これだけで すべてを制御することはできません 多くのモバイルデバイスでは ウインドウサイズという 概念がないため ウェブぺージが初期状態で どのくらいの領域を使って 表示されるかは まちまちです 画面ではブラウザで サンプルファイルの mobile.htmファイルを表示しています ここでビューポートについて 説明していきます メタタグで指定する ビューポートは 異なるデバイスから アクセスしてきたときに ページの初期表示の方法を 規定することができます ほとんどのスマートフォンは このタグをサポートしています さてこの構文では 2つのポイントがあります ひとつめは content = width = device-width という部分で これは ページが表示される幅を モバイルデバイスの幅に合わせる という指定です このページを スマートフォンで表示すると 960ピクセルの幅で 表示されるはずです このときスマートフォンの内部では ウェブページ全体を 表示するために ズームアウト  スケールの縮小がおこなわれています この仕組みを ビューポートと呼びます モバイルデバイスでは このビューポートと呼ばれる領域を通して ウェブページを 表示しています デスクトップブラウザにおける ウィンドウサイズのようなものと 考えても構いません そのため ビューポートの大きさは デバイスの画面サイズよりも 大きくなったりする場合があります そこでメタタグを使うことで ビューポートの表示方法を 指定することができます ここではビューポートの幅を デバイスの幅と合わせるように 指定しました 続いて2つ目のポイントは イニシャルスケールを 1.0と指定している この部分です これは初期状態でデバイスが ページを100%の大きさで表示し 拡大縮小をしない という設定です このイニシャルスケールを 100%にすると スクリーンサイズを対象に デザインをおこなえば 思い通りの表示になる ということです さて実際に記述するため エディタに切り替えます すでにエディタでは いくつかのファイルを開いています さきほど表示していた mobile.htmに加えて 4つのスタイルシートがあります これらはすべて サンプルファイルに 含まれています HTMLのキャラセットが指定されている メタタグの下に ビューポートための メタタグを追加しましょう ここではmetaタグを使って name = viewport そしてビューポートの値は content=width 幅が  =device-width つまりページの幅を デバイスの幅に合わせる という指定です そしてinitial=scale 初期表示時の 拡大率を 100% 1.0とします それぞれのプロパティは カンマで区切ります ここで使えるプロパティは widthやinitial=scale 以外にも たくさんあります スケーリングを一切に無効にする といったこともできます さて次に紹介するのは cssについてです メディアクエリを使って cssを記述するとき このような書き方をしているケースが しばしばあります まず全体のための スタイルシートを作成し 次にメディアクエリの数だけ 別々に スタイルシートを作ります その後メディアクエリを使って それらをリンクをしています これは最悪なやり方 というわけではありませんが 良いやりかたでもありません この方法では それぞれのスタイルシートを 別々に読み込むため サーバーに対して 複数のhttpリクエストが 送られています モバイルデバイスのように 低速なネットワーク回線を 使うときは httpリクエストの数を なるべく少なくすることが パフォーマンスの改善につながります そのためここでは httpリクエストの数を 減らしてみましょう まずグローバルcss以外の行を 削除し グローバルcssのみを 読み込むようにします このグローバルcss というファイルを 開いてみましょう タブを切り替えて 一番下まで スクロールしてみます ここにコメントを 見つけることができます ここではモバイル タブレット デスクトップ用の メディアクエリが それぞれ記述されています そこでこの部分に 先ほど読み込んでいた 複数のcssに書かれたスタイルを コピー&ペーストして 利用するようにしてみましょう その前に コメントを解除し タイトル部分のみ コメントが残るようにしておきます タブレットスタイルは このように入力します そしてデスクトップ用のスタイルは この中カッコの中に入力します それぞれのタブに切り替えて cssに書かれたスタイルを すべてコピーし 該当のメディアクエリの中に それぞれペーストしていきましょう まずmobile.cssです すべてを選択し コピーして グローバルcssの モバイルのメディアクエリの中に 貼り付けます 同じように タブレット用のスタイルを すべて選択して コピー そしてグローバルcssの タブレットの メディアクエリの中に 貼り付け 最後にデスクトップ用に対しても 同じ作業をおこないます これで それぞれのcssに分かれていた スタイルを メディアクエリの中に ペーストし cssファイルを1ファイルに まとめることができました そして最後に もうひとつのテクニックを ご紹介します ブラウザに切り替えます このページには フォトギャラリーがあり ウィンドウサイズを変更して タブレットの ブレイクポイントに達すると ギャラリーの レイアウトが変化します このように 変化していますね そしてさらに また小さくして モバイル用の ブレイクポイントに達すると 画像が小さくなります これは 単に画像を縮小しているわけではありません エディタに戻りましょう モバイル用の スタイルの部分を 確認してみましょう こちらが先ほどペーストした モバイル用のスタイルです モバイル用のスタイルには実際に サイズの小さい画像を 背景画像として 指定しています そのため モバイル環境で閲覧した時には 小さい画像だけが ダウンロードされます 逆に タブレットや デスクトップでは 背景画像に 大きな画像を 指定しています これにより 回線速度に合わせた画像を それぞれの環境に対して 提供することができます ここまで紹介してきたテクニックで モバイル環境に対する最適化を おこなうことができました ブラウザを開いてみます スタイルシートのための リクエストは 4つからひとつに 減りました 見た目には 何も変わっていないように見えますが サーバーへのリクエスト数は 少なくなったおかげで モバイルデバイスで表示した時の速度は 向上しているはずです 興味のある方は作業前のサンプルファイルと 作業後のサンプルファイルを それぞれウェブサーバーにアップロードし お使いのスマートフォンで 表示をチェックしていただくことを お勧めします またビューポートによって モバイルデバイスにおける ウェブページの初期表示を 制御することができました デスクトップに向けたデザインも 必要ですが このようにモバイル環境に対しての 最適化を考えることも非常に重要です このレッスンではモバイル環境で ウェブページが表示された時の 表示方法を制御するための方法と パフォーマンスを向上する方法について 学びました

CSSによるレイアウト

このコースでは、大きく3種類に分かれたCSSによるレイアウトについて解説します。ピクセルパーフェクトなデザインを実現しやすい固定レイアウト、スクリーンやウィンドウのサイズ変更に対して変化する可変レイアウト、ユーザーの環境に応じて最適なレイアウトを提供できるレスポンシブレイアウトなどについて丁寧に説明します。

2時間40分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。