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

タブレット&PC端末に向けたCSS調整(要素の回り込みと、表示の切替)

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

ぜひご覧ください。

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

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのコンテンツ部分に対してタブレットとPC 端末に向けたスタイルシートの調整方法について解説していきます。まずはダウンロードしてきたファイルの「 contents_tab_pc 」のフォルダーの中の「 HTML (完成版)」こちらのフォルダーの中にある「 index.html 」こちらを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。前回のレッスンではコンテンツエリアのスマートフォン向けのレイアウトスタイルシートの設定をやっていきましたね。今回はそれに対してタブレットと PC 用のスタイルシートの設定についてやっていきたいと思います。それではレッスンを始めていきましょう。まずコンテンツエリアのタブレットとPC 端末向けのデザインを先に確認しておきましょう。同じくダウンロードしてきたファイルの中にあるこちらの「デザイン」フォルダーこちらの中に「 PC 用」「タブレット用」「スマートフォン用」3つのデザインが入っていますのでこちらを開きましょう。 そしてこれが PC 用のデザインですねそしてこちらタブレット用です。コンテンツエリアの部分はこの部分ですね。上のテキストエリアと下の写真があるところこの部分です。タブレットはこのようなデザインになっていますね。そして PC 用はというとこのようにカラム自体は違うもののほとんど同じデザインですね。1つ違うとすればこちらのテキストの左右に1px のラインが入ってるぐらいです。念のためスマートフォン用のデザインも確認しておきましょう。スマートフォン用のデザインはこのような感じですね。スマートフォン用ですとこちらのギャラリーの部分、この部分が縦のリストになっていましたがタブレット用そして PC 用はこのように横並びになっていることそしてスマートフォン用はこのようにギャラリーという1つの大きなタイトルが付いていますがタブレット用 PC 用にはその大きなタイトルはなく代わりにこの写真の上部にこのように個別にタイトルが付いていますね。この点に注意しながらタブレットそして PC 端末向けのスタイルシートの設定をやっていきたいと思います。それでは Dreamweaver に戻ります。今この Dreamweaver で開いているファイル、例のごとくすでに今回行うタブレット用とPC 用のスタイルシートの設定が完了してあるファイルとなっています。 このファイルを目で追いながら実際にどのように設定しているのかを確認していきたいと思います。それではまずこちらのファイルメニューから「 style.css 」を開いておきましょう。こちらに表示されてきましたね、そしてこちらのデザインビューこちらはタブレットにしておきましょうか、こちらのボタンをクリックします。さて今回見ていくコンテンツ部分のタブレット用と PC 用のスタイルシートの設定ですが先ほどデザインで確認した通りタブレットとPC 用のデザインはほとんどが同じです。ですので今回は主にタブレット用のメディアクエリの中にスタイルシートを書いていきます。ではこの「 style.css 」のどの部分に今回のスタイルシートが書かれているか確認しておきましょう。ずっと下に行きますとタブレット用のメディアクエリが出てきますね。「 min-width: 481px 」こちらの赤い文字で囲まれた部分ですね。ここまでです。この中に書かれている内容がタブレットとそして PC ですね、PC の方に反映されるスタイルシートとなっています。ではこの中のどの部分に今回のコンテンツ部分の内容が書かれているかそれはこの中にですね、書いてあるこの部分ですね、「 contents 」とコメントが書かれたこの下の方から書いてあります。 でデザインビューはといいますとこちらもこの下の部分ですね、すでにスタイルシートが設定されている状態ですのでこういった形でもうデザインが反映されていますね。それではこのコンテンツエリアの CSS のコーディングをするにあたって今回のポイントとなるところをご紹介していきます。まずこちらのテキスト部分のところですね、このテキストの部分のこの部分4行書かれている部分ですね。こちらのところですがタブレット端末、そして PC 端末向けにwidth を 60% に設定しています。% 指定で横幅を設定しているわけですね。といいますのはこちらのレイアウトちょっと今の状況だと見にくいのですがこちらをライブビューに変えてみましょう。するとこのように上にラインが付いていますね。このラインをこのテキストを囲っているp タグの上部に設定しています。その設定自体はスマートフォン用のスタイルシートの中で設定しているのですが今回はそれに上書きするような形で「 width: 60% 」を指定しているわけです。こうすることによってこの枠を横幅一杯に広げないという設定にしているわけですね。そしてこの「 margin: 0 」と「 auto 」で画面一杯ではなくなったこの要素を中央寄せにしています。 さて注目していただきたいのがこちらの「 min-width: 300px 」というものです。基本的にこの上で「 width: 60% 」と指定しているので画面全体の横幅が変わればそれに応じてこちらの大きさも変わるわけですがこの「 min-width: 300px 」とすることによって300px よりは横幅を小さくしないですね。最低の横幅は 300px だという指定をしています。こうすることによって意図しないデザインの崩れを防いでるわけです。これとは逆で「 max-width 」というものもあります。要するに最大値の設定ですね。では次にこちらのギャラリー部分について見ていきたいと思います。こちらですね、こちらの部分はスマートフォンのレイアウトとは大きく変わっているような状態ですね、こちらの部分、スタイルシート上ではこの「 gallery 」以下に書いている内容となります。この部分ではスマートフォン用のレイアウトでは表示していた大きな1つのタイトルこちらを「 display:none 」で非表示にしています。そして代わりにこの写真の中ですねこの写真の中にあるこの部分の個別のタイトルこちらをこちら dt にあたるのですがこの dt に「 display:block 」をすることによって表示させています。 このようにレスポンシブ Web デザインでは各端末によって表示をしたり非表示にしたりというのを切り換えるというシーンが多々出てきますのでこのやり方を覚えておくと良いでしょう。あとはこのようにずらーっとスタイルシートを書いていますがこれらはこのデザインですね、スマートフォンは縦一列にリストが並んでいましたがそれをこちらで調節することによって横並びにしてレイアウトを変更しているわけです。それではこの状態で一度ブラウザで確認してみましょうか。ブラウザで確認するにはこちらの地球のアイコンをクリックしてこの「 Chrome 」を選択しましょう。すると表示されましたねそれでは「デベロッパーツール」を開きます。はい今回スタイルシートの調整をしたのはこの部分ですね、今は PC のレイアウトが表示されています。このように見てみるとしっかりとスタイルシートの反映がされているのが分かりますね。それではこちらのデベロッパーツールの端を持って画面を小さくしていってみましょう。このようにずーっと小さくしていくとこのタイミングでタブレット用のデザインに変わりましたね。このようになっています。ちゃんとできていますね。そしてこのままさらにずーっと小さくしていくとここでスマートフォン用に変わりましたスマートフォン用になるとしっかりとリスト表示に変わっていますね。 このような感じです。さてこちらの PC サイトのみにあったデザインが1つだけありましたね。それはこのテキストのこの左右の縦線ですね。こちらを確認してみたいと思います。それでは Dreamweaver に戻ります。PC 用だけに適用するスタイルシートそれはタブレットと同様に PC 用に切られたメディアクエリの中に書いていくといった形ですね。それはこの「 style.css 」の下の方にあります。こちらの「 min-width: 769 px 」こちらのメディアクエリの中に書いています。この中のこちらですねここで「 border-left 」と「 border-right 」を書いて指定しているわけですね。このメディアクエリの「 min-width: 769 px 」の中に書かれた内容はPC サイトにのみ反映されてきます。こちらのデザインビューでも確認しておきましょう。こちらのライブビューを外してこちらですね。ちょっと点線があるので分かりづらいのでもう一度ライブビューにしてみましょう。するとここなるのが分かりますね。以上でタブレットと PC 用のスタイルシートの設定は完了です。いつもの通りにダウンロードしてきたファイルのこの「 contents_tab_pc 」の中のこの通常の「 HTML 」フォルダーこの中に今回の PC 用とタブレット用のスタイルシートの設定をまだ行っていないファイルが入っていますのでこのファイルを使って今回のレッスンを参考にしながら一度ご自身で設定してみてください。 以上でレッスンは終了です。今回は Dreamweaver を使ってレスポンシブ Web デザインに対応したコンテンツ部分のタブレットと PC 端末に向けたスタイルシートの調整手順について解説いたしました。以降のレッスンではページの他の部分に対してのレスポンシブなコーディングの方法について解説していきますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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