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

主要コンテンツブロックのHTMLコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
まずは、制作するページデザインに合わせて、主要コンテンツ部分のHTMLのみのコーディングを行います。このレッスンでは、そのコーディングの手順について解説していきます。
講師:
10:28

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたりまずはウェブページの骨格となる主要コンテンツブロックのHTML コーディングについてその方法を解説いたしますまずはダウンロードしてきたファイルの中にある「 mainblock 」というフォルダーの中に「 HTML 」フォルダーというのがありますのでそちらの中の「 index.html 」こちらをDreamweaver で開いてくださいそしてこれがそのファイルを開いた状態ですこのファイルは Dreamweaver で「可変グリッドレイアウト」として新規で制作したドキュメントとなります今回はこのファイルを使って主要コンテンツ部分のコーディングの方法について解説していきたいと思いますそれではレッスンを始めていきましょう今回は架空のウェブサイトのページデザインを利用してそれを元にHTML コーディングを行っていきますそのページデザインですが同じくダウンロードしてきたファイルの中にある「 mainblock 」のフォルダーの中の「デザイン」というところにこれを開きますとこのような内容になっています1つは PC サイト用のデザインですねそしてもう1つがこちらタブレッド用のデザインそしてもう1つがスマートフォン用のデザインとなっていますさて今回 HTML コーディングしていく主要コンテンツ部分についてですがデザインの中の例えばヘッダーであるとかグローバルナビだとかこういったメインの大きな画像といったものを指します今回はそれらのページを構成する大きな枠組みの部分のブロックをコーディングしていく形ですそれではどういったブロックが必要なのか各端末向けのデザインも含めて確認していきたいと思いますまずはヘッダーですねそしてグローバルナビそしてメインの大きな画像そしてこちらのコンテンツ部分ですねそしてサイドメニューそしてフッターとなります他の端末向けのデザインも見てみましょうまずはタブレット用ですこちらも同様にヘッダーグローバルナビ そしてメインの画像そしてコンテンツ部分そしてこちらのサイドメニューに該当するものそしてフッターですね次にスマートフォンも確認しておきますこちらも同様にヘッダーグローバルナビメイン画像そしてメインコンテンツ部分そしてサイドメニューに該当する部分そしてフッターですねこのようにすべての端末で同じ主要となるコンテンツブロックが存在していましたので今回はそれに基づいて HTML をコーディングしてみたいと思いますそれでは Dreamweaver に戻りますさて HTML コーディングを始めていく前に事前設定をしておきましょうまず左側にはコードビューですねそして右側にはデザインビューですそしてデザインビューはこのようにスマートフォン向けモードが選択されていることを確認してくださいさてまずはこちらの初期状態で入っているデフォルトのこちらのコンテンツこちらを削除しておきましょうこちらを削除するにはこのブロックの中をクリックするとこちらにゴミ箱のアイコンが出てきますのでこちらをクリックしましょうするとこの部分が削除されましたねそれでは先ほどのページデザインに基づいて主要なコンテンツブロックのコーディングしていきたいと思いますがその前に1点注意事項がありますそれはこちらのコードビューの方ですねこちらのコードビューを見ていただくとこちらに「 div class="gridContainer 」という要素が存在していますこれから設置する主要コンテンツの HTML タグこれは必ずこの「 div class="gridContainer 」の中に書いていく必要がありますのでその点は注意してくださいそれでは早速主要なコンテンツブロックをコーディングしていってみたいと思いますまずこのコードビューでこのマウスカーソルを「 div class="gridContainer" 」の中に入れてくださいそしてその状態からまずは ヘッダー枠を作っていきましょうヘッダーを挿入するにはこちらの「挿入」パネルを使っていきますこちらの「挿入」パネルから「ヘッダー」というのがありますのでこちらをクリックしますするとこういった「 Header を挿入」というダイヤログが出てきますのでこちらで「 ID 」を選択しますそして例えば今回は「 header 」と打っておきましょうその後にこちら「可変エレメントとして挿入」と書いてますがこちらにチェックが入っていることを確認してくださいこちらにチェックを入れておくことでどのようなモニターのサイズ解像度ですねで閲覧したとしてもそのサイズに合わせて柔軟にこの HTML タグがサイズを変えてくれるようになりますこれはいわゆるリキッドレイアウトの考え方ですねそれではこの状態で「 OK 」ボタンを押しますするとこのようにヘッダータグが挿入されましたねデザインビューでもそしてこちらのコードビューの方でも挿入されているのがわかりますそれでは次にグローバルナビゲーション こちらの要素を入れてみたいと思いますまずはコードビューで先ほど挿入したヘッダータグ―の後にマウスカーソルを置いてそして先ほどの「挿入」パネルですねこちらからこの「ナビゲーション」というものを選びますすると同様にこのようなダイヤログが出てきますので同様に「 ID 」のところをクリックしてここではグローバルナビゲーションの略の「 gnavi 」と入れておきましょうそして同様に「可変エレメントとして挿入」がチェックされているのを確認した上で「 OK 」ボタンを押しますするとこのように先ほどのヘッダーの下に今度はこのように「 gnavi 」と ID のついたナビゲーションタグが出力されてますねこちらのコードビューの方でも同様ですこのような形でどんどんと主要なコンテンツブロックを配置していきます次はメイン画像ですねメイン画像を置いていきます同様に先ほど設置した「 Nav タグ」の後ろにマウスカーソルを置いてそのまま「挿入」タグのところから今回は「セクション」を選んでおきましょうそしてこちら「 ID 」を選択してこちらに「 mainimg 」と入れておきます「可変エレメントとして挿入」にチェックが入っているのでこの状態で「 OK 」すると同様にコンテンツが追加されました次はメインコンテンツ部分ですね同様に先ほどの「 Section 」タグの後ろにマウスカーソルを置いてこちらは「記事」ですねこちらをクリックしますそして「 ID 」に「 contents 」と入れておきましょうこちらにチェックが入っていることを確認して「 OK 」次はサイドメニューですねこちらも置いていきましょう「 article 」の後ろにマウスカーソルを置いてこちらのこれですね 「付加情報」「付加情報」をクリックしますそして「 ID 」のところに「 side 」と入れておきましょう「可変エレメント」がチェックですねそして「 OK 」そして最後にフッターです先ほどのサイドメニューのタグの後ろにマウスカーソルを置いて今度は「挿入」パネルから「フッター」を選びますそして「 ID 」こちらも「 footer 」としておきましょう「可変エレメントとして挿入」にチェックが入っていますのでこの状態で「 OK 」ですね以上で ページデザインに基づいた主要コンテンツ部分のHTML コーディングの枠の作成は完了しましたこのように完了するとこういった形でデザインビューに表示されて同様にコードビューですねこちらの方にもちゃんとHTML タグが出力されていますちなみにこの状態でこちらの画面ですね画面モードを切り替えてみましょうまずはこちらのタブレットクリックすると同様にこちらも入っていますねそしてこちらの PC モードこちらも同様に入っていますそしてスマートフォンに戻しておきましょう以上で今回のレッスンは終了です今回は Dreamweaver でレスポンシブWebデザインを制作するにあたってウェブページの骨格となる主要コンテンツブロックのHTML コーディングの方法について解説いたしましたこのようにデザインビューだけでほとんどの作業が完結しとても簡単でしたねまた先ほどこちらの画面モードを切り替えて確認してみましたが別のレッスンではこの主要コンテンツブロックのレイアウトを各解像度向け端末向けに調整する方法についても解説していますのでそちらも合わせて参考にしてみてください

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

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

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

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

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

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