CSSによるレイアウト

スタイルを管理する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メディアクエリーを使って効率的にスタイルを記述し、スタイルの競合を防ぐ方法について学びます。
講師:
11:18

字幕

このレッスンでは メディアクエリーを使って 効率的にスタイルを記述し スタイルの競合を防ぐ方法について 学びます 画面サイズや向きなどの 要因に基づいて レイアウトを変更する メディアクエリーは とても便利な機能です しかし スタイルを適用するために 条件を分岐していく という性質を持つため 適切な計画に基づいて コーディングしていかないと コードが複雑になってしまう可能性があります 画面ではエディタで oranizing.htm というサンプルファイルを開いています 少し下にスクロールして スタイルを確認すると 途中で styles that change というコメントを発見できます メディアクエリーを記述する上で 最も重要なのは 全体に適用されるスタイルと それを変更するスタイルを 明確に識別することです 全体に適用されるスタイルは 少し上に定義されています これらはメディアクエリーの 有無にかかわらず 常に適用されるスタイルです そしてこれらのスタイルを把握しておくことで メディアクエリーを記述する時に 混乱しないようにしておきましょう これにより スタイルの競合を 防ぐことができます 最初の style タグの直後に global styles というコメントを入れておきます global styles コメントを入力しました さて先ほどの メディアクエリーによって 変更するためのスタイルに戻ります ここでやろうとしていることは 2 つあります 1 つはセレクタを分割することです ここでは body タグがあり メディアクエリーによってその中の幅の値を 変化させる予定です ページ全体のスタイルで定義されている 他のプロパティについては 変化させません つまり変化させるプロパティだけを 抜き出して セレクタを分割するわけです この方法でスタイルを整理すると スタイルに変更が発生した場合に すべてのセレクタをチェックする必要がある という欠点があります そのためセレクタを分割したこと自体を 覚えておく必要があります 二つ目に行うことは 整形を行うためのセレクタの 扱い方についてです このようなセレクタでは すべてのメディアクエリーごとに 同じプロパティに対して 違う値を適用する必要があり 同じようなコードが並ぶことになります そのためコードが長くなりがちではありますが 適用したいスタイルは メディアクエリーごとに分かれているため 整理されて見えるはずです ここで注意したいのは border-bottom プロパティです このレッスンではこのプロパティの値を あらゆるメディアクエリーで 変更したいので ページ全体に対して設定するのではなく このすべてのメディアクエリー それぞれのプロパティで設定します このような扱い方には 先に説明したように メリット デメリットが 存在しますが それを把握した上で実行すれば 効率的にスタイルを記述できるでしょう それでは 3 つのメディアクエリーを 記述していきます 3 つの内訳ですが 1 つはモバイル用のスタイル 1 つはタブレット用のスタイル 1 つはデスクトップ用のスタイル という形にします そのため まずコメントで mobile styles と入力しましょう mobile styles そしてこの下に メディアクエリーを書いていきます まず @media その後にスペースをあけて only screen and 条件式は max-width 480 px と書きます 480 px にする理由は iPhone のランドスケープモード 横向きの解像度にあたる数値だからです また iPhone の横幅である 320 px よりも 大きい値になりますので 実際には多くの新しい世代のスマートフォンも ターゲットにすることができます 今 記述したメディアクエリーとコメントを コピーして 残り 2 つのメディアクエリーも 作成します コードをコピーし 2 つ貼り付けます 二つ目はタブレット用のスタイル 三つ目はデスクトップ用のスタイルですので それぞれコメントを変更しておきましょう メディアクエリーの条件式についても 変更が必要です タブレットの条件式は max-width を min-width に変更して 数値を 1 px 増やして 481 px に設定します つまり幅が 481px 以上の画面サイズが ターゲットになります もう一つ条件式を追加して 適用するスクリーンの幅に 範囲を設定しましょう ここでは and max-width を使って 768 px と追加します これは iPad を想定した大きさです さてここで一口にタブレットとして 条件式を記述しましたが スマートフォンやタブレットのサイズは 非常に多岐にわたるため ここで指定しているのは 一つの例とお考えください 実際にメディアクエリーを使って レスポンシブ デザインを設計する時には どのようなデバイスを ターゲットにするのかを決めて その仕様を精査し それに合わせて メディアクエリーを記述する必要があります そして最後にデスクトップの条件式も 変更しましょう max-width を min-width に変更し 数値を 769 px つまりタブレットよりも 1 px 大きい 769 px 以上であれば デスクトップ用のスタイルが適用されます さてメディアクエリーを使って 変更したいスタイルが すでに記述してありましたので これをカットします さらにコメントは不要になりますので 削除しておきましょう カットしたスタイルを それぞれの メディアクエリーの内側に貼り付けます この時 メディアクエリーの中括弧の 内側に貼り付けるように注意してください 外側に貼り付けても メディアクエリーは適用されません さて モバイル用のスタイルでは body の幅を 700 px から 320 px に 変更します また同じように pre 要素の font-size を 1.2 em から 0.8 em に さらに padding を 0.5 em に 背景色を RGB 246 247 160 に変更します 併せてフォントを太字にするために font-weight プロパティも 追加しておきましょう 値は bold を指定します 続いてタブレット用のスタイルです 先ほどと同じように カットしてあるスタイルを貼り付けます ここでは body セレクタの幅を 80% に変更します ここでは 可変レイアウトになるということですね また font-size を 1 em に padding を 0.5 em に 最後に背景色を 先ほどとは異なる 240 , 213 , 154 に設定します 最後にデスクトップ用のスタイルです カットしてあるスタイルを貼り付けます これらの値は変更しません 元々 デスクトップ用のスタイルとして 記述されていましたので ここで変更を加える必要はありません ブラウザで確認する前に 整理された CSS の構造について お話ししたいと思います まず始めに どのような状態でも ページ全体に適用される グローバルなスタイルを定義します これらの値はメディアクエリーによって 変更されないものを記述します その後 @media ルールによって 3 つのメディアクエリーを記述し それぞれの中で変更したいスタイルを 適用しています 始めにモバイル用のスタイル 次にタブレット用のスタイル 最後にデスクトップ用のスタイルです それではこれを保存し ブラウザで開いてみましょう ウィンドウのサイズを変更すると その内容の変化に気付くはずです ウィンドウサイズを変更すると コードのブロックの部分の背景色が 変化しています 一番大きい時は デスクトップ用のスタイル 真ん中では タブレット用のスタイル 一番小さくすると モバイル用のスタイルです ここまで body 要素と pre 要素に対して メディアクエリーを使って スタイルを適用してきました 実際のウェブサイト制作では あらかじめどのようにスタイリングするのかを 計画することが 非常に重要になります またメディアクエリーの値についても 気を付ける必要があります メディアクエリーを用いると CSS が複雑になりがちですので 一定のルールを設けて記述する などの工夫が必要です このレッスンでは メディアクエリーを使って 効率的にスタイルを記述し スタイルの競合を防ぐ方法について 学びました

CSSによるレイアウト

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

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

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

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

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