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

グローバルナビゲーション&メイン画像のHTMLコーディング

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

ぜひご覧ください。

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

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのグローバルナビゲーション部分およびメイン画像の HTML コーディングについて解説していきます。まずはダウンロードしてきたファイルの中にある「 navi_html 」というフォルダーの中の今回は「 HTML(完成版)」のフォルダーの中の「 index.html 」こちらを Dreamweaver で開いておいてください。そしてこの画面がそのファイルを開いた状態となっています。このファイルを使って今回のレスポンシブ Web デザインのHTML コーディングについて解説していきます。それでは早速レッスンを始めていきましょう。まずは今回 HTML コーディングするグローバルナビゲーション部分とメイン画像部分のデザインの方を確認しておきましょう。デザインの方は同じくダウンロードしてきたファイルの中にある「デザイン」フォルダーの中に「スマートフォン用」「タブレット用」「 PC 用」の3つが入っていますのでそれを開いて確認します。これがそのファイルを開いた状態ですね。これが PC のデザインそしてこちらがタブレット用のデザイン、そしてこちらがスマートフォン用のデザインです。 今回はこちらのグローバルナビゲーション部分とこちらのメイン画像ですね。こちらの部分のHTML コーディングしていきますのでそれぞれの端末用のデザインでどのようになっているかその構成を確認しておきます。まずスマートフォン用のデザインはこのようにグローバルナビがリスト形式、そして画像が少しサイトの枠よりも小さい形で表示されていますね。そしてタブレット用のデザインはこちらこちらのデザインになるとグローバルナビゲーションが横並びになります。そしてこちらのメイン画像はサイトの横幅一杯に表示されていますね。そして PC 用、PC 用もタブレット用と同様の形になっていますね。それではこれらのデザインを踏まえてHTML コーディングをやっていきたいと思います。それでは Dreamweaver に戻ります。はい Dreamweaver に戻りました。さて現在開いていただいているこの「 index.html 」ですがすでにグローバルナビゲーション部分とメイン画像部分、こちらの HTML コーディングが済んでいる状態のファイルとなっています。今回はそのすでにコーディングしてある内容を見ながらどのように HTML コーディングしているか確認していきましょう。 今 Dreamweaver の左の画面がコードビューそして右がデザインビューですね。そして画面サイズはスマートフォン用の画面サイズになっています。それでは確認していきましょう。まずこちらのグローバルナビゲーション部分ですね、こちらの方どのようにHTML コーディングしているかというと一番大枠のナビゲーションタグですね。「 id="gnavi"」というものです。こちらの中に新たに ul タグを入れてリストを形成しています。その ul タグには「 id="navi"」を付けていますね。そしてその中に先ほどのデザインに基づいた各メニューですね。こちらをリストと a タグこれらで構成しているような状態となっています。そしてこちらのメイン画像部分の方もコーディング見ていきたいと思います。それはこの「 section id ="mainimg"」というタグの中に画像を格納するための p タグですね。この p タグを入れて更にその中にでイメージタグを入れています。この p タグは後ほどこの画像イメージですね。この画像イメージを表示上横軸にセンタリングするために付けています。以上でこのグローバルナビゲーション部分とこちらのメイン画像部分のHTML コーディングは完了となります。 内容的にはいたってシンプルですね。特にこの段階ではレスポンシブを考慮する必要はなく普段通りにコーディングしていただければ大丈夫です。それでは念のため他のサイズですね、他の画面サイズでも確認してみたいと思います。今はスマートフォン用のサイズになっていますね。こちらを今度はタブレット用に変えてみます。するとタブレット用ちょっと見づらいですね、デザインビューを大きくしておきましょう。タブレット端末用もこのような形で現在はスマートフォンと同じようなレイアウトになっています。そして PC 用、こちらも同じですね、まだスタイルシートが反映されていないのでスマートフォン用と同じような形で表示されています。それではスマートフォン用に戻っておきましょう。そしてコードビューも出しておきます。さて以上で今回の HTML コーディングについての解説は終了となりますが先ほどダウンロードしてきたファイルの中には通常のこちらの「 HTML 」フォルダーの中にはこの今回の HTML コーディングをまだ実装していないファイルが入っているのでぜひご自身でこのレッスンを参考にしながらHTML を作ってみてください。以上でレッスンは終了です。 今回は Dreamweaver を使ってグローバルナビゲーション部分とメイン画像部分の HTML のコーディングについて解説いたしました。次のレッスンではこの部分をスマートフォン端末に向けたスタイルシートの調整方法についても解説しているのでそちらも合わせて参考にしてみてください。

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

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

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

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

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

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