タグを即座に編集する

HTML5によって、セマンティックなマークアップをおこなえます 作成する要素のタイプはアクセシビリティのために重要で これによりスクリーンリーダーがコンテンツの読み取り方法を認識します クイックタグ編集は、作成したタグをクリーンアップしたり 他のタグを試してみたり 状況に合わせてタグを 急いで編集したりするのに便利です このビデオでは クイックタグ編集の3つのモードでの作業方法を説明します 最初に、「デザイン」ワークスペースに切り替えます クイックタグ編集では、要素のコードをライブビューで 次の3つのいずれかの方法により編集できます それは、タグの内容を追加すること あるタグを別のタグで囲むこと タグを挿入することです クイックタグ編集を起動するには 「ライブ」ビューで要素を選択してから Ctrl+TまたはCommand+T（Mac）を押します クイックタグ編集が編集モードで表示されます 折り返しタグモードに切り替えるには、再度Ctrl+TまたはCommand+Tを押します 再度Ctrl+TまたはCommand+Tを押すと、挿入モードに切り替わります この方法で「ライブ」ビューの要素を使用して コードにアクセスして編集します それでは、クイックタグ編集の実際の動作を確認してみましょう まず、divタグをHTML5のsectionタグに変更します 次に、img属性を追加します 「ライブ」ビューでフィーチャーイメージを選択し 上矢印キーを押して、イメージを囲むdivタグが 選択されるようにします クイックタグ編集を編集モードで開き divタグを選択して削除します 「se」と入力すると、sectionタグがコードヒントに表示されます Enterキーを押してタグを変更し もう一度Enterキーを押して、変更を確定します 「コード」ビューが更新されて変更内容が表示されましたね 終了タグもDreamweaver CCによって更新されます この方法により、レイアウトタグを簡単に切り替えることができます イメージタグを更新する場合は、イメージを選択し クイックタグ編集を編集モードで開きます ソースパスを「images/feature2.png」に変更して、Enterキーを押します 「ライブ」ビューが更新されて新しいイメージが表示され 「コード」ビューにコードの変更が反映されていることが分かるでしょうか 次は、イメージをアンカータグで囲むことでクリック可能にします これはクイックタグ編集で簡単に行えます イメージをもう一度選択し、Ctrl+TかCommand+Tを二度押して クイックタグ編集を折り返しタグモードで開きます クイックタグ編集のコードヒントメニューに 複数のタグオプションが表示されます 最初のオプションであるアンカータグを選択し スペースバーを押します 「hr」と入力すると、コードヒントが「href」に移動します Enterキーを押して、リンクのURLを入力します Enterキーをもう一度押すと、更新されたコードが 「コード」ビューに表示され、アンカータグでimgタグが囲まれていることが分かります また、終了タグが自動で生成されていることにも気が付くでしょう クイックタグ編集の最後のモードでは 新しいHTML要素を既存の要素の前に挿入できます 例えば、divタグをイメージの上に挿入するには 挿入モードを使用します イメージを選択し (選択されていない場合) クイックタグ編集を挿入モードで開きます 「di」と入力し、 Enterキーを押してコードヒントでdivタグを選択します Enterキーをもう一度押してコードを確定します 「コード」ビューが更新されます 「ライブ」ビューには、コードのマッチングおよび生成に使用できる 多数のツールとショートカットが用意されています クイックタグ編集は、「ライブ」ビューで作業しながらコードを簡単に編集できる シンプルかつ強力な機能です Dreamweaver CCでデザインを編集するときは クイックタグ編集の3つのすべてのモードを試してみてください