PhotoshopでレスポンシブWebデザイン!

メディアクエリとはなにか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、レスポンシブWebデザインの実現に欠かすことのできないCSS3の機能「メディアクエリ」について、その意味と使い方について概要を見ていきたいと思います。
講師:
04:15

字幕

このレッスンではレスポンシブ Web デザインの実現に欠かすことのできないCSS3 の機能メディアクェリについてその意味と使い方について概要を見ていきたいと思います。メディアクェリというのはCSS3 に用意されている機能です。閲覧環境や端末の条件に応じて適用するスタイルを切り替えることができるものです。デバイスの種類・大きさ・幅・高さ・向き・解像度などコンテンツをレンダリングするデバイスの特性に応じてスタイルを変更可能です。例えば Web ページをプリントする時に適用させる印刷用のスタイルシート等もメディアクェリの機能の1つです。また、現在策定中の Media Queries Level 4 では端末のおかれている環境光によってスタイルの適用を変更できるようになるかもしれません。これが実現すると明るい日の光の元で閲覧する時と薄暗い部屋の中で閲覧する時では異なるスタイルを適用させるといったことができる可能性があります。では レシポンシブ Web デザインに利用する際にはメディアクェリをどのように利用するのでしょうか。レシポンシブ Web デザインではデバイスのウィンドウの幅に応じて読み込ませる CSS の内容を切り替えていきます。 画面に映したこの CSS のサンプルでご説明していきましょう。まず CSS の一番最初の部分にdiv クラス box に対して背景色を赤と指定しています。その次の行がメディアクェリを利用している部分です。@media screen andmax width 479px と書いてカッコで括っています。このカッコの内側がウィンドウ幅が 479px 以下の時に適用される部分です。ここでは背景色にブルーを指定しています。このように記述することによりデフォルトの状態では背景色が赤ウィンドウの横幅が 479px 以下つまりスマートフォンで閲覧している時にはその指定が上書きされて背景色が青になるという仕組みになっています。では、これを実際に HTML ファイル内に記述したものをブラウザで確認してみましょう。今ブラウザの Chrome で先程の記述をしてあるHTML ファイルを開いてあります。今画面幅がマックスの状態になっています。この時、 div クラス box は背景色が赤の指定になっています。では ウィンドウのサイズをどんどん縮めていきましょう。そうすると、この部分ここでウィンドウの幅が 479px 以下になって背景色が青に切り替わりました。 実際のレシポンシブ Web デザインでは背景色だけではなく、ウィンドウ幅に応じて段組みですとかコンテンツの表示位置などを切り替えて小さな画面サイズでも読みやすくリンクやボタンがタップしやすいデザインを実現していくことになります。以上、このレッスンではレシポンシブ Web デザインの実現に欠かすことのできないCSS3 の機能メディアクェリについて概要をご説明しました。

PhotoshopでレスポンシブWebデザイン!

モバイルデバイスにおいてWebを適切に表示させるための仕組みであるレスポンシブWebデザインは、すべてのWebデザイナーにとってもはや必須の取り組むべきテーマです。また最近ではPhotoshopでも美しいカンプを簡単に作れるようになりました。このコースではレスポンシブWebデザインのカンプをPhotoshopで効率的に作成するテクニックを具体的に説明します。

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

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

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

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