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

ヘッダーコンテンツのHTMLコーディング

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

ぜひご覧ください。

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

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していく中でのヘッダーコンテンツ部分の HTML コーディングの手順について解説していきます。まずはダウンロードしてきたファイルの中にある「 header_html 」こちらのフォルダーの中の「 HTML 」の中に「 index.html 」が入っていますのでこちらを Dreamweaver で開いてください。そしてこれがそのファイルを開いた状態です。そして今回のコーディングも架空のサイトのデザインに沿って行っていきます。その架空のサイトのデザインも同様にダウンロードしてきたファイルの中にある「デザイン」というフォルダーの中に3つPC 用とタブレット用とスマートフォン用のデザインが入っていますのでこちらも開いておいてください。それらのファイルを開いた状態がこちらとなります。PC 用 タブレット用スマートフォン用という形になっています。こちらを参考にしながら進めていきます。それでは早速レッスンの方を始めていきたいと思います。さて始めに今回コーディングしていくヘッダーのコンテンツ部分の内容をデザイン上で確認していきましょう。 まずは PC 用ですね、ヘッダーはこちらのグローバルナビの上の部分ですね、こちらの枠内です。こちらの内容を確認してみると PC 版ではこのようにロゴマークが1つあります。そしてタブレット用も同様にロゴマークが1つそしてスマートフォン用もロゴマークが表示されていますね。それではこれに従ってこのロゴマークの部分をコーディングしていきたいと思います。それでは Dreamweaver に戻ります。さて Dreamweaver では今こちらがコードビューそしてこちらの右の方がデザインビューそしてこのデザインビューはスマートフォン画面のサイズで表示されている状態ですね。それではここにコーディングをしていきたいと思います。まずヘッダーの部分ですね。ヘッダーの部分はデザインビュー上ですとこちらの部分となります。ちなみにこちらのこのボタンこのボタンをクリックするとエレメントクイックビューを開くことができます。そしてこちらの body の部分をダブルクリックするとこのようにその body の中に含まれている要素が出てきます。さらにクリックするとこのように出てきますねこの中から header タグを選ぶことで、この枠の部分を選択状態にすることができます。 それではこちらの部分の内容がまず不要になりますのでこちらの部分のテキストを削除しましょう。このように削除していきます。そうするとこのようにデザインビュー上からもその先ほどのテキストが消えてこちらのコードビューの方でも header タグの中身が空っぽになっていますね。それではまずこちらの header タグの中を1回クリックしてこのようにカーソルを置いておきます。その状態でこちらの「挿入」パネルからまずセレクトボックスで「構造」を選択します。そしてこの中にある「見出し」というボタンをクリックします。クリックするとこのようにH1 H2 と出てきますので今回は H1 を選びます。すると「 H1 を挿入」というダイアルが出てくるのでこの「可変エレメントとして挿入」のチェックが外れていることを確認してOKボタンを押します。ちなみにここで「可変エレメントとして挿入」をチェックをしてしまうとログ画像が画面の横幅一杯に表示されてしまうため今回はチェックは無しで大丈夫です。それではOKボタンを押します。するとこのように H1 タグが挿入されましたね。それでは次にこの H1 タグの中のこのテキストですね。 このテキストを消して画像を挿入したみたいと思います。同様にこちらの中のテキストを消していきます。そしてこちらの「挿入」パネルからセレクトボックスを選択して「一般」をクリックします。そしてこの中の「イメージ」というものをクリックします。するとこのようにイメージを選択するダイアログが出てきますので今回はダウンロードしてきたファイルの中にあった「 index.html 」と同じ階層の中にある「 images 」フォルダーの中の「 logo.png 」を選択した状態で開くを押します。するとこのように画像が挿入されましたね。あとはこの image タグですね imageタグの alt 属性にこちらの画像に書かれているテキストと同じものを入れておいてあげましょう。alt タグを設定するためにはコードビューで直接書いても大丈夫なのですがこちらの「プロパティ」ですね。プロパティのこちらに「代替」というテキストボックスがありますのでこちらに打ってあげましょう。「 AUSTRIA TRAVEL GUIDE 」ですね、と打ってあげます。そうするとこのように alt 属性に内容を入れることができました。あとは先ほど設置した H1 に ID を設定しておいてあげましょう。 コードビューの H1 の部分を選択した状態でこちらの「プロパティ」パネルのHTML をクリックします。するとここに「 ID なし」という状態になっているのでここに「 logo 」と入れておいてあげましょう。するとこのように H1 タグの中にid="logo" というものが入ってきましたね。以上でヘッダーの部分のコンテンツのHTML コーディングは完了となります。念のため最後にこちらのデザインビューの画面サイズを切り替えて他のサイズでも問題なく反映されてるかどうか確認してみたいと思います。今はスマートフォン端末のサイズで見ていますね。ではこちらの隣のタブレットのボタンを押します。すると同様にこちらも入っていますね。そしてこちらの PC サイズこちらも同様に入っていますね。それではスマートフォンに戻しておきます。以上でレッスンは終了です。今回は Dreamweaver を使ってヘッダーコンテンツ部分の HTML コーディングの手順について解説いたしました。次のレッスンではこの部分のスマートフォン端末に向けたスタイルの調節について解説していきますのでそちらも合わせて確認しておきましょう。

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

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

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

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

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

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