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

スマートフォン端末に向けたCSS調整(リスト表示)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グローバルナビゲーション部分の中身のHTMLコーディングが完成したら、次はその部分に対して、スマートフォン端末に向けて、CSSでレイアウトを調整していきます。このレッスンでは、その手順について解説していきます。
講師:
09:11

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのグローバルナビゲーション部分とメイン画像部分のスマートフォン端末に向けたタイルシートの調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 navi_sp 」というフォルダーの中そして今回は「 HTML(完成版)」の方を開いていただいてこの中に入っている「 index.html 」、こちらを Dreamweaver で開いておいてください。そしてこの画面がそのファイルを開いた状態となっています。このファイルを利用して今回のレッスンの解説を進めていきたいと思います。それでは早速レッスンを始めていきましょう。前回までにこの架空のサイトのグローバルナビゲーション部分とメイン画像部分の HTML のコーディングが完了している状態となっていますね今回はそのグローバルナビゲーションとメイン画像の部分そこに対してスマートフォン向けのスタイルシートの調整を行っていきたいと思います。それではまずスマートフォン用のデザインでこの部分がどのようなデザインになっていたか確認してみたいと思います。 同様にダウンロードしてきたファイルの中のこちらの「デザイン」というフォルダーの中に「 PC 用」「タブレット用」「スマートフォン用」の3つのデザインが入っていますのでこちらを開いて確認してみましょう。はいスマートフォン用の画面ですとこちらですね、グローバルナビゲーションはこの部分そしてメイン画像はこの部分となっていますねここで確認しておきたいポイントはまずグローバルナビゲーションはこのように縦にリスト形式であることそしてこのように右端に矢印がありますね、この矢印が付いていること、そしてこちらのメイン画像についてはこのサイトの横幅より少し小さくなった状態で表示されているということこの点を覚えておきましょう。それでは Dreamweaver に戻ります。はい Dreamweaver に戻りました。さて今回開いていただいているこちらのファイルですがすでにご覧の通りスマートフォン用のスタイルシートをグローバルナビゲーションとメイン画像部分に適用している状態となっています。実際にこのファイルを確認しながらこのグローバルナビゲーション部分とメイン画像の部分のスマートフォン向けのスタイルの調整がどのように行われているか確認していきましょう。 それではまずこちらのファイルのメニューのところから「 style.css 」を選択します。するとこちらのコードビューにCSS ファイルが開きましたね。そしてこちらのデザインビューは今スマートフォン向けのサイズになっています。こちらを確認しておきましょう。それでは実際にどのように CSS のコーディングが行われているのか確認していきたいと思います。まずこちらのグローバルナビゲーションそしてこちらのメイン画像どちらにも共通して言えることは今回はスマートフォン向けのスタイルシートのコーディングとなりますのでタブレット用や PC 用のメディアクエリの中に書くのではなく、メディアクエリの外に書くというのをあらためて確認しておきましょう。ではまずこちらのグローバルナビゲーションの部分から見ていきましょう。まずこちらの「 min-width: 481px 」要するにタブレット用のメディアクエリそしてこちらの「 min-width: 769px 」こちらは PC 用のスタイルシートですねメディアクエリです。これ以外の外に書いていることをまず確認します。はいグローバルナビゲーションは関係するところは2つあります。 まずこちらの「 #gnavi 」ですねこちらの一番外側の部分こちらにはスタイルの設定は何もしていません。ただし、それより下にいったこちらの部分、この部分でこのグローバルナビのスタイルシートを定義しています。いろいろと書いていますが基本的には通常通りの CSS のコーディングで大丈夫です。この形に CSS のコーディングをしていきます。ポイントは縦にリストになることと右端に矢印が並ぶことですね。この右端の矢印部分は「 background-image 」で指定しています。今デザインビューで表示しているのでちょっと見た目が実際のものと違いますがこれを例えばこちらのライブビューに変えてみましょうか。するとこのようにきちんとなっているのが分かりますね。それではデザインビューに戻しておきます。そして次ですね、こちらのメインイメージ部分のコーディングです。こちらもスタイルシートで関係しているのは2箇所あります。まずは一番の外枠ですね、一番の外枠のこの「 #mainimg 」のところこちらには「 width: 100% 」そして「 padding: 20px 」と「 0 」が指定してあります。「 width: 100%」というのはサイトの横幅一杯にということですね。 そして「 padding: 20px 」まずは上下に 20px 空けましょうとそして左右のパディングは 0 で大丈夫ですよということですね。この画像の上下の隙間部分を定義しています。さてもう1箇所見ておきましょう。さらに下に行ったところにこちらの「 #mainimg 」の中の p タグですね、こちらにもスタイルを定義してあげてます。実際この p タグの部分はこの画像を囲っている p タグですね、外側の p タグです。ここには「 width: 94%」というのは 100% ではなくてその枠の中の94% の幅で表示するという形ですね。そして「 margin: 0 」の「 auto 」これは上下のマージンは 0そして横のマージンはオートですね。こうすることによってこの画像要素を含んだこの外側の p タグですね。この p タグが横軸でセンタリングされるといったような形になります。以上でこのグローバルナビゲーション部分とこちらのメイン画像部分のスマートフォン向けのスタイルシートの設定は完了です。それでは一度この状態でブラウザでプレビューしてみましょうか。ブラウザでプレビューするにはこちらの地球アイコンをクリックしてそして今回はこの「 Chrome 」を選びます。 するとこのように表示されましたね。今は PC 端末向けのレイアウトが表示されています。それでは Chrome の「デベロッパーツール」を開きます。こちらをですねこちらをクリックするとサイドに出てきますのでこれの横幅をこの様に変えて確認してみます。こちらが PC サイトのレイアウトですね。これをずっと小さくしていくとこのようにスマートフォン用に変わりましたね。今のところタブレット用と PC 用のスタイルシートは設定していませんのでそれらのメディアクエリの外に書かれたスマートフォン用の CSS がどの画面サイズにも共通して反映されている、そういった状態になっています。ですので今ブラウザで確認してもこのような形でどれも同じような状況になっているといった形になります。それでは Dreamweaver に戻りましょう。さてダウンロードしてきたファイルの中にあるこちらの通常の「 HTML 」フォルダー、この中に今回のスタイルシートのコーディングをまだ行っていないファイルが入っているのでこちらを使ってぜひ一度ご自身でCSS の調整をやってみてください。以上でレッスンは終了です。今回は Dreamweaver を使ってグローバルナビゲーション部分とメイン画像部分のスマートフォン向けのスタイルシートの調整手順について解説いたしました。 次のレッスンではこの部分のタブレットとPC 端末向けのスタイルシートの調整方法について解説しているのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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