中学生のためのレスポンシブWebデザイン

第1回「HTMLのbodyの中に「コンテナ」を置いて「段落」を入れてみよう!」


完成データについては、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページにアップロードしてありますので、参考にしてください。



基礎編パート1の達成目標:

・Dreamweaverのライブビューの基本的な使い方を理解すること
・HTMLやCSSの基礎を理解した上で、DOMパネル、CSSデザイナーが使えるようになること
・レスポンシブWebデザインのページを理解し、上記の機能で作成できること




第1回の授業(テキストキャスティング)を開始します!


[01]
まずは、第1回の素材データ[DW-textcast-2-01.zip]をダウンロード!

ダウンロード:

ZIP圧縮されてますので解凍して、フォルダを開きましょう。
「MyLP」フォルダが入ってますので、デスクトップ上にコピーしましょう。





[02]
Dreamweaverを起動しよう!

まず、「サイトの定義」という作業があるんだけど、オンライン講座の第2回「サイトを定義する( http://design-zero.tv/Dreamweaver/index.html#wc-vol02 )」で、かな~り詳しく解説してるので省略するよ!
第2回の講座を観て、サイトの定義をしてね。

サイトが定義できたら、新しいページを作成しましょう。
ファイルメニューの[新規]を選択、フレームワークから[Bootstrap]を選び、[Bootstrap CSS:]の[新規作成]をクリック、続けて[作成]をクリックします。

ファイルメニューの[保存]を選び、「index.html」という名前で保存してください。
ここまでは、第2回の講座を観て、手順通りに進めれば問題ないでしょう!





[03]
今回は、ライブビューの習得が目的だから、HTMLやCSSは書きませんが、HTMLの構造やCSSの基礎知識は必要なので、必要に応じて、コードビューも使いますからね。

アプリケーションバーの[分割]をクリックしてみよう。
下半分の領域に、コードビューが表示されますね。

これが、HTMLだ!






[04]
DOMパネルの「body」をクリックしてください。
これを「タグ」と呼びます。
次から、「body」タグって呼んでいきますから、覚えておいてね。

クリックする度に、変化するでしょう。

タグの名前の部分をクリックすると、折り畳まれたり、展開したりするんだ。
タグの外側(右側)の領域をクリックした場合は、変わらない。
ここ、重要です。





[05]
DOMパネルの「body」をクリックすると、HTMLはどうなってる?

<body>から</body>まで選択されてるよね。
つまり、DOMパネルっていうのは、HTMLのタグを選択したり、編集するための機能なんだ。





[06]
今度は、上のライブビューの画面を見てごらん。
何か表示されているでしょう。

これ、[エレメントディスプレィ]って呼びます。

ウェブページは、ウェブブラウザーで閲覧しますけど、Dreamweaverのライブビューって、ウェブブラウザーに表示した状態と同じなんですね。

[エレメントディスプレィ]っていうのは、ウェブブラウザー上でHTMLを編集するための、とても便利な機能なんです。

[エレメントディスプレィ]に「body」タグが付いてるでしょう。
現在、bodyというHTMLのタグが選択されているってこと。





[07]
ウェブブラウザーに表示するテキストや画像は、bodyの中(<body>から</body>まで)に挿入していきます。現在、挿入できる状態になっています。
ここまでは、よいですね。

それでは、この中に「コンテナ」を置きましょう。
コンテナって、ほら港に行くとたくさん積まれてるよね、あれをイメージしてよ。
大きな箱だと思ってもいい。

挿入パネルのタブをクリックして、パネルを表示してください。
そして、ポップアップメニューから[HTML]を選びましょう。





[08]
一番上の[Div]、これがコンテナだ。
クリックしてみよう!

どうなった?

何か挿入されたね。
コードビューを見ると「<div>新規 div タグの内容がここに入ります</div>」という1行が追加されています。





[09]
文章はダミーだから、削除しますよ。
コードビューを使えば、簡単に削除できます。

「新規 div タグの内容がここに入ります」の部分だけ、ドラッグして選択して、Deleteキーを押してください。





[10]
続けて、挿入パネルの[段落]をクリック!

どう?
コンテナの中に、「<p>これは、レイアウト p タグのコンテンツです</p>」というのが挿入されてる。

この「p」というのは、パラグラフの頭文字で「段落」を意味します。
つまり、コンテナの中に1つの「段落」が入ったんだ。





ここまでは大丈夫かな?
HTMLのことがわかってきたら、もうコードビューを見なくても、ライブビューだけで作業できるようになるから!


それでは、第2回の投稿をお待ちください。
次の投稿が何時頃になるかは、交通機関次第!


完成データは、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページにアップロードしていきますので、参考にしてください。


今回のテキストキャスティングは、こちらのオンライン講座の追加コンテンツです

Dreamweaver CC 2015 基礎編パート1



関連記事:
Dreamweaver/Museのカテゴリーページ:



関連コンテンツ:
Muse CC 2015 ビジネスガイドブック




シンクゼロマガジンとは?

筆者:
Creative Edge School Books