Dreamweaver入門 第3回 HTMLマークアップを効率的にできるデザインビュー
Dreamweaver入門
Dreamweaverでは、HTMLのソースコードを触らなくても、［デザインビュー］でHTMLマークアップの追加や修正を簡単に行うことができます。効率をさらに上げるには、「第2回 文字原稿の追加はデザインビューを使えば効率アップ」で解説したように、あらかじめテキスト原稿を［デザインビュー］で挿入しておくことがポイントです。本記事では、基本的に［デザインビュー］を中心にマークアップを行う際に役立つテクニックを解説します。
見出しタグはショートカットキーがおすすめ
テキストに<h1>など見出しタグを設定する場合は、見出しにしたいテキストを選択したあと、［プロパティインスペクター］の［フォーマット］プルダウンメニューから見出しタグを選択します。
また、次の表のようにショートカットキーでも設定できます。
見出しタグのショートカットキー
設定したいタグ
ショートカットキー
見出し1（<h1>タグ）
［Ctrl］（Command）キー＋1
見出し2（<h2>タグ）
［Ctrl］（Command）キー＋2
見出し3（<h3>タグ）
［Ctrl］（Command）キー＋3
見出し4（<h4>タグ）
［Ctrl］（Command）キー＋4
見出し5（<h5>タグ）
［Ctrl］（Command）キー＋5
見出し6（<h6>タグ）
［Ctrl］（Command）キー＋6
見出しタグを設定する際、テキスト全体を選択する必要はありません。見出しに設定したいテキスト内にカーソルを置き、該当のショートカットキーを使うだけで、本当に簡単に設定できます。
リストタグは［デザインビュー］で設定
リストタグを設定する場合は、［デザインビュー］でリスト化したいテキストをドラッグして選択し、［プロパティインスペクター］の［リスト］ボタンをクリックするだけです。
リストアイテムごとにタグが設定されていると、とても簡単！
リストタグを設定するときのポイントは、リストアイテムの<li>タグで囲みたい各テキストをそれぞれあらかじめ<p>タグで指定しておくことです。そうすると、<p>タグごとにリストアイテム（<li>タグ）になります。
もし、全てのテキストを1つの段落（<p>タグ）として指定していると、1つのリストアイテムになってしまいます。1つのリストアイテムになってしまった場合は、［Backspace］（あるいは、Delete）キーで<br>タグを削除してから［Enter］キーを押すと、<li>タグがアイテムごとに入ります。
Enterキー2回で、リストから段落へ
最後のリストアイテムの右端で［Enter］キーを押すと、「リストアイテム（<li>タグ）の追加」になります。
リストアイテムを追加し終えて、次のブロックは段落（<p>タグ）にしたいときは、もう一度［Enter］キーを押します（計2回押します）。すると、リストから抜けて、段落（<p>タグ）が追加されます。もうこれは使うしかないですね！
リストの入れ子もボタンひとつ
入れ子のリストを作成するには、リストアイテム内で入れ子にしたいリストアイテム部分を選択し、［プロパティインスペクター］の［インデント］ボタンをクリックします。
引用設定もボタンひとつ
引用（<blockquote>タグ）を設定するには、［デザインビュー］で引用扱いにしたい部分を選択し、［プロパティインスペクター］の［ブロック引用］ボタンをクリックします。
リストの入れ子で使った［インデント］ボタンと同じものですが、選択範囲がリストでないときは［ブロック引用］ボタンになります。
divタグやタグなどの情報をグループ化するのもとても簡単
<div>タグや、<header>タグ、<nav>タグ、<main>タグ、<footer>タグなど、情報をグループ化するブロックレベル要素の追加も［デザインビュー］で簡単にできてしまいます。
タグなどを挿入
［デザインビュー］上で、グループ化したい箇所をドラッグで選択し、［挿入］パネルの［HTML］グループにある［Div］をクリックします。［Divを挿入］ダイアログボックスが表示されるので、適宜「Class」名や「ID」名を設定します。
<header>タグ、<nav>タグ、<main>タグ、<footer>タグも同様に、［デザインビュー］で範囲選択をしてから［挿入］パネルの［HTML］グループから設定します。
［デザインビュー］に出る点線？
<div>タグや<header>タグを設定すると、［デザインビュー］に謎の点線が表示されます。これはDreamweaverが私たちに「ここにグループ化してるタグが入ってますよ」ということを教えてくれているだけで、ウェブブラウザーの表示には全く影響がありません。
とにかく［タグセレクター］が強い味方
［タグセレクター］は、ドキュメントウィンドウの左下にあります。選択部分（カーソルがある部分）で使用されているHTMLタグの構造が表示されます。その中で特定のタグの範囲を選択することができます。
例えば、［デザインビュー］でリスト内の文字を全て選択しても、文字だけが選択されて、それを囲む<li>タグは選択されません。
ところが、［タグセレクター］の<li>をクリックすると、<li>タグを含んだテキストが選択できるので、リストアイテムごとにコピーをしたり削除したりすることができます。また、<ul>をクリックするとリスト全体を選択することもできます。
クイックタグ編集もおすすめ
［タグセレクター］で選択したタグ上で右クリックすると、サブメニューが表示されます。その中の［クイックタグ編集…］を選ぶと、選択したタグの種類を変更できます。コードヒントも出てくるのでとても便利です。
ちなみに
- ［修正］メニュ→［クイックタグ編集］
- ショートカットキー［Ctrol（command）+T］
でもできます。
不要なタグの削除
削除したいタグがある場合は、
- ［デザインビュー］で削除したいタグのある場所をクリック
- ［タグセレクター］で該当のタグ上で右クリック
- ［タグの削除］をクリック
すると、開始タグと終了タグの両方を一度に削除できます。削除されるのはタグだけで、中のテキストは削除されないのがこの操作のすごいところです。
タグと中身を両方削除したいとき
タグだけでなく、タグと中身の文字や画像をまるっと削除したいときは、
- ［デザインビュー］で削除したいタグのある場所をクリック
- ［タグセレクター］で該当のタグをクリック
- ［Delete］キー
で、選択範囲すべてを削除することができます。
おまけ タイトルの設定は［プロパティインスペクター］で
<title>タグの内容を変更するには、［プロパティインスペクター］の［タイトル］テキストボックスに、ウェブサイトに合わせた内容を入力し［Enter］キーを押します。
Dreamweaverでは、HTMLドキュメントを新規作成すると、<title>タグに「無題ドキュメント」が自動的に設定されます。Googleなどで「無題ドキュメント」と検索するとかなり数のページがヒットするので、対応を忘れがちな方が多いのかもしれませんね。私はファイルを作成したとき、一番最初に「無題ドキュメント」をサイト名に変更するようにしています。
このように、Dreamweaverでは［デザインビュー］を使うとさらに効率よくHTMLソースコードを作成・編集することができます。ぜひ試してみてください。