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

タブレット&PC端末に向けたCSS調整(メディアクエリの追加)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スマートフォン端末向けのCSS調整が完了したら、次はその部分に対して、タブレット端末に向けて、CSSでレイアウトを調整していきます。このレッスンでは、その手順について解説していきます。
講師:
12:12

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのサイドメニュー部分に対してタブレットとPC 端末に向けたスタイルシートの調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 side_tab_pc 」というフォルダーの中の「 HTML (完成版)」こちらの中に入っている「 index.html 」こちらを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。このファイルは今回ご説明するサイドメニュー部分の PC 用。そしてタブレット用のスタイルシートの設定がすでに完了している状態となっています。今回はこのファイルを目で追いながら実際にレスポンシブ Web デザインを制作するにあたってどのようにスタイルシートのコーディングを行っているかいくつかのポイントを確認していきたいと思います。それでは早速レッスンを始めていきましょう。まず先に今回対象となる PC とタブレット用のサイドメニュー部分のデザインこちらを確認しておきたいと思います。同じくダウンロードしてきたファイルの中にあるこちらの「デザイン」フォルダー、こちらの「デザイン」フォルダーの中に各端末向けのデザインが3つ入っていますのでこちらを開いて下さい。 そしてこれが PC 用のデザインですねそれではまずタブレットの方から見ていきましょうか。こちらがタブレット用のデザインとなります。今回対象となるページ内の部分はこちらの部分ですね。タブレット向けのデザインでは各要素が横並びに展開されていますね。そして PC の方も見ておきましょう。PC の方はこの部分ですね。各要素が縦に展開されています。このデザインはこちらのスマートフォン用のデザインとほぼ同じですね。それではこれらも踏まえた上で実際のコーディングを確認していきたいと思います。それでは Dreamweaver に戻ります。では実際にどのようにコーディングしているかというのを確認にする前に一度この完成ファイルをブラウザでプレビューしてみたいと思います。ブラウザでプレビューするにはこちらの地球アイコンをクリックですね。そして今回は「 Chrome 」を選択します。するとこのように表示されますね、今 PC 用のレイアウトが表示されています。該当部分を見てみましょう。するとこのようにデザインが反映されていますね。それでは他の端末向けのレイアウトも確認してみたいと思います。Chrome の「デベロッパーツール」を表示してそしてこちらの左端をドラッグして画面を縮めていってみたいと思います。 今は PC 用ですねでは徐々に変えていきます。すると徐々に徐々にパーツが小さくなっていってそしてここでタブレット用のデザインに変わります。このように横並びに展開されていますね。それではさらに縮めていきます。するとこのようにサイドメニュー部分がスマートフォン用のデザインに変わりましたね。ただしまだ上の部分はというとタブレット向けです。それではさらに縮めてみたいと思います。はい、ここでスマートフォン向けのレイアウトに変わりました。この上の部分もスマートフォン向けに変わっていますね。では少し元に戻してみます。こちらですね、今タブレット用のレイアウトに切り換わったのですがこちらの部分まだスマートフォン向けですね。さらに大きくするとこの部分で横並びのタブレット用のデザインに変わりました。今回のレッスンのポイントずばりこの部分にあります。具体的にどういうことかと言いますと実はブレイクポイント要するにメディアクエリを1つ追加しています。それではなぜメディアクエリを1つ追加したのかそれはですね、もしこのように横に展開された状態でさらにさらに小さくしていくとこれらのボタンの表示がどんどんどんどん崩れていきますね。 ボタン自体がどんどん小さくなっていくのでこのテキスト自体も変なところで改行されたりとかボタン自体からはみ出したりとかそういったことになってしまいます。ですのでそういったことを回避するためにこれまでタブレット用に設定したメディアクエリとは別にさらに細かく区切ったメディアクエリをですね。もう1つ作ってその中で切り換えを行っています。この部分の切り換えですね、要するにこのようなイメージです。今現状設定されているメディアクエリブレイクポイントは PC 用そして大きいタブレット用そして小さいタブレット用そしてスマートフォン用これら4つの種類に対してブレイクポイントメディアクエリを切っているわけですね。それでは実際どのようにその部分がコーディングされているか具体的にファイルの中を見ていきたいと思います。それでは Dreamweaver に戻ります。それではまずこちらのファイルのメニューから「 style.css 」を開きます。そしてこちらのデザインビューにおいてはこのタブレット用の画面サイズに切り換えておきましょう。それではスタイルシートの中の該当の箇所を見てみます。ずっと下に行ってですね、まずこちらのメディアクエリ「 min-width: 481px 」こちらがこれまで通りの通常のタブレット向けのメディアクエリですね。 それではこの「 min-width: 481px 」こちらのメディアクエリの中でサイドメニューに関する記述どのようにしているか確認してみたいと思います。これをずっと見ていきますとあれ特に書かれているところがありませんね。はいそうなんです。実は今回の実装にあたってはこの「 min-width: 481px 」要するにこれまでタブレット用のメディアクエリとして使っていた部分に対してサイドメニューのスタイルシートの記述は一切行っていません。といいますのは先ほどブラウザでのプレビューで確認した通りにスマートフォン用と小さいタブレット向けのサイドメニュー部分のデザインがまったく一緒でしたね。ですのでこれまでタブレット用のメディアクエリとして使っていたこの「 min-width: 481px 」こちらには何も書いていない状態です。ただしその下ですね、この下の部分において新しくブレイクポイントを追加しています。メディアクエリですね、一応この新しく追加したブレイクポイントメディアクエリのことをこのレッスンでは中間ブレイクポイントと呼ぶことにしておきましょう。さてこの新しく追加した中間ブレイクポイントこれは要するに先ほどの「 min-width: 481px 」ですねこちらよりさらに解像度が大きくなった端末。 こちらでは「 min-width: 680px 」としていますねつまり先ほどの「 min-width: 481px 」よりも大きい端末ですねそしてさらに今回のメディアクエリに関しては「 and 」が付いていてそのあとに「 max-width 」というのが付いていますね。これは最大ですね最大 768px までの解像度を持つものつまり 680px から 768px までの間の解像度を持つ端末にのみ適用するといった形のメディアクエリになっています。つまり先ほどの「 min-width: 481px 」は小さいタブレット用。そして今回追加したこの中間ブレイクポイントのメディアクエリに関しては大きいタブレット用といったような解釈になるわけです。後はこの新しく追加したメディアクエリの中に通常通りに CSS のコーディングをしておけば大丈夫です。するとこのような形でライブビューで見ますとこのように横並びになっていますね。このあたりは普段通りのコーディングで大丈夫です。あと今回このように中間ブレイクポイントを追加してさらに「 min-width 」と「 max-width 」を指定してあげたことによってもう1つメリットが発生しています。 それは何かと言いますとスマートフォン用のデザインと PC 用のデザインはほとんど同じでしたね。もし今回この新しく追加したメディアクエリの中にタブレット用のサイドメニューのスタイルシートを書かずに先ほどの「 min-width: 481px 」の方に書いてしまった場合それは PC の表示にも継承されてしまうためこの横並びのレイアウトがそのままPC にも反映されてきてしまいます。しかし今回のように「 min-width: 481px 」から「 max-width:768px 」以内の端末にのみ適用するというメディアクエリを書いてそこにタブレット向けのスタイルシートを書いていることによってPC 向けですねPC 向けはというと 769px からですがこちらの方に影響を与えずにタブレット用のスタイルシートの設定ができるわけです。したがってこの新しいメディアクエリの中に書かれたものは無視された状態で PC 用のデザインが表示されるわけですね。要するにスマートフォン向けのスタイルシートの設定がそのまま PC の方に継承されているわけですね。このように実際にレスポンシブ Web デザインを Dreamweaver で制作していくにあたってもし2つだけのブレイクポイントメディアクエリですね。 このメディアクエリだけでは足らないようなときはこうやって自分で新たにメディアクエリを追加して設定していくことが可能です。こうすることによって意図しないデザインの崩れやサイトの視認性の確保ですね、そういったものも確保しながらサイトを作っていくことができます。これはぜひ覚えておきましょう。以上で今回の解説は終了となりますが先ほどダウンロードしてきたファイルの中にあるこちらの通常の「 HTML 」フォルダー、こちらの中には今回のスタイルシートの設定をまだ行っていないファイルがそのまま入っていますのでぜひご自身でスタイルシートの設定やメディアクエリの追加にチャレンジしてみてください。以上で今回のレッスンは終了です。今回は Dreamweaver を使ってレスポンシブ Web デザインに対応したサイドメニュー部分のタブレットとPC 端末に向けたスタイルシートの調整手順について解説いたしました。以降のレッスンではページ内の他の部分に対してのレスポンシブなコーディングの方法を解説していきますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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