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

サイドメニューのHTMLコーディング

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

ぜひご覧ください。

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

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのサイドメニュー部分の HTML コーディングについて解説していきます。まずはダウンロードしてきたファイルの中にある「 side_html 」というフォルダーの中のこちらの「 HTML (完成版)」こちらのフォルダーの中に「 index.html 」が入っていますのでこちらを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。このファイルは今回のレッスンでご説明するサイドメニュー部分の HTML コーディングについてすでに実装を完了しているファイルとなっています。今回はこのファイルを実際に目で追いながらどのようにレスポンシブ Web を考慮したHTML コーディングをしているかについていくつかポイントを確認していきたいと思います。それではレッスンを始めていきましょう。まずは今回実装するサイドメニュー部分についてPC タブレット スマートフォンそれぞれのデザインがどのようになっていたか先に確認しときましょう。同様に先ほどダウンロードしてきたファイルの中にある「 side_html 」の中の「デザイン」フォルダーこちらに3つの端末向けのデザインが入っていますのでこちらを開いて確認してみましょう。 これがそれらのファイルを開いた状態ですね。では順番にまずはスマートフォン用のデザインから見ていきたいと思います。まずスマートフォンのサイドメニュー部分はというとこちらのところですね。このボタンが3つ並んだ部分とこちらの「お問い合わせ」の部分こちらがちょうどサイドメニューの部分にあたります。スマートフォンではこのようにボタンが3つ縦に一列に並んでいますね。そして「お問い合わせ」のボックスがあってその中にボタンがあります。それではタブレットの方を見てみます。タブレットの方はといいますとこのようになっていますね。先ほどと表示している内容自体は同じなのですがレイアウトが縦並びから横並びに変わっていますね。こちらを覚えておきましょう。そして PC 用を確認してみます。こちらが PC 用ですね、PC 用はちょうどこの部分でツーカラムに変わっていますがそれ以外で見てみますとほとんどスマートフォン用のデザインと変わらないことが分かりますね。これも覚えておきましょう。それでは Dreamweaver に戻ります。それでは実際にこのファイルを見ながらどのように HTML コーディングをしているか確認していきます。 まず左にコードビューですねこちらのコードビューにはソースコード要するに「 index.html 」が表示されている状態です。そしてこちらがデザインビューで今のデザインの表示モードはスマートフォン用のサイズになっていますね。それでは確認していきます。まずデザインビューですとちょうどこのギャラリーの下こちらの部分になりますね。そしてコードビューはといいますとこちらの「 side 」とコメントが打ってあるこちらの aside タグの中ですねこの部分がちょうどこの部分にあたります。今回のこのサイドメニュー部分のHTML コーディングに関しては先ほど確認した通り各端末向けのデザインそれぞれに大きな違いはなく掲載内容自体はほとんど一緒むしろすべて一緒でしたね、ただそのレイアウトが違っているだけでした。ですので今回の HTML コーディングに関しては普段通りのコーディングの方法でよろしいかと思います。それではこの HTML ファイルではその部分をどのようにコーディングしているか確認しておきましょう。まず上部の3つのボタンこの部分に関しては ul タグで作っていますねul タグの中に li タグを3つ作ってそこに各項目を設置しています。 そしてその下にあったお問い合わせ部分に関してはdl タグで作っています。その dl タグの中に dt dd dd を置いてそれぞれにタイトルやテキストそしてリンクを設置していますね。このサイドメニュー部分に関してはこの HTML コーディングの段階では特に注意すべき点もあまりないですね。普段通りにコーディングしておけば大丈夫です。それでは念のためこの Dreamweaverのライブビューで現在の各端末での見え方を確認しておきましょう。まずこちらでライブビューに切り換えてそして画面を大きくします。まずはスマートフォン用ですね。このように見えていますね。そしてタブレット用、タブレット用に関しても同様にこのような形ですね。そして PC 用です PC 用に関してはこちらにコンテンツが入っていますね。内容的にはまだHTML コーディングした段階ですのでこういった形になっています。以上で今回のサイドメニュー部分のHTML コーディングについての解説は終了となります。先ほどダウンロードしてきたファイルの中こちらの中のこの通常の「 HTML 」フォルダーの中ですね。こちらの「 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宛までご連絡ください。