Dreamweaver入門 第3回 HTMLマークアップを効率的にできるデザインビュー

Creative Cloud UI/UX & Web

Dreamweaverでは、HTMLのソースコードを触らなくても、[デザインビュー]でHTMLマークアップの追加や修正を簡単に行うことができます。効率をさらに上げるには、「第2回 文字原稿の追加はデザインビューを使えば効率アップ」で解説したように、あらかじめテキスト原稿を[デザインビュー]で挿入しておくことがポイントです。本記事では、基本的に[デザインビュー]を中心にマークアップを行う際に役立つテクニックを解説します。

Dreamweaver CC 体験版
ダウンロード

見出しタグはショートカットキーがおすすめ

テキストに<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

見出しタグを設定する際、テキスト全体を選択する必要はありません。見出しに設定したいテキスト内にカーソルを置き、該当のショートカットキーを使うだけで、本当に簡単に設定できます。

リストタグは[デザインビュー]で設定

リストタグを設定する場合は、[デザインビュー]でリスト化したいテキストをドラッグして選択し、[プロパティインスペクター]の[リスト]ボタンをクリックするだけです。

リストアイテムごとに<p>タグが設定されていると、とても簡単!

リストタグを設定するときのポイントは、リストアイテムの<li>タグで囲みたい各テキストをそれぞれあらかじめ<p>タグで指定しておくことです。そうすると、<p>タグごとにリストアイテム(<li>タグ)になります。

もし、全てのテキストを1つの段落(<p>タグ)として指定していると、1つのリストアイテムになってしまいます。1つのリストアイテムになってしまった場合は、[Backspace](あるいは、Delete)キーで<br>タグを削除してから[Enter]キーを押すと、<li>タグがアイテムごとに入ります。

Enterキー2回で、リストから段落へ

最後のリストアイテムの右端で[Enter]キーを押すと、「リストアイテム(<li>タグ)の追加」になります。

リストアイテムを追加し終えて、次のブロックは段落(<p>タグ)にしたいときは、もう一度[Enter]キーを押します(計2回押します)。すると、リストから抜けて、段落(<p>タグ)が追加されます。もうこれは使うしかないですね!

リストの入れ子もボタンひとつ

入れ子のリストを作成するには、リストアイテム内で入れ子にしたいリストアイテム部分を選択し、[プロパティインスペクター]の[インデント]ボタンをクリックします。

引用設定もボタンひとつ

引用(<blockquote>タグ)を設定するには、[デザインビュー]で引用扱いにしたい部分を選択し、[プロパティインスペクター]の[ブロック引用]ボタンをクリックします。

リストの入れ子で使った[インデント]ボタンと同じものですが、選択範囲がリストでないときは[ブロック引用]ボタンになります。

divタグや<nav>タグなどの情報をグループ化するのもとても簡単

<div>タグや、<header>タグ、<nav>タグ、<main>タグ、<footer>タグなど、情報をグループ化するブロックレベル要素の追加も[デザインビュー]で簡単にできてしまいます。

<div>タグなどを挿入

[デザインビュー]上で、グループ化したい箇所をドラッグで選択し、[挿入]パネルの[HTML]グループにある[Div]をクリックします。[Divを挿入]ダイアログボックスが表示されるので、適宜「Class」名や「ID」名を設定します。

<header>タグ、<nav>タグ、<main>タグ、<footer>タグも同様に、[デザインビュー]で範囲選択をしてから[挿入]パネルの[HTML]グループから設定します。

[デザインビュー]に出る点線?

<div>タグや<header>タグを設定すると、[デザインビュー]に謎の点線が表示されます。これはDreamweaverが私たちに「ここにグループ化してるタグが入ってますよ」ということを教えてくれているだけで、ウェブブラウザーの表示には全く影響がありません。

とにかく[タグセレクター]が強い味方

[タグセレクター]は、ドキュメントウィンドウの左下にあります。選択部分(カーソルがある部分)で使用されているHTMLタグの構造が表示されます。その中で特定のタグの範囲を選択することができます。

例えば、[デザインビュー]でリスト内の文字を全て選択しても、文字だけが選択されて、それを囲む<li>タグは選択されません。

ところが、[タグセレクター]の<li>をクリックすると、<li>タグを含んだテキストが選択できるので、リストアイテムごとにコピーをしたり削除したりすることができます。また、<ul>をクリックするとリスト全体を選択することもできます。

クイックタグ編集もおすすめ

[タグセレクター]で選択したタグ上で右クリックすると、サブメニューが表示されます。その中の[クイックタグ編集…]を選ぶと、選択したタグの種類を変更できます。コードヒントも出てくるのでとても便利です。

ちなみに

  • [修正]メニュ→[クイックタグ編集]
  • ショートカットキー[Ctrol(command)+T]

でもできます。

不要なタグの削除

削除したいタグがある場合は、

  1. [デザインビュー]で削除したいタグのある場所をクリック
  2. [タグセレクター]で該当のタグ上で右クリック
  3. [タグの削除]をクリック

すると、開始タグと終了タグの両方を一度に削除できます。削除されるのはタグだけで、中のテキストは削除されないのがこの操作のすごいところです。

タグと中身を両方削除したいとき

タグだけでなく、タグと中身の文字や画像をまるっと削除したいときは、

  1. [デザインビュー]で削除したいタグのある場所をクリック
  2. [タグセレクター]で該当のタグをクリック
  3. [Delete]キー

で、選択範囲すべてを削除することができます。

おまけ タイトルの設定は[プロパティインスペクター]で

<title>タグの内容を変更するには、[プロパティインスペクター]の[タイトル]テキストボックスに、ウェブサイトに合わせた内容を入力し[Enter]キーを押します。

Dreamweaverでは、HTMLドキュメントを新規作成すると、<title>タグに「無題ドキュメント」が自動的に設定されます。Googleなどで「無題ドキュメント」と検索するとかなり数のページがヒットするので、対応を忘れがちな方が多いのかもしれませんね。私はファイルを作成したとき、一番最初に「無題ドキュメント」をサイト名に変更するようにしています。
このように、Dreamweaverでは[デザインビュー]を使うとさらに効率よくHTMLソースコードを作成・編集することができます。ぜひ試してみてください。

POSTED ON 2014.07.29

Products Featured

  • Dreamweaver

Tags

タグはありません