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

第2回「ライブビューの作業でも、デザインビューのペーストスペシャルを活用するんだ!」



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


[01]
段落の次は、見出しを入れてみよう。

アプリケーションメニューの[ライブ]をクリックして、コードビューを閉じましょう。
コードビューを表示した状態で、次の操作を実行すると、「見出しの中に段落が入る」なんて、おかしなことになるので、そうならないように閉じておくんだ。

続けて、DOMパネルの「p」タグをクリック!





[02]
HTMLの見出しは、6つのレベルがあるんだ。
大見出し(レベル1)、中見出し(レベル2)、小見出し(レベル3)、みたいな感じで。
だから、選ばなきゃいけない。

今は、ページのタイトルとして追加したいのでレベル1を選ぶ。
挿入パネルの[見出し]の小さな三角アイコンの部分をクリックして、メニューから[H1]を選びましょう。

何か出てきたね。
これは、「どこに挿入するんだい?」と聞いてるの。

DOMパネルの「p」タグを選択しているでしょう。
この段落の上に見出しを置きたいんだから、[前]をクリック!





[03]
見出しが入った!
レベル1の見出しを選んだので、デカイね。
見出しの大きさは後で変更できますから安心してください。

DOMパネルを見てくだい。
「p」タグの上に、「h1」タグが追加されています。





[04]
次は、記事の見出しを入れたい。
つまり、レベル2の見出しだ。

[見出し]の小さな三角アイコンの部分をクリックして、メニューから[H2]を選ぼう。

また出てきたね。
タイトルの下に、記事の見出しを追加したいのだから、[後]だよね。クリックしてください。





[05]
記事の見出しも入ったぞ!
DOMパネルを見てごらん。タイトルの下にレベル2の見出し(「h2」タグ)が追加されてますね。





[06]
HTMLの内容を確認するよ。
アプリケーションバーの[分割]をクリックしてください。

どうですか?
HTMLに見出しのタグが記述されてますね。

タグの位置が多少ずれていても気にしないでください。</div>が、</p>の後ろにあったり、<p>と<h1>、<h2>の頭が揃っていなかったり、作業の手順で変わりますので。
コードの内容は問題ありません。





[07]
では、見出しと段落の文章を入れていきましょう。
ダウンロードしたフォルダの中に「Sample-Text.txt」というテキストファイルが入ってるので、ダブルクリックして開いてください。

まず、1行目の「Responsive Web Design」をドラッグして選択、右クリックでメニューから[コピー]を選びましょう。これがタイトルです。





[08]
タイトルのダミーと入れ替えるので、「これは、レイアウト H1 タグのコンテンツです」の部分をドラッグして選択、右クリックでメニューから[ペースト]を選ぼう。

入れ替わったね!

ライブビューの画面でも、テキストの編集はできるんだけど、コードビューを使った方が早いんだ。

ライブビューって、ウェブブラウザーで表示した状態で編集できるのが最大の利点なんだけど、すごい複雑な計算をしていて、処理が重たいんですよ。
テキストの編集をしたいなら、コードビューが軽いし、早い。

ただ、謝ってタグを削除しないように注意してね。






[09]
次は、記事の見出しだ。
テキストファイルの中の「レスポンシブ・アーキテクチャの概念から生まれた「レスポンシブWebデザイン」というアプローチ」部分をドラッグして選択、右クリックでメニューから[コピー]を選ぼう。

コードビューで、「これは、レイアウト H2 タグのコンテンツです」の部分をドラッグして選択、右クリックでメニューから[ペースト]!

はい、入れ替わった!






[10]
最後は段落の文章。
テキストファイルの中の、見出し以外のすべての文章を選択して、コピーしてください。

ここからの作業は、デザインビューが便利なので、切り替えましょう。
アプリケーションメニューの[ライブ]をクリックしてから、三角形のアイコンをクリック、メニューから[デザイン]を選びましょう。






[11]
段落の行をダブルクリックして選択状態にしてください。
続けて、編集メニューの[ペーストスペシャル]を選びましょう。

実は、この[ペーストスペシャル]を使いたかったので、わざわざデザインビューに切り替えたのです。





[12]
ダイアログが表示されますので、[構造(段落、リスト、テーブルなど)付きテキスト]がチェックされていることを確認して、OKをクリック!

どうです?
サンプルファイルと同じ状態でペーストされたでしょう。

これ、ライブビューやコードビューを使ってしまうと、改行が無くなって、大変面倒な作業になっちゃうんですよ。






[13]

さぁ、もうデザインビューの役割は終わったので、アプリケーションメニューの[ライブ]を選択してください。

ペーストした文章を見てください。
ちゃんと、複数の段落になっているでしょう。

ただ、2つほど「小見出し」に変更したい行があります。
この作業は、ライブビューが便利!






[14]
まず、「人間の行動にあわせて建築物が「適応」する」の行です。
クリックしてください。
[エレメントディスプレィ]が表示されて、「p」タグが付いてますよね。

ハンバーガーアイコンと呼ばれる左端のアイコンをクリックしてみましょう。

ポップアップが表示されます。
[形式]のポップアップメニューアイコンをクリックしてみてください。見出しレベルのメニューが出てくるでしょう。

そう、ここで段落から見出しに変更できるんですよ、すごい便利でしょう!
記事の「小見出し」(レベル3)にしたいから[h3]を選んでください。

なお、ポップアップを消したい場合は、ハンバーガーアイコンをもう1回クリックしてくださいね。





[15]
もう1つは、「レスポンシブ・アーキテクチャから狭義のレスポンシブWebデザインへ」の行です。
まったく同じ手順なので、問題ないですよね。

行をクリックして選択、[エレメントディスプレィ]のハンバーガーアイコンをクリックして、[形式]のポップアップメニューから[h3]を選んでください。





[16]
これで、テキストの要素が揃いました。
保存をしておきましょう。ファイルメニューの[保存]を選んでください。





さぁ、どうでしたか?
今回は、デザインビューも使いましたが、「速く!」「正確に!」って考え方がないと、無駄な作業を増やしてしまうんですよ。

効率よく使い分けていきましょう!


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


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


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

Dreamweaver CC 2015 基礎編パート1



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



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




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

筆者:
Creative Edge School Books