コードを打たずにページを見たまま編集・作成 第2回：タグを挿入・複製しよう
Dreamweaver CC（2014年06月公開）
前回は、［ライブビュー］で画像の変更や文字の変更、タグ付けを行いました。今回は、［ライブビュー］で新しいタグを挿入したり、タグを複製する方法を解説します。
Dreamweaver CC の体験版をダウンロード サンプルファイルをダウンロード
追加するコンテンツ
最終的にページの右下辺りに（赤枠部分）、下図のようにボタン画像やバナー画像を入れていきます。これらの画像を追加するには、新しいタグを追加しながら作成していく必要があります。
この図ではCSSでレイアウトした状態になっていますが、今回はCSSを適用する手前までの作業を行います。
Dreamweaver CCで前回作業したindex.htmlを開いてください。なお、前回の作業を行ったサンプルファイル「toshinai_farm02.zip」も用意しています（上記「サンプルファイルをダウンロード」ボタンから入手できます）。
新しいタグを挿入する
新しいタグを挿入するには、まず挿入元になる要素を選択します。このときに便利なのが、画面左下にある［タグセレクター］です。［タグセレクター］には、現在カーソルが置かれている場所のタグ構造が表示されます。［タグセレクター］上のタグをクリックすると、［ライブビュー］でそのタグで括られている部分が選択状態となります。
画面中央に出ている「畑の様子」辺りをクリックした上で、［タグセレクター］で「section #farm.clearfix」をクリックします。すると、該当するsectionタグ部分に青枠が表示されます。
このsectionタグの次に新しいタグを挿入することにしましょう。［挿入］メニューから様々なタグを挿入できます。ボタン・バナー画像のエリアをasideタグでマークアップしたいので、［挿入］メニュー→［構造］→［付加情報］を選択します。
すると、［ライブビュープロパティインスペクタ］のそばに［前］［後］［折り返し］［ネスト］の4つのボタンが表示されます（表示位置は、状況によっても異なります）。
これらは、新しく挿入するタグを、現在選択しているsectionタグのどの位置に置くかを指定するためのボタンです。今回は、sectionタグの後に新しいタグを挿入するので、［後］ボタンをクリックします。すると、「新規asideタグの内容がここに入ります」と書かれた青枠が挿入されます。
［コードビュー］でasideタグがsectionタグの後に作成されたことを確認してください。このように要素を選択した上で挿入したいタグを選択すれば、任意のところに新しいタグを挿入できます。
タグは［挿入］パネルからも挿入できる
タグは［挿入］パネルの「構造」からも挿入ができます。［挿入］パネルだと一覧で表示されているので、場合によってはこちらの方が効率的にタグを挿入できるでしょう。
タグの中に新しいタグを追加する
新しく作成したasideタグには、ボタン画像が2つとバナー画像が入ります。asideタグ内にさらに新しいタグを挿入しましょう。これらの画像はリストタグでマークアップします。［ライブビュー］でasideタグ部分を選択した状態で、［挿入］メニュー→［構造］→［番号無しリスト］を選択します。
先ほどと異なり、挿入位置のボタンが表示されません。番号無しリストなど一部のタグは、挿入位置のボタンが表示されず、そのまま選択している要素の中に新しいタグが作成されます。
［ライブビュープロパティインスペクタ］をみると、タグを示すラベルが「aside」から「li」に変化しています。
liタグの中にボタン・バナー画像を入れていきましょう。［挿入］メニュー→［イメージ］→［イメージ］を選択します。
すると、挿入位置のボタンが表示されるので［ネスト］ボタンをクリックします。
［イメージソースの選択］ダイアログボックスが表示されるので、imagesフォルダー内にあるonline_btn.pngを選択し、［OK］ボタンをクリックします。これで画像が入りました。
ボタン画像をクリックして、［プロパティインスペクタ］の［代替］に「Online Shop」と代替テキストを入力しておきましょう。
※以前のDreamweaverでは、アクセシビリティ属性の設定ダイアログボックスが表示されましたが、Dreamweaver CCでは表示されません。代替テキストは、画像挿入後、［ライブビュープロパティインスペクタ］や［プロパティインスペクタ］で入力してください。
ボタン画像の横に、「新規asideタグの内容がここに入ります」という文字が表示されたままになっています。これは不要なので、文字をダブルクリックして編集モードに移り、削除します。削除したら適当な場所をクリックしておいてください。
もう1つのボタン画像を、今挿入したliタグの兄弟要素として入れます。このように同じタグを挿入するときに便利なのが、［エレメントクイックビュー］です。［タグセレクター］の左側にある［</>］をクリックすると、［エレメントクイックビュー］が表示されます。
［エレメントクイックビュー］には、現在のHTMLドキュメントの構造が表示されています。asideタグ内にあるliタグをクリックして選択し、右クリックメニューから［複製］を選択するとliタグが複製され、ボタン画像も複製され2つになっています。［エレメントクイックビュー］を非表示にするには、適当なところをクリックします。
簡単にタグを複製して兄弟要素を作成できました。下のボタン画像は別な画像に変更します。下側のボタン画像をクリックし、［ライブビュープロパティインスペクタ］の［src］にある［ファイルの参照］ボタンをクリックします。［イメージソースの選択］ダイアログボックスが開くので、hope.pngを選択し、［OK］ボタンをクリックします。
画像が差し替わりました。［ライブビュープロパティインスペクタ］の［alt］に「十枝内農場の思い」と入力しておきましょう。
［エレメントクイックビュー］ではタグの削除や順番入れ替えもできる
［エレメントクイックビュー］では、HTML構造を確認できるほか、不要なタグを削除したり、ドラッグしてタグの順番を入れ替えることも可能です。ドラッグすると、挿入位置を示す緑色の線が表示され、マウスを放すとそこにタグが移動します。コピー＆ペーストを使って、タグを直ぐ下にではなく、違う場所にコピーすることもできます。このように、［エレメントクイックビュー］ではHTML構造を簡単に操作することができます。
ulタグの後に画像を入れる
2つのボタン画像を挿入しましたので、あとはバナー画像です。これはpタグを新規に挿入して、画像を入れたいと思います。［タグセレクター］でulタグを選択し、［挿入］メニュー→［構造］→［段落］を選択します。
ulタグの後に入れたいので、［後］ボタンを選択します。すると、「これはレイアウトPタグのコンテンツです」と書かれた青枠が挿入されます。
先ほど同様、［挿入］メニュー→［イメージ］→［イメージ］を選択し、［ネスト］ボタンをクリックします。
［イメージソースの選択］ダイアログボックスが開くので、recipe_btn.jpgを選択して、［OK］ボタンをクリックします。
バナー画像をクリックして、［プロパティインスペクタ］の［代替］に「野菜料理レシピ」と代替テキストを入力しておきましょう。
バナー画像の横にある「これはレイアウトPタグのコンテンツです」は不要ですので、ダブルクリックして編集モードに移り、削除します。
asideタグを選択した状態で［挿入］メニュー→［構造］→［段落］を選択すると、asideタグ内のulタグの前に挿入されます。基準となるタグを選択してから挿入し、挿入箇所を選択するようにします。
新しい要素や画像を挿入することができましたが、意図するレイアウトではありません。次回はCSSを利用してこのレイアウトをきちんとしたものにしていく方法を解説します。