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

スマートフォン端末に向けたCSS調整(コンテンツの非表示切り替え)

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

ぜひご覧ください。

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

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのフッター部分のスマートフォン端末に向けたスタイルシートの調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 footer_sp 」のフォルダーのこちらの「 HTML (完成版)」というフォルダーの中にあるこちらの「 index.html 」このファイルをDreamweaver で開いて下さい。そしてこれがそのファイルを開いた状態です。このファイルは今回のレッスンでご説明していくフッター部分のスマートフォン端末向けのスタイルシートの設定をすでに実装してある状態です。このファイルを目で追いながらレスポンシブ Web デザインを制作するにあたってどのようなコーディングをしていくのかいくつかのポイントについて見ていきたいと思います。それではレッスンを始めていきましょう。今回スタイルシートを設定していくスマートフォン端末向けのフッター部分のデザインについてまずは確認をしておきたいと思います。同くダウンロードしてきたファイルの中にあるこちらの「デザイン」フォルダー。 こちらの「デザイン」フォルダーの中に3つ画像ファイルが入っていますのでそれを開いてください。そして今回のスマートフォン用デザインを見てみましょう。スマートフォン用デザインのこちらのフッター部分が今回の対象ですね。内容は非常にシンプルですね。茶色い帯とそしてこちらの白い文字でコピーライトが表示されているだけです。それでは Dreamweaver に戻りましょう。そしてこちらのファイルのメニューから「 style.css 」を開きます。そしてこの「 style.css 」の中のどこにそのスマートフォン用のスタイルシートが書かれているかというとずっと下に行きまして、こちら「 footer 」というコメントが書かれている部分ですね。こちらの部分に記載しています。デザインビューですとここですね。さて今回のスマートフォン向けのスタイルシートを設定するにあたっては特に複雑なことはありません。純粋に普段通りのスタイルシートの設定をしていけば大丈夫です。ただし今回のフッター部分のデザインですがスマートフォンとそして PC とタブレットそれぞれで表示する項目が違っていましたね。PC タブレット向けのデザインに関してはこちらのコピーライトの上にフッターのナビゲーションが入っていました。 ただスマートフォン用のデザインになるとそれは省くような形になりますのでそちらの設定をこの部分で行っている状態です。あとは横幅一杯に茶色の帯を敷いている所はこちらの少し上にあるこちらの「 #footer 」部分で定義しています。それ以外はいたってシンプルで普段通りの CSS を書いておけば大丈夫ですね。あとはここのコピーライトの部分の横幅を「 width: 60% 」という形でパーセント指定にしているぐらいでしょうか。この点に関してはこれまでのレッスンでも解説してきましたが基本的にレスポンシブ Web デザインを制作するにあたっては要素の幅を決めるときその場合はパーセント指定もしくはオートにするのが理想的です。もちろんそれによって意図しないデザインの崩れや視認性が悪くなるといったようなことになるようであればパーセントやオートではなくて具体的なピクセル数を指定してあげるのも良いでしょう。そのあたりは臨機応変に対応していただければと思います。それではこの状態で一度 Dreamweaver のライブビューで現状の見え方について確認しておきましょう。ライブビューに切り換えるのはこちらのボタンですね。 そして表示領域を大きくしておきましょう。まずはスマートフォン用のレイアウトですね。このような形になっています。そして次はタブレット用です。タブレット用ですとこのような形になっていますね。そして PC 用です。このような形になっています。要するに今スマートフォン用のスタイルシートをメディアクエリ外に書いているのでそのレイアウトがタブレット、そして PC どちらにも継承されて表示されているといった感じですね。以上で今回のスマートフォン向けのフッター部分のスタイルシートの設定についての説明は終了となりますが、同じようにダウンロードしてきたファイルの中にあるこちらの通常の「 HTML 」フォルダー。この中には今回のスタイルシートの設定をまだ行っていないファイルが入っていますのでぜひ今回のレッスンを参考にしながらご自身で設定をしてみてください。以上でレッスンは終了です。今回は Dreamweaver を使ってレスポンシブ Web デザインに対応したフッター部分のスマートフォン向けのスタイルシートの調整手順について解説いたしました。次のレッスンではこの部分のタブレットとPC 端末向けのスタイルシートの調整方法について解説しますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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