]をクリックすると、[エレメントクイックビュー]が表示されます。
[エレメントクイックビュー]には、現在のHTMLドキュメントの構造が表示されています。asideタグ内にあるliタグをクリックして選択し、右クリックメニューから[複製]を選択するとliタグが複製され、ボタン画像も複製され2つになっています。[エレメントクイックビュー]を非表示にするには、適当なところをクリックします。
簡単にタグを複製して兄弟要素を作成できました。下のボタン画像は別な画像に変更します。下側のボタン画像をクリックし、[ライブビュープロパティインスペクタ]の[src]にある[ファイルの参照]ボタンをクリックします。[イメージソースの選択]ダイアログボックスが開くので、hope.pngを選択し、[OK]ボタンをクリックします。
画像が差し替わりました。[ライブビュープロパティインスペクタ]の[alt]に「十枝内農場の思い」と入力しておきましょう。
[エレメントクイックビュー]では、HTML構造を確認できるほか、不要なタグを削除したり、ドラッグしてタグの順番を入れ替えることも可能です。ドラッグすると、挿入位置を示す緑色の線が表示され、マウスを放すとそこにタグが移動します。コピー&ペーストを使って、タグを直ぐ下にではなく、違う場所にコピーすることもできます。このように、[エレメントクイックビュー]ではHTML構造を簡単に操作することができます。
2つのボタン画像を挿入しましたので、あとはバナー画像です。これはpタグを新規に挿入して、画像を入れたいと思います。[タグセレクター]でulタグを選択し、[挿入]メニュー→[構造]→[段落]を選択します。
ulタグの後に入れたいので、[後]ボタンを選択します。すると、「これはレイアウトPタグのコンテンツです」と書かれた青枠が挿入されます。
先ほど同様、[挿入]メニュー→[イメージ]→[イメージ]を選択し、[ネスト]ボタンをクリックします。
[イメージソースの選択]ダイアログボックスが開くので、recipe_btn.jpgを選択して、[OK]ボタンをクリックします。
バナー画像をクリックして、[プロパティインスペクタ]の[代替]に「野菜料理レシピ」と代替テキストを入力しておきましょう。
バナー画像の横にある「これはレイアウトPタグのコンテンツです」は不要ですので、ダブルクリックして編集モードに移り、削除します。
asideタグを選択した状態で[挿入]メニュー→[構造]→[段落]を選択すると、asideタグ内のulタグの前に挿入されます。基準となるタグを選択してから挿入し、挿入箇所を選択するようにします。
新しい要素や画像を挿入することができましたが、意図するレイアウトではありません。次回はCSSを利用してこのレイアウトをきちんとしたものにしていく方法を解説します。