CSSによるレイアウト

メディアクエリーの使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画面の幅、解像度など、メディアの特性に基づいて、ページに適用されるスタイルを振り分ける、メディアクエリの使い方について学びます。
講師:
09:45

字幕

このレッスンでは画面の幅 解像度など メディアの特性に基づいて ページに適用されるスタイルを 振り分けるメディアクエリの 使い方について学びます CSSを読み込む際スクリーン プリント プロジェクションなどのメディア属性を 設けることによって 読み込まれるCSSを振り分けることができ その延長線上として画面の幅や 解像度によってスタイルをスマートに 振り分けることができます 画面ではブラウザでサンプルファイルの media-queries.htmを開いているところです ここで構文の概要を紹介しましょう 基本的な構文は最初のブロックにあります まずオプションとして2つのキーワードの いずれかを置くことができます notまたはonlyです notは指定したメディアであるかどうかをチェックし 指定したメディアでなければ スタイルを適用します onlyはメディアクエリに対応していない 古いブラウザでスタイルが 適用されないようにします そしてその後適用したいメディア 例えばスクリーン プロジェクション プリントなどの キーワードを入力します さらにその後条件式を書くことができ ここがメディアクエリの重要なポイントになります 少し下を見てください 2つ目のブロックではメディアクエリの サンプルがあります これはスクリーンデバイス かつ720pxの最小幅 つまり 幅が720pxよりも 大きい場合に適用されます メディアクエリを使うとこの条件式を使って スタイルを適用する範囲を決められるわけです その下に条件式に使えるプロパティーを リストアップしています 幅 高さ デバイスの幅 デバイスの高さ 向き アスペクト比 色など様々な条件が使えます これらの条件を使って スタイルを適用するかどうか 分岐できます 幅または高さのように 長さの値においてはミニマムまたは マックスのプレフィックス 接頭辞を つけることができます これにより最小の幅や最大の幅を 条件にすることもできます このhtmlをエディタで開いてメディアクエリを 試してみましょう エディタに切り替えます 少し下にスクロールして htmlに埋め込まれているCSSを使って 先ほど確認したものとは ちょっと異なる構文でメディアクエリを記述します ここではアットメディアルールを使います まずアットマークメディアと書いた後 通常のセレクタと同じように中かっこうを書きます これがCSSの中でメディアクエリを使って 記述する基本的な方法です この中かっこうの中に書いたスタイルは このメディアクエリに適合している場合のみ適用されます アットメディアの後に条件を書いていきましょう ここではオンリースクリーンつまり スクリーンデバイスのみに対して 条件式をmax width最大幅を920px という条件式を記述します これでスクリーンの幅が920pxよりも 小さい場合のみこのスタイルが適用されるようになります さらにこの中にスタイルを書きますが この書き方を見たことのない人は 奇妙に思える書き方かもしれません この中に追加のルールを書いていきましょう まずボディセレクタを用意し 幅を90パーセントに設定します 幅を設定するにはwidthプロパティを使います 中かっこうが入れ子になっているのは 変に見えるかもしれませんが これがアットメディアルールの中にあるということは わかりやすくなっているかと思います このような書き方をするときはそれぞれの 中かっこうを閉じることを 忘れないでください コードを保存しブラウザに戻りましょう リロードをして確認してみます 現在このブラウザウィンドウの幅は920pxよりも 大きいため何も変わっていないように見えます このウィンドウサイズを変更して 縮小していくと ある程度の箇所で変化が起きています 変化が起きている箇所は幅は920pxの箇所で ボディ要素の幅が変わっています これにより小さい画面サイズで見た時に レイアウトがそれに応じて変化するという レスポンスレイアウトが実装できます これがメディアクエリの持つ すばらしい機能1つです またメディアクエリは複数の条件を 持つこともできます エディタに戻り先ほど書いたメディアクエリを 変更してみましょう 条件式にミニマムwidth600pxを追加します ミニマムwidth600pxです これで最小幅を600pxで設定できました 条件式を複数書く時は&で繋ぐことができます つまりここでは画面の幅について範囲を設定しています 画面の幅は600pxから 920pxの間である場合に ボディーは幅が90パーセントになる ということです この条件に適合しない場合は デフォルトのスタイルが適用されます さらにアットメディアルールを追加してみましょう 改行してアットメディアオンリースクリーンアンドマックスウィズス ここでは599pxを追加します さきほど書いたメディアクエリと見比べれば 何をやろうとしているのか明白でしょう つまり複数の画面サイズにあわせた メディアクエリを作っているわけです この中ではボディーセレクタを記述します 幅を320pxに設定しましょう もう1つプレ要素のセレクタも作ります プレ要素は先程ブラウザで見た コードのブロックを表す要素です ここではフォントサイズを 0.8emに設定して少しフォントサイズを 小さくします さらにpaddingも0.5em与えます ついでに背景色の変更しておきましょう 背景色をここではbackgroundプロパティを使って RGB 246 247 160という値を追加します 一旦保存してブラウザに切り替え リロードします 現時点では何も変化がありません ここまで3つの異なる条件を書いてきました ブラウザの幅は920pxよりも大きい時は このデフォルトの状態が表示されます ウィンドウサイズを縮めて920px未満にすると 可変レイアウトに切り替わります さらに縮めて600px未満にすると ボディ要素の幅が変わり コードのブロックの背景色フォントサイズ パディングが変化します このようにメディアクエリを使うことで 様々な条件に応じて スタイルを適用することができます ここで試したものはあくまでサンプルですので 実際のサイト制作で使うようなものではありません 実際にはコンテンツが どのようなデバイス スクリーンで どのような形で提供されるのかを 慎重にプランしてください メディアクエリ自体は強力な機能ですが 適切なプランに基づかないでコードを記述すると メディアクエリ内で競合がおきたり 意図しないスタイルが適用されたりしてしまいます このレッスンでは画面の幅 解像度など メディアの特性に基づいて ページに適用されるスタイルを振り分ける メディアクエリの使い方について学びました

CSSによるレイアウト

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

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

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

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

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