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

タブレット&PC端末に向けたCSS調整(リストのFloat調整)

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

ぜひご覧ください。

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

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのグローバルナビゲーションとメイン画像部分に対してタブレットと PC 端末に向けたスタイルシートの調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 navi_tab_pc 」というフォルダーの中にある今回は「 HTML(完成版)」のフォルダーの中の「 index.html 」、これを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。これまでのレッスンでこのグローバルナビゲーションとこのメイン画像部分、こちらのスマートフォン向けの CSS の設定こちらが完了している状態ですね今回はさらにこのグローバルナビゲーションとメイン画像部分にタブレット端末向けとPC 端末向けのスタイルシートの設定をやっていきたいと思います。それではまずこのグローバルナビゲーション部分とメイン画像部分のタブレットと PC 端末用のデザインがどうなっていたか先に確認しておきましょう。同じように先ほどダウンロードしてきたファイルの中に「デザイン」フォルダーというものが入っているのでこちらの画像3つを開いてください。 まずはこれが PC 用のデザインですね、そしてもう1つこちらがタブレット用のデザインですね。念のためスマートフォン用も確認しておきましょう。スマートフォン用のデザインではこのようにグローバルナビゲーションが縦にリストに並んでいてこちらのメイン画像はサイトの幅より小さい形で中央にセンタリングされていました。あとこちらのグローバルナビゲーションはこちらの右端に矢印のアイコンが付いていますね。これを踏まえた上でタブレット用のデザインを確認してみます。タブレット用のデザインになりますとこちらのグローバルナビゲーションは縦ではなく横のリストに変わっています。そして先ほどあった矢印のアイコンは無くなっていますね。そしてこちらのメイン画像部分こちらはもちろん画像のサイズも違いますが画像の横幅、こちらも上のグローバルナビゲーションと同様にサイトの横幅一杯に表示されているのが分かります。それでは次に PC 用のデザインを見てみます。PC 用のデザインもこのようにタブレットと全く同じ構成ですね。サイズだけが違う形になります。このように今回はタブレット用のデザインそして PC 用のデザイン両方とも同じ形になっているので今回はタブレット用のメディアクエリの中にスタイルシートを書いていけば大丈夫です。 それでは Dreamweaver に戻りましょう。そしてこちらのファ-イルメニューの中の「 style.css 」をクリックして開きましょう。そしてこちらのデザインビューこちらはタブレット用のサイズに切り替えておきましょうか。さて今開いていただいているファイルこれまでと同様に既にこのグローバルナビゲーションとメイン画像部分のタブレット端末用と PC 端末用のスタイルシートが書かれている状態になっています。このスタイルシートを目で追いながら実際にどのように実装されているのか確認していきたいと思います。それではまずこちらのグローバルナビゲーションの部分ですね。タブレット用 PC 用ともに縦並びのリストではなく横並びのリストに変わっていました。ではスタイルシートを見ていきます。まずはタブレット用ですのでメディアクエリの中に書いていきます。こちらです。「 min-width: 481px 」こちらの赤いこの中に書いていくわけですね、ここまでですね。この中に書いていきます。この中に書いたスタイルシートは481px 以上の横幅を持つ端末に適用されるためタブレットと PC 両方ともに反映されるスタイルシートとなりますね。 ではこのグローバルナビゲーションに関連するところを見ていきます。まずはこちらの「 #gnavi 」です。「 #gnavi 」はこのグローバルナビゲーションの一番の外枠の要素ですね。ここには何も記入はしていません。そしてそのままずっと下に下がってくるとこちらですね、そしてもう1つありますね、こちらです。この部分はこのグローバルナビのこの茶色い1つのボタンですね。このの茶色い1つのボタンそれぞれに対してスタイルを定義している状態となっています。ポイントはまずこの「 width: 20% 」です。この「 width: 20% 」はボタンが5つあるために 20% としているのですが掛ける5をすると 100% になるので20% にしておけば均等にボタンの幅を設定してそれを横に並ばせるとちょうど100% になるといった感じですね。そしてその下の「 float: left 」のところこうすることによってその均等のサイズになったボタンが横一列に並ぶといった感じです。そしてスマートフォン用にはあった矢印のアイコンをこちらの「 background-image 」のところで消しています。そして各ボタンの境界線のこちらの白い縦線これは「 border-right 」で指定していますねそしてもう1つのこちらの部分、こちらの部分は「 li 」要素の「 last-child 」つまり一番最後の「 li 」要素こちらですね、こちらの要素のボーダーを消しています。 要するにボタンの最後一番の右端になる要素なので右端のボーダーはいらないといった形になります。それでは次にこちらのメインイメージの方を見ていきましょう。メインイメージに関係しているところは2点。まずは上の方にあるこの「 #mainimg 」、これはこの画像要素を囲っている一番の外側の要素ですねこの要素にはスマートフォン用のスタイルをそのまま引き継いで何も記入はしていません。そしてもう1点下の方に行きますとこちら 「 #mainimg 」の中の p タグへの指定ですね。こちらを「 width: 100% 」に変えています。この p タグですが画像要素のすぐ上を囲っている要素ですね。この p タグの横幅を 100% にすることでこの画像の横幅をサイトの横幅ぴったり要するに 100% に引き上げることができます。このようにスマートフォン用で定義した内容を上書きするような形でこのメディアクエリですね。タブレット端末向けのメディアクエリの中でタイルシートを定義してあげているといった状態です。それではこの状態で一度ブラウザでプレビューしてみましょう。ブラウザでプレビューするにはこちらの地球アイコンをクリックしてこの「 Google Chrome 」を選択します。 するとこのように開いてきますね。それでは Chrome の「デベロッパーツール」を開いておきます。はい開きましたね。はい今はこちら PC 用のレイアウトが表示されている状態ですね、これをデベロッパーツールの左端を持ってドラッグしていってみましょう。このようにどんどんどんどんと小さくしていくとこのようにスマートフォン用のレイアウトに変わりましたね。タブレット用と PC 用はデザインは同じなのでこういった形になっていますね。これでこのグローバルナビゲーション部分とこちらのメイン画像部分のレスポンシブ Web デザイン化は完了となります。それでは Dreamweaver に戻ります。さて先ほどダウンロードしてきたファイルの中には今回のコーディングをする前のファイルがこちらの通常の「 HTML 」フォルダーの中に入っていますのでこのファイルを使ってぜひご自身で一度コーディングをしてみてください。以上で今回のレッスンは終了です。今回は Dreamweaver を使ってレスポンシブ Web デザインに対応したグローバルナビゲーションとメイン画像部分のタブレットと PC 端末に向けたスタイルシートの調整手順について解説いたしました。 以降のレッスンではページの他の部分に対してのレスポンシブなコーディングの方法について解説していきますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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