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

新規ドキュメントの作成(可変グリッドレイアウト)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ページデザインが決まれば、次は、実際にHTMLコーディング制作に取り掛かっていきます。このレッスンでは、Dreamweaverを利用して、レスポンシブWebデザインを制作する際に、はじめの作業である新規ドキュメントの作成方法について、解説致します。
講師:
08:50

字幕

このレッスンでは Dreamweaver でレスポンシブ Web デザインを制作していくにあたりまずはその始めのステップである新規ドキュメントの作成について解説いたします。まずはダウンロードしてきたファイルの中にある「 newdoc 」というフォルダーの中に入っているこれら3つの画像ファイルを開いておいてください。そしてこの画面がそれらのファイルを開いた状態です。これらのファイルは今回のレッスンで利用する架空のレスポンシブ Web デザインの提示デザインとなっています。それぞれ PC 用タブレット用スマートフォン用と3つがありますね。これらを参考にしながら今回のレッスンを進めていきたいと思います。それではレッスンを始めていきましょう。まずはレスポンシブ Web デザインをDreamweaver で作成するにあたりDreamweaver を立ち上げましょう。そしてこれが立ち上げた画面ですね。ここからレスポンシブ Web デザインを制作する第一歩となる新規のドキュメントの制作をやっていきたいと思います。レスポンシブ Web デザインをDreamweaver で作るにあたって新規作成するファイルそれはこちらの「可変グリッド」というボタンを押すことによって作成することができます。 それでは押してみましょう。するとこのような画面になりましたね。Dreamweaver ではレスポンシブ Web デザインを作るにあたって「可変グリッドレイアウト」というページの縦線にグリッドを引いた仕組みの中でコーディングを行っていきます。この画面ではそのグリッドの設定を行うことができます。デフォルトではこのようにモバイルでは4つのグリッドタブレット端末向けには8つのグリッドデスクトップ向けには12のグリッドこのような設定になっています。その他にも各グリッドの間の列幅のパーセント指定、そして各端末に向けたモニターサイズに対してのサイトの表示幅を設定することができます。このようなグリッドの数などは始めのうちはどのようにしていいか分からないといったことがあるかもしれませんが基本的には制作したいウェブデザインページのデザインですね、に即した形で設定すれば大丈夫です。それでは先ほどの画像ファイルをもう一度見てみましょう。例えば PC 用 PC 用ですとこのような感じのレイアウトですね、グリッドの数を考える時はこのサイトの中の一番大きな枠組みですね、コンテンツごとの一番大きな枠組みの所を中心にみておけば大丈夫です。 例えば PC サイトですとこういう風な形で上の部分は1カラムそしてこの辺りまで来ますと2カラムですね。特にこの辺りですね。そして最後フッターになるとこのように1カラムに戻るとそしてタブレット用ですとほぼ1カラムですね、大きなコンテンツごとに1カラムになっています。そしてスマートフォン用のサイトも1カラムですね。この辺りを参考にしながらグリッドの数などを設定していきます。それでは Dreamweaver に戻ります。今回の場合はこちらの値を8としてここを 80 %としておきます。そして次にこちらの「ドキュメントタイプ」これは HTML のバージョンですね。こちらを選択することができます。今回は HTML5 でよいでしょう。そしてここまで選択しましたらこちらの作成ボタンを押します。押してみましょう。するとこのように「スタイルシートファイルを別名で保存」というダイヤログが出てきますのでこちらでスタイルシートの名前を決めます。ここでは style.css としておきましょう。そして保存先ですね保存先を決めて「保存」をします。そして保存ができますとこのような形で画面に表示されてきます。この状態になりましたら一度この.html ファイルを保存しておきましょう。 「ファイル」を押してそして「保存」をします。するとこのように.html ファイルの名前を聞かれますのでこちらで今回はindex.html としておきます。そして保存先を先ほどの CSS と同じフォルダーの中に入れておきましょう。こちらで「保存」をします。すると次にこのように「可変グリッドのデザインには次の依存ファイルが必要です」というダイヤログが出てきます。これはそのまま「 OK 」で大丈夫です。するとここに index.html という形で自分でつけた名前が入ってきましたね。これで保存が完了した状態となります。そしてその下この部分にはですね、今回生成されたファイルが並んでいます。今はこちら .html ファイルですね。そしてこちらこちらは「 boilerplate.css 」といいまして先ほどダイヤログで出てきた依存ファイルの1つですね。こちらの「 boilerplate.css 」これはブラウザー間のHTML の描画の違いを吸収して統一してくれるものになります。そして次はこちらの「 style.css 」こちらは先ほど自分で名前をつけた.css ファイルですね。レスポンシブ Web デザインを制作していくにあたってスタイルシートはこちらの「 style.css 」に書いていく形となります。 そして最後にこの「 respond.min.js 」こちらのファイルはですね、ズラっと何か暗号のようなものが書かれていますが、JAVA Script となっていまして古いブラウザー例えば IE 6 7 8といったものですね。そういったブラウザーに対してレスポンシブ Web デザインを作るにあたって必要な CSS3 の機能メデイアクエリというものを有効にさせるためのものです。本来であれば古いブラウザー IE 6から8はそのメディアクエリという機能は使えなくなっていますが、この「 respond.min.js 」というものを使えば古いブラウザーにも対応させることが可能といったものになっています。ただこちらのファイルに関しましてはブラウザーによっては制作した.html ファイルをローカルいわゆる PC 上で閲覧する場合そういった場合にはこの「 respond.min.js 」がうまく動作しない場合もありますので確実にチェックするためにはサーバーなどにアップロードして確認するのがベストです。このように Dreamweaver で「可変グリッドレイアウト」を選択して新規ドキュメントを作成した場合このように4つのファイルが自動的に生成されてきます。 その中でも主にこの「 index.html 」というものと「 style.css 」こちらを使いながらレスポンシブ Web デザインの作り込みを行っていく形となります。以上で今回のレッスンは終了です。今回は Dreamweaver でレスポンシブ Web デザインを作成するための第一歩となる「可変グリップレイアウト」での新規ドキュメントの作成について解説いたしました。自分でこれらのファイルを準備するとなるととても大変な作業ですがこのように Dreamweaver がレスポンシブ Web デザインを作成するにあたってとても便利なファイルを1クリックで生成してくれます。これは積極的に使っていくしかないですね。

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

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

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

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

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

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