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

スマートフォン端末に向けたCSS調整(要素のリスト表示と表示切り替え)

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

ぜひご覧ください。

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

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのコンテンツ部分のスマートフォン端末に向けたスタイルシートの調整方法について解説していきます。まずはダウンロードしてきたファイルの中にある「 contents_sp 」フォルダーの中の「 HTML (完成版)」こちらの中に入っているこの「 index.html 」こちらを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。このファイルは前回のレッスンでコンテンツ部分の HTML コーディングが済んでいる状態ですので今回はそのコンテンツ部分に対してスマートフォン用のスタイルシートの設定についてこのファイルを使って確認していきたいと思います。それではまず対象となるコンテンツ部分のスマートフォンサイトのデザインについてあらためて確認しておきましょう。ダウンロードしてきたファイルの中にあるこちらの「 contents_sp 」の中の「デザイン」フォルダーの中こちらに「 PC 」「タブレット」「スマートフォン用」のデザインが入っているのでこちらを開いてみましょう。 まずこちらが PC 用ですねそしてこちらタブレット用、そしてスマートフォン用のデザインです。今回スタイルシートを設定していくのはこちらのこの部分ですね。このテキストの部分とその下のギャラリー部分この部分のスマートフォン端末向けのスタイルシートを作っていきます。一応念のため他の PC とタブレット用のデザインも確認しておきましょう。タブレットはこのような形ですね。そして PC も同様にこのような形です。それでは Dreamweaver に戻ります。さて例のごとくこの今開いているファイルはすでにそのコンテンツ部分のスマートフォン端末用のタイルシートの設定が完了している状態です。こちらのデザインビューで見てみますとこのようになっていますね。このファイルを実際に目で追いながらスマートフォン向けにどのように CSS のコーディングを行っているか確認をしていきたいと思います。それではこちら今コードビューですね。そしてこちらがデザインビューでかつこちらがスマートフォン用の画面サイズになっています。これを確認した上でこちらのファイルメニューから「 style.css 」を開きます。さてこの「 style.css 」の中にスマートフォン用のスタイルシートを書いていくわけですが、スマートフォン用のスタイルシートはメディアクエリの外側に書くんでしたね。 それを確認していきます。この「 style.css 」の中のどの部分に今回のコンテンツ部分のスタイルシートが書かれているかというとこの部分ですね、コメントで「 contents 」と書かれているところから下にずっと書いていますね。こちらのタブレット用のメディアクエリの上までという形になっています。結構一杯書いていますね。さて今回のコンテンツ部分大きく分けて2つのパーツに分かれます。それはこちらのテキストの部分そしてこちらのギャラリーの部分ですね。まずこちらのテキストの部分はこの「 #intro 」という枠の中で書かれています。ここのテキストの部分に関してはスマートフォン用もタブレット用も PC 用もどれもほとんど同じデザインですので基本的にはスマートフォンのデザインを確認しながらそれに従って普段通りにコーディングしておけば大丈夫です。ただしこのコンテンツ部分に限った話ではないのですがこのようにレスポンシブ Web デザインを作る際にはこのサイトの中に置く要素ですね。こういった要素の横幅を指定するときはできる限りパーセント指定でやってあげると理想的です。と言いますのはメディアクエリありますよね。 そのメディアクエリはスマートフォンとタブレットのデザインを切り換える基準となる横幅、それをブレイクポイントとして決めています。そして同様にタブレットと PC のデザインの切り換えも同じですね。例えばこのブレイクポイントの間にあるような中途半端な画面サイズを持った端末でアクセスできたときにパーセント指定をしといてあげるとその端末に合わせて最適化した表示をすることができるからです。ただそれは強制ではなく例えばパーセント指定にすることで意図しないデザインになってしまうことを避けるときなどには横幅を固定で指定してあげるのも良いでしょう。その状況状況に合わせて調整を行ってください。それでは次にギャラリーのところを見ていきたいと思います。ギャラリーの部分はこちらですね、こちらは「 style.css 」の中にも「 gallery 」というコメントを作っていてその下側に書いていってます。さてこのギャラリーの部分こちらのスタイルシートを作成していく際にはスマートフォン用のデザインそして PC タブレット用のデザイン、それらの違いをよく考えてスタイルシートを作っていく必要があります。具体的にいうとこちらのタイトル部分そして PC やタブレット用のデザインにはあったこちらの画像の中にあったタイトルそれらの表示の切り換えを意識しておく必要があります。 まずこちらの大きな1つのタイトルですがこちらはこの h2 で定義しています。この大きなタイトルはスマートフォン用にしか表示されていなくてタブレット用 PC 用では表示されていませんでしたね。ではその PC タブレットのみに表示されていたこの画像にかかるタイトルですがこのスマートフォン用の CSS ではこちらこの dt タグがその画像にかかるタイトルの要素になるのですがスマートフォン用の CSS ではこのように非表示にしています。あとは通常通りこのスマートフォン用のデザインに合わせて CSS のコーディングを行っていくわけですねそれでは最後に今の状態をブラウザでプレビューしてみましょうかブラウザでプレビューはこちらの地球のアイコンをクリックしてこの「 Chrome 」ブラウザを開きましょう。すると表示されましたね今回の部分はこちらです。このコンテンツ部分、このように今回はスマートフォン用のスタイルシートの設定しか行っていませんのでこういった形でスマートフォンと同じデザインで表示されていますね。それでは「デベロッパーツール」を出して、こちらですね これを出した上で画面を縮めていってみましょう。 このようにずーっとしていくとこの状態でタブレットですね。タブレットに切り換わりました。タブレットの方もこのようにスマートフォンと同じレイアウトに今はなっていますね。そしてこれがスマートフォンですね、このようになっています。さて先ほどダウンロードしてきたファイルの中にある「 contents_sp 」フォルダーの中の「 HTML 」フォルダーこちらのフォルダーの中にはまだ今回のスマートフォン用のスタイルシートの実装を行っていないファイルが入っていますのでぜひご自身で今回のレッスンを参考にしながら一度 CSS コーディングを行ってみてください。以上で今回のレッスンは終了です。今回は Dreamweaver を使ってレスポンシブ Web デザインに対応したコンテンツ部分のスマートフォン向けのスタイルシートの調整手順について解説いたしました。次のレッスンではこの部分のタブレットと PC 端末向けのスタイルシートの調整方法について解説しているのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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