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

コンテンツ部分のHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
予め作成しておいたコンテンツ部分のHTML枠内に、まずは、実際のコンテンツの中身をHTMLのみでコーディングして組み込んでいきます。このレッスンでは、そのHTMLコーディングの手順について解説していきます。
講師:
09:53

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのコンテンツ部分の HTML コーディングについて解説していきます。まずはダウンロードしてきたファイルの中にある「 contents_html 」こちらのフォルダーの中のそして「 HTML (完成版)」ののフォルダーの中のこの「 index.html 」、こちらを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。このファイルはこれまでのレッスンでこのヘッダー部分そしてグローバルナビ部分そしてこちらのメイン画像部分のコーディング及び各端末向けのスタイルシートの設定が完了している状態ですね。このファイルを使って今回はその続きのコンテンツ部分の HTML コーディングについて見ていきたいと思います。それでは早速レッスンを始めていきましょう。まずは今回 HTML コーディングをしていくコンテンツ部分がどのようなデザインになっていたか先に確認しておきましょう。同様にダウンロードしてきたファイルの中にあるこの「デザイン」フォルダー、こちらの中に「 PC 用」「タブレット用」「スマートフォン用」のデザインが入っていますのでこちらを開いてみます。 これがそのファイルを開いた状態ですね。これが PC 用で これがタブレット用そしてこちらがスマートフォン用ですね。では今回 HTML コーディングしていくコンテンツ部分ですがまずこちらのスマートフォン用デザインから見ますとこちらのテキストの部分と そしてこちらのギャラリー、要するにこの部分ですね。この部分のコーディングについて見ていきます。スマートフォン用ではテキストがあってそしてギャラリーが縦リストに並んでいますね。では次にタブレット用のデザインを見てみたいと思います。タブレット用になりますと同様にテキストの部分があってそしてこちらもギャラリー部分。スマートフォン用のレイアウトとはかなり異なっていますねこちら横並びに変わってそしてボタンが下に並んでいる状態です。そして各写真の上にはこのようにタイトルのようなものも付いていますねもう一度スマートフォン用を見てみましょうかスマートフォン用ですと各写真にタイトルは付いていないですが上に1つのタイトルが乗っていますね。それでは次に PC 用を見てみたいと思います。PC 用の部分ですとこのようになっていますね。ここからツーカラム構成になっています。 今回はこちらの部分ですね。左側のコンテンツ部分こちらの部分をコーディングしていきますが内容的にはタブレット用のレイアウトとほぼ同じですね。1つだけ違うのはこのテキストの左右にこのように 1px で縦線が入っているといった形でしょうか。それではこれらのデザインを踏まえてDreamweaver で HTML コーディングの方を見ていきたいと思います。それでは Dreamweaver に戻ります。はい Dreamweaver に戻ってきました。さて現在開いているこのファイルですが、例のごとくすでに今回ご説明するコンテンツ部分の HTML コーディングが完了しているファイルとなっています。こちらのデザインビューで見てみるとこのように入っていますね。もちろんスタイルシートの設定はまだです。それでは実際にコーディングしてあるこのファイルを見ながら一体どういった形でレスポンシブ Web デザインを考慮したコーディングの仕方をしているか確認していきたいと思います。それではこちらのコードビューの方を見ていきたいと思います。今こちらのデザインビューはスマートフォン用サイズになっていますね。この状態で見ていきます。 少しコードビューの方を大きくしておきましょう。さて今回のコンテンツ部分HTML コード上でいきますとこのあたりになります。このコメントで「 contents 」と書いている部分ですね。この中に書いていますねそしてこの中には大きく2つのセクションがあります。1つはこちらの「 section id="intro" 」ですね。これが先ほどのデザイン上で確認したテキストの部分です。こちらですね、そしてもう1つこちらの「 section id="gallery" 」というところそれはこちらの写真を使ったデザインのところですね、このようになっていますね。さて実際コーディングしていくにあたってまずはこちらのテキストの部分。テキストの部分はスマートフォン用サイトタブレット用サイト、PC 用サイト、ほとんどが同じようなデザインだったためこちらは普段通りにコーディングしておけば大丈夫でしょう。細かな調整はスタイルシートを使って後ほど行っていきます。どのようにコーディングしているかだけ確認しておいてください。さてもう1つギャラリーの方ですね。こちらのギャラリーの方は少し注意しながらHTML のコーディングをしていく必要があります。 それはどうしてかと言いますとスマートフォン用のデザインとPC タブレット用のデザイン。その2つには大きくデザインの違いがあったのはもちろんのことなのですが注意しないといけないのはスマートフォン用のデザインで表示されているものがPC タブレット用のデザインになると表示されていない、もしくはその逆ですね。スマートフォン用では非表示になっているものがタブレット用のものだと表示されている要素があるこういった場合にはそれらすべてのデザインを考慮した上でHTML のコーディングを進めていくとあとでややこしいことにならずに済みます。ですので要するに PC 用、タブレット用、スマートフォン用、すべてに対応できるような形でHTML コーディングしていくわけですね。ですのでスマートフォンやタブレットなどでそれぞれ表示非表示のコンテンツがあったとしてもそれらを全部含めた上でコーディングしていきます。それでは今回実際どのようにコーディングしてるかといいますとまずギャラリーのところですね。スマートフォン用のサイトには大きく1つ「 gallery 」というタイトルがありましたね。それをこちらに h2 タグで書いています。 そしてスマートフォン用ですとその下にリストの形で縦に写真とメニューが並んでいましたね。それを含む div タグを作っておいてその中に各メニューを dl 要素で括って制作しています。そしてタブレット用 PC 用のデザインを思い出していただくと各写真の上にタイトルが乗っていましたね。これはスマートフォン用にはなかったものですがそれも考慮した上でこちらに dt でその写真の上に乗っていたタイトルの要素を作っています。そしてあとは写真とそのメニューボタンですね。それをこの1つの dl タグの中に書いている状態です。そういった各端末ごとに表示や非表示となっているような内容のものをあとから追加して HTML コーディングすることももちろん可能なのですが、それをやってしまいますと HTML の構造が非常に複雑になってきたりとあまり効率的ではない方法になってしまうので始めの内にPC 用 タブレット用 スマートフォン用すべてのデザインに目を通した上ですべての要素を含んだ形でHTML コーディングしておくとあとで楽になります。それでは今の状態をこちらの Dreamweaver のライブビューの方で確認しておきましょうか。 このようにライブビューにしてこちらのグリッドを外しておきます。これがスマートフォン用ですね、現在はこのような形になっていますね。そしてタブレット用を見ます。こちらも同じようにスタイルが設定されていないのでこんな感じですね。そして PC 用です。こちらも同様ですね。こちらだけツーカラムになるので今回コーディングしたこちらのコンテンツ部分は左側に寄っていますね。さて今回ダウンロードしてきたファイルの中にこちらの HTML コーディングをまだ実装していないファイルがこの「 HTML 」フォルダーの中に入っていますのでそちらを使ってぜひご自身でこのレッスンを参考にしながらHTML コーディングをしてみてください。以上でレッスンは終了です。今回は Dreamweaver を使ってレスポンシブ Web デザインに対応したコンテンツ部分の HTML コーディングについて解説いたしました。次のレッスンではこの部分をスマートフォン端末に向けたスタイルシートの調整方法についても解説しているのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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