Dreamweaver CCで作るレスポンシブWebデザイン

レスポンシブWebデザインとMedia Queries

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブWebデザインでは、CSS3の機能であるMedia Queriesというものを駆使して、HTMLを様々な解像度に合わせて、デザインを最適化していきます。このレッスンでは、そのMedia Queriesの使い方について、解説致します。
講師:
07:20

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたりレスポンシブ Web デザインの実現に不可欠なメディアクエリについて解説いたします。まずはダウンロードしてきたファイルの「 mediaqueries 」というフォルダーの中にあるこの「 index.html 」こちらを Dreamweaver で開いてください。そしてこれがこのファイルをDreamweaver で開いた状態です。このファイルは Dreamweaver で「可変グリッドレイアウト」の形で新規ドキュメントを作成した状態のものとなっています。このファイルを利用しながら今回のメディアクエリについて解説を進めていきたいと思います。それではレッスンを始めていきましょう。メディアクエリとはCSS3 の機能となります。レスポンシブ Web デザインではそのサイトの閲覧者がどういった解像度画面の大きさですねを持つ端末で見ているかでレイアウトを最適な形で出し分けていくサイト制作の手法ですが、このメディアクエリ、こちらを使うとそのサイトの閲覧者が利用している解像度を判別してそれに対応したスタイルシートのみを提供するといったことが可能になります。 こうすることでその様々な解像度に対してレイアウトを個別に調整することができて適切な形でサイトを表示させることが可能になるわけです。それではこのメデイアクエリ早速このファイルに実装していきましょう。と言いたいところなんですが実はすでに Dreamweaver がそれを作ってくれています。どこにあるかと言いますとこの「 style.css 」この中にですね、少し開いてみてみましょう。そうすると.css ファイルの中身が表示されましたね。少し下の方に行くとこのようにこの赤文字で「 media only screen and...」と書かれているこちらの赤文字の' { ' から ' } ' までの間に含まれているこの CSS スタイルシートこの部分が特定の解像度を持つ端末に対してのみ適応されるスタイルシートとなっています。さてそれではどういった解像度を持つ端末に適応されるのかそれはこちらを見ていただければ分かります。この「 minwidth:481px 」、この部分がその端末の解像度を指定しています。これはどういう意味かといいますと481px 以上であればこちらのメディアクエリの中に書かれているスタイルシートを表示しろという意味になります。 逆に言うと 481 を満たさないような更に小さい端末であればこちらは適応されないという形になります。さてもう1つのメディアクエリこちらの方はどうでしょう。こちらの方はといいますと同じく「 769px 」と書かれていますね。これも同様に 769px 以上の端末に関してはこちらのメディアクエリの中のスタイルシートを適応する といった形になっています。となりますとこちらのファイルにおいてはこちらの 769 以上がこれ更にそれより下の 481px 以上がこれそしてそれより更に下というのがこちらの部分ですね、上に書かれているメデイアクエリに含まれていないスタイルシートの部分という形になっています。もっと噛み砕いて言いますと、こちらのメディアクエリに含まれていない部分こちらのスタイルシートは主にスマートフォン向けのスタイルシート且つどの解像度に対しても共通で適応させるスタイルシートとなっています。そしてこちらの「 midwidth:481px 」こちらのスタイルシートに関してはタブレット端末ですね。「 midwidth:481px 」からこちらの「 midwidth:769px 」までの間のものとなりますので主にタブレット端末向け且つ更に PC ですね。 それ以上の PC 向けにも適応させるスタイルシートとなっていますね。そして最後の「 midwidth:769px 」というのは769px 以上の解像度を持つものですので要するに PC 向けのスタイルシートとなっているわけです。このように Dreamweaver で出力されたこの「 style.css 」には初期の状態でメディアクエリが2つ設定されています。ちなみにこのようにメディアクエリで設定されているこの基準となるこの幅ですね、「 midwidth 」この幅のことをブレークポイントといいます。今回の場合は 481px を基準にしてスマートフォン向けのレイアウトそしてタブレット向けのレイアウトに切り替える これが1つのブレークポイントでそしてもう1つはこの 769pxこちらもタブレット端末向けのレイアウトとPC 向けのレイアウトを切り替えるためのブレークポイントこの2つが存在しているわけですね。さてここまでこの「 style.css 」を見てきて1つ分かったことがあります。それはこの Dreamweaver でレスポンシブ Web デザインを作る時にはまずはスマートフォンですね。こちらの CSS の方から作っていって徐々に解像度を上げていき次にタブレット端末向けのスタイルシートを書いていってそして最後にPC 向けのスタイルシートを書いていくこのような手順をとることでスムーズにレスポンシブ Web デザインのレイアウトの構築が可能になっていくわけですね。 以上で今回のレッスンは終了です。今回は Dreamweaver でレスポンシブ Web デザインを制作する際のメディアクエリについて解説いたしました。Dreamweaver を利用するとこういった設定も事前に自動で行ってくれるので大変便利ですね。もちろん自分が作りたいサイトや最適化したい端末の解像度などに合わせて自分で変更したり、追加を行うことも可能ですのでメディアクエリに関してはしっかりと理解しておきましょう。

Dreamweaver CCで作るレスポンシブWebデザイン

このコースでは、レスポンシブWebデザインに対応したサイトをDreamweaverを使いながら制作する方法について解説していきます。レスポンシブWebサイトについての説明や、制作するにあたっての設計のコツ、Dreamweaverがもつ機能や使い方などを実際の制作手順に基づいて解説していきます。

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

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

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

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