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

各端末に向けた主要コンテンツブロックのレイアウトの調整

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
主要コンテンツ部分のHTMLコーディングが完成したら、各端末に向けてレイアウトを整えていきます。このレッスンでは、その手順について解説していきます。
講師:
08:46

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたりウェブページの骨格となる主要コンテンツブロックのレイアウトを各端末ごとに調整する方法について解説いたします。まずはダウンロードしてきたファイルの中にある「 mainlayout 」というフォルダーの中にさらに「 HTML 」フォルダーというのがありますので、こちらを開いてその中にある「 index.html 」こちらをDreamweaver で開いてください。そしてこの画面がそのファイルを開いた状態です。このファイルはDreamweaver で新規に作成した。「可変グリッドレイアウト」のファイルにこのようにウェブページの主要となるコンテンツブロックをコーディングした状態となっています。そしてこの主要なコンテンツ部分はわかりやすいように背景色をぞれぞれ塗っています。このファイルを使って今回の各端末ごとにこの主要コンテンツブロックのレイアウトを調節する方法について解説していきます。それではレッスンを始めていきましょう。さて各端末ごとに主要コンテンツブロックのレイアウトを変えるためにまずは元となるデザインを確認しておきましょう。 同じくダウンロードしてきたファイルの中に入っているこの「 mainlayout 」のフォルダーの中のこちらの「デザイン」こちらに PC 用タブレット用スマートフォン用3つのデザインファイルが入っていますのでこれらをそれぞれ開いてください。そして開いた状態がこちらとなります。さて今回の各端末ごとのレイアウト調整をしていくにあたってそれぞれどこにレイアウトの調整が必要なのかを探していきます。それではまずはスマートフォン用のデザインをみていきたいと思います。スマートフォン用のデザインはこちらですね。スマートフォン用のデザインはこのように主要コンテンツレベルで見ていきますと1カラムで展開されていますね。さて次にタブレット用をみてみます。タブレット用もこのようにヘッダーやグローバルナビといった主要コンテンツブロックで見ていくとこちらも基本1ブロックですね、こちらもメインコンテンツという大きな枠の中に入っています。そしてこちらも1つの大きなブロックの中に入っています。ですので1ブロックですね、1カラムで構成されています。そして最後に PC を見てみます。このように原寸で見てみますとこのページの上部に関しては1ブロックですね、1カラムで展開されていますがこのように後半になりますとこちらのメインコンテンツ部分とサイドメニューの部分という形で2カラムに変更されます。 そして最後フッターでまた1カラムに戻るといった形ですね。ですので今回この主要コンテンツブロックのレイアウトを調整するにあたってはスマートフォンタブレット用は特に不要ですがPC 用だけこのようにメインコンテンツ部分とサイドメニューこちらを横並びのレイアウトに変える必要があるわけです。それでは実際にこれを実装してみたいと思います。Dreamweaver に戻ります。さて Dreamweaver の画面に戻ってきました。それではこちらにある画面モードを切り替えてそれぞれの端末がどのようなレイアウトになっているか確認してみたいと思います。まずは今の状態がスマートフォン用のレイアウトですね。先ほどのデザインと同様に1カラムで展開されています。そして次こちらをクリックしてタブレット用のサイズに切り替えてみます。するとタブレット用もこのように1カラムで展開されてますね。少し見にくいのでこちらを詰めておきましょう。そして次にこちらをクリックしてPC 用のサイズを開いてみましょう。するとこちらも今の状態ですとこのように1カラムになっていますね。それでは先ほどのデザイン通りにこちらのコンテンツ部分とサイドの部分ですね。 こちらを PC のみ横並びのレイアウトに変えてみたいと思います。それではちょっと画面サイズが狭いのでデザインビューのみに変えます。こちらのボタンをクリックするとコードビューが消えてデザインビューのみになります。さてこのようにコンテンツを横並びにしたい場合ですがまずやるべきことはそれらのコンテンツの横幅を変えてあげる必要がありますね。その場合どうするかというとまずは横幅を変えたい要素ですね。こちらをクリックしてフォーカス状態にします。そうするとこちらの右の方に白い四角のアイコンが出てきますのでこちらをマウスでドラッグして縮めていきます。それではやってみましょう。これをマウスでドラッグしてそのまま左に縮めていきます。そして背景の薄い灰色のグリッドに合わせるような形でドロップします。するとこのように横幅が変わりましたね。そしてもう1つこちらのサイドメニューにあたる「 Aside タグ」ですね。こちらも横幅を変えてみましょう。同じようにこの四角いアイコンをマウスでドラッグして縮めていきます。このようにすることでこのように横幅が小さくなりましたね。その時に注目するポイントですがこの ID のコンテンツ枠の右サイドちょうどグリッドで3つ分ありますね。 それに合わせた状態でこちらの ID サイドの「 Aside タグ」。こちらも3つ分に合わせてこれとそして上の ID コンテンツ枠、これを足してちょうど1列になるようにしています。それでは次にこちらの「 Aside タグ」の要素をこちらの「 Article タグ」の隣にスッポリと入れてみたいと思います。それをするためには同じように「 Aside タグ」をまずはフォーカスします。このようにフォーカスすると上にこのような4つのボタンの並んだメニューが出てきますのでこちらの斜め上ボタンをクリックします。するとこのようにコンテンツが横並びに1列になりましたね。これで先ほどの PC 用のページデザインのレイアウトに則ったこのコンテンツの枠そしてこちらサイドメニューの枠、それぞれが左右に並ぶ状態のレイアウトを作り出すことができました。それでは他の端末ですね。他の端末ではどのようになっていくのか確認してみたいと思います。こちらの画面サイズ切り替えボタンですねこちらをクリックしてみます。まずはタブレット するとタブレットの方は何も変わっていませんね。そしてスマートフォンの方もクリックしてみます。するとスマートフォンの方も変更はされていません。 そして PC モードに切り替えるとこのようにPC の方は先ほどやったように左右でブロックが並んでいますね。このようにここの画面モードですね、こちらを切り替えて作業をすることによってそれぞれの画面に応じたレイアウトの変更等々を行っていくことができます。以上でレッスンは終了です。今回は Dreamweaver でレスポンシブ Web デザインを制作するにあたってウェブページの骨格となる主要コンテンツブロックのレイアウトを各端末に向けて調整する方法について解説いたしました。このようにデザインビューだけで簡単に各端末別のレイアウトの調整を行うことができましたね。別のレッスンではこのように各端末向けに調整した HTML をPC のブラウザーで確認していく方法についても紹介していますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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