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

フッターのHTMLコーディング(グリッド枠外への配置)

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

ぜひご覧ください。

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

字幕

このレッスンではこれまでのレッスンに引き続き Dreamweaver でレスポンシブ Web デザインを制作していく中でのフッター部分の HTML コーディングについて解説していきます。まずはダウンロードしてきたファイルの中にある「 footer_html 」の中の「 HTML (完成版)」こちらのフォルダーの中にこちらのフォルダーの中に「 index.html 」こちらが入っていますのでこれを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。このファイルは今回のレッスンでご説明するフッター部分の HTMLこちらの部分についてすでに実装を終えているファイルとなっています。このレッスンではこのファイルを実際に目で追いながらどのように HTML コーディングされているかいくつかのポイントを確認していきたいと思います。それでは早速レッスンを始めていきましょう。それでは今回制作していくフッター部分のデザインについてあらかじめ確認をしておきましょう。同じようにダウンロードしてきたファイルの中にあるこちらの「デザイン」フォルダーこちらの中に「 PC 」「タブレット用」「スマートフォン用」の3つ画像ファイルが入っていますのでこちらを開いてみましょう。 まずはスマートフォン用のデザインから見ていきましょうか。こちらがスマートフォン用のデザインですね。今回制作していくフッター部分はといいますとこちらの部分ですね。シンプルに茶色い帯とその中にコピーライトが書いている状態です。次にタブレット用を確認してみます。するとこのようになっていますね。スマートフォン用に比べると帯の色が変わったのと後はこちらのフッターにナビゲーションが付いていますね。そして PC 用のデザインも見てみます。PC においてはこのように要素が横並びになっていますね。これらを踏まえた上で今回のHTML コーディングについて見ていきたいと思います。それでは Dreamweaver に戻ります。さて Dreamweaver ではこちらの左側にソースコード要するに「 index.html 」が開かれている状態ですね。そしてこちらのデザインビューに関してはこちらのスマートフォンの画面サイズに切り換えておきましょう。こちらをクリックしておきます。それではフッター部分に該当するHTML の部分を見ていきましょう。こちらのソースコードの中の下の方ですね、こちらになります。このコメントで「 footer 」と書かれてあるところですね。 そしてデザインビューの方はこちらもこの部分ですね、このピンクの色が付いた部分。それではこちらの HTML の方を見ていきましょう。まず今回のフッター部分大きく分けて2つの要素に分かれます。それはフッター内にあったナビゲーション部分と、そしてコピーライトの部分ですね。この2つです。この2つをこの footer タグの中に書いています。まずナビゲーションの部分をこちらのナビゲーションのタグですね。こちらで囲った上で ul そして li タグでリスト形式でコーディングしています。そして下のコピーライトの部分こちらは p タグと small タグを使っていますねさてこちらのフッターのナビゲーション部分ですがスマートフォン用には表示は無かったですがタブレット用と PC 用には表示がありましたね。このように端末によって表示する項目が異なる場合はこれらすべてを考慮した上で要するに含めた上でコーディングをしておくと効率的に進めることができます。ですので HTML 上ではこちらのフッターのナビゲーションもコピーライトの方も両方書いているといった状態ですね。それ以外はいたって普通のコーディングとなっていますが1点だけ注意しておきたいことがあります。 それは何かと言いますと実はページ内の他の要素。例えばグローバルナビゲーションですとかサイドメニュー部分とかですね。そういった部分は実はこちらの div ですねdiv の中に書かれています。これは「 div class="gridContainer" 」と呼ばれる Dreamweaver が最初の段階で吐き出してくれるタグなのですがこのタグの中にヘッダーやグローバルナビゲーションや画像、メイン画像ですねとかも配置しているような状態です。ただし今回のフッターに関してはこの様に「 div gridContainer 」ですね。そちらの外にあえて出しています。これはなぜかという理由ですがその答えはデザインの方に隠れています。それではもう一度デザインの方を開いてみましょうか。はいこれが PC 用のデザインになりますがこのようにサイトの横幅ですね、サイトの横幅からこちらの茶色い帯がはみ出してブラウザの表示領域の横幅一杯に表示させたいこういった場合は「 div class="gridContainer" 」の外に出してあげる必要があります。他のデザインも確認してみましょうか。タブレット用もこのように左右がサイトの横幅を超えていますね。 そしてスマートフォン用もちょっと分かりづらいですが実は横幅を超えています。フッター部分に限った話ではないですがこのように画面の横幅一杯に表示させたいときなどは「 div class="gridContainer" 」の外に書いてあげるようにしましょう。それでは Dreamweaver に戻ります。以上で今回のフッター部分に関する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宛までご連絡ください。