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

スマートフォン端末に向けたCSS調整(レイアウトの調整)

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

ぜひご覧ください。

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

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのサイドメニュー部分のスマートフォン端末に向けたスタイルシートの調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 side_sp 」フォルダーの中の「 HTML 」の「完成版」と書かれているフォルダーの中この「 index.html 」を Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。このファイルは今回のレッスンでご説明するサイドメニュー部分のスマートフォン向けのスタイルシートの設定をすでに完了した状態になっています。今回のレッスンではこのファイルに目を通しながら実際にどのようにレスポンシブ Web デザインに向けたスタイルシートのコーディングを行っているかいくつかポイントを確認していきたいと思います。それでは早速レッスンを始めていきましょう。まず今回のスタイルシートの設定を進めていくにあたりサイドメニューのスマートフォン端末向けのデザインが、どのようになっていたか念のため確認しておきましょう。同様にダウンロードしてきたファイルの中にあるこちらの「デザイン」フォルダー、こちらの「デザイン」フォルダーに3つの端末向けのデザインが入っていますのでこちらを開きます。 そしてスマートフォン用のデザインを確認してみます。こちらですね。さてこちらのサイドメニュー部分のデザインですがこのようになっていましたね。今回はこれに基づいてスタイルシートのコーディングを行っていきます。それでは Dreamweaver に戻ります。それでは実際にどのようにスタイルシートのコーディングを行っているか確認していきましょう。まずこちらのコードビューにはこちらのファイルメニューの中から「 style.css 」をクリックしてCSS のファイルを開いてください。そしてこちらのデザインビューはスマートフォン用の画面サイズになっていることを確認しておいてください。それでは実際に見ていきます。こちらの「 style.css 」の中で今回のサイドメニューの部分が書かれているところはこちらのこのあたりですね、この「 side 」というコメントが書かれてあるところからずっと下に書いていますねそしてこちらのデザインビュー上ですとこのような形ですね。今回はスタイルシートを既に設定しているのでこちらのデザインビューにもそれが反映されている状態になっています。それではこちらのサイドメニューの CSS のコーディングをしていくにあたりいくつかのポイントについて見ていきたいと思います。 まず今回はスマートフォン用のレイアウトの設定ですのでメディアクエリの外に書くというのがルールでしたね、それを忘れずに覚えておきましょう。そしてこちらの3つのボタンの所に関してはul に #sidemenu を振っていますのでそれに対してこのようにスタイルシートを設定していってます。そして次にこちらの「お問い合わせ」部分に関してはdl に #contact を振っていますのでこちらに関しても同様にこのようにスタイルシートを設定していますね。ここでポイントはこれらの中に含まれる要素例えばこちらですとこの3つのボタンですね。他にもこの「お問い合わせ」の中ではこちらの赤いボタン、これらの要素に対しては横幅を指定するとき何百ピクセルといったような形で具体的に数値で指定するのではなくて「 width: auto 」もしくは「 width: 何 % 」といった形で指定するのがポイントです。そのようにすることによってどのような解像度を持つ端末で見たときもある程度柔軟に横幅を合わせて表示させることができるからです。レスポンシブ Web デザインを制作する際にはそういった点にも注意をしながらやっていくと良いでしょう。 その他の部分に関しては今回のスマートフォン向けのスタイルシートの設定の段階においては特に意識する必要はないかと思います。普段通りの CSS のコーディングで大丈夫です。それではこの状態で一度 Dreamweaver のライブビューを使って今の状態を確認しておきましょう。こちらのボタンをクリックしてライブビューに切り替えて表示領域を大きくしておきます。そしてこちらがスマートフォン用のサイトですね。このような形になっているのが分かります。きちんとデザイン通りに反映されていますねそして次はタブレットです。タブレットに関しましてはこのようになっていますね。今タブレット用 PC 用ともにスマートフォン用のスタイルシートを継承しているのでこのような形になっています。ということでこちらの PC 用に関しても同じですね。ただ今回のこちらのサイドメニューの部分スマートフォンと PC 用のレイアウトがほとんど同じですのでこのような形で PC 用のスタイルの設定も既に完了しているような状態になっていますね。以上で今回の解説は終了となりますが同じようにダウンロードしてきたファイルの中の「 side_sp 」の中のこちらの通常の「 HTML 」フォルダーの中こちらの中には今回のスタイルシートの設定をだ実装していない状態のファイルが含まれていますのでぜひ今回のレッスンを参考にしながらご自身でスタイルシートをコーディングしてみて下さい以上でレッスンは終了です。 今回は Dreamweaver を使ってレスポンシブ Web デザインに対応したサイドメニュー部分のスマートフォン向けのスタイルシートの調整手順について解説いたしました。次のレッスンではこの部分のタブレットとPC 端末向けのスタイルシートの調整方法について解説していますのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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