第1回　ひきついだサイトはdivでいっぱい！

鷹野　雅弘

2007.02.20

　私は制作会社に身を置きながら、テクニカルライターとして執筆をしています。おそらく制作だけやっていたら、日々の仕事に追われてしまっているところですが、リファレンスやチュートリアルなどの執筆を通して細かい機能を探る中で「これって、あれをするときに使えるじゃん！」と、ひらめき、今までのローテクな方法にうんざりすることがあります。

　今回から数回にわたり、それらの中からピックアップして「日々の作業効率を高めるDreamweaverの小技」と題してご紹介します。

　いわゆる「Webオーサリングソフト」としては圧倒的なシェアを誇るDreamweaverですが、その一方、まだまだ「ハンド・コーディング派」も根強く、、ある意味、ハンドコーディングの方がエライ……みたいな“幅を効かせて”いるところがありますよね。最終的には、Dreamweaverまかせでなく、ソースをきっちりチェックするのは当然ですが、テキストエディタにはできない技もあるのです。ご紹介の中でひとつでもお役に立てるものがあれば幸いです。

　念のため付け加えておきますと、Dreamweaverいいね、と思う反面、「ここがこうであってくれたら……」という修正要望、機能拡張要望をたくさん持っており、そちらのネタだけでも連載できるほどです...

●シチュエーション：

　あなたは、あるサイトのリニューアル作業を引き継ぐことになりました。ざっくり見たところ、現状の(X)HTMLには過剰なdiv要素が多そうです。各ページの構造を理解しつつ、整理します。

●どこまでがdiv要素

　div要素の数にかかわらず、まずソース全体を見ながら構造を把握する作業が必要不可欠です。

　その中でも、どこまでがそのdiv要素なのかを知るのは、ちょっと面倒です。

ローテク・ウェイ：
　コードビューで念入りにソースコードを精査。アタマの中で、または、紙に書き出しながら整理する。

ベター・ウェイ：
　デザインビューでdiv要素内でクリック（またはコードビューでdivタグそのものをクリック）し、ドキュメントウインドウ下部のタグインスペクタで対象となるdiv要素をクリックします。すると、コードビューでクリックしたdiv要素が反転表示されます。

タグセレクタで<div.minBox>をクリックすると、対応するコードがコードビューで反転表示される。　 [画像のクリックで拡大表示]

　その上位のdiv要素を選択するには、タグインスペクタの左側のタグをクリックします。［編集］メニューの［親タグ］をクリック、またはCtrl/command+］キーのキーボードショートカットを使うこともできます。

オマケ・テク（1）：
　</div>の手前にのようにコメントを入れておくとよいでしょう。</div>の後ろに入れる方もいますが、上記の方法で選択する際、</div>の後ろでは選択されないため、ごっそりコピー&ペーストしたり、移動する際に、せっかく入れたコメントが忘れられてしまいます。

オマケ・テク（2）：
　Dreamweaver 8からはコードを折りたたむという機能があります。コードビューでソースコードを選択してから、［コーディングツールバー］の［選択範囲をたたむ］ボタンをクリックすると、「<div cl...」のように表示されます。

［コーディングツールバー］の［選択範囲をたたむ］ボタンをクリックすると、
[画像のクリックで拡大表示]

選択しているコードが折りたたまれる　 [画像のクリックで拡大表示]

　本来でしたら、id名が表示された状態でたたまれるといいのですが....

　なお、Alt/optionキーを押しながら［選択範囲をたたむ］ボタンをクリックすると、選択範囲以外のコードがすべて折りたたまれます。特定箇所にフォーカスしたいときに便利かもしれません。

Alt/optionキーを押しながら［選択範囲をたたむ］ボタンをクリックして、選択範囲以外のコードをすべて折りたたむこともできる
[画像のクリックで拡大表示]

　なお、たたまれたコードは［すべて展開］ボタンをクリックすると戻ります。

　［編集］メニューの［コードをたたむ］のサブメニューに、関連したコマンドがまとめられており、キーボードショートカットも表示されていますので、ヘビーに使う場合にはキーボードショートカットを覚えてしまうとよいでしょう。

［編集］メニューの［コードをたたむ］のサブメニューから実行することもできる。
[画像のクリックで拡大表示]

●不要なdiv要素を削除する

ローテク・ウェイ：
　まずは、Dreamweaverのコードビューで開始の<div>を削除、次に、注意深く</div>を探して削除。F5キーを押してデザインビューをリフレッシュ。

　開始の<div>はいいとして、対応する</div>を取りこぼしてしまいがちです。

ベター・ウェイ：
　不要なdiv要素が見つかったら、タグセレクタでそのdiv要素の上で右クリックします。表示されるメニューから［タグを削除］を選択すれば、対応する</div>を含めて、サクっと消えます。

不要なタグを削除するには、タグセレクタで右クリックして［タグを削除］を選択すればよい。　 [画像のクリックで拡大表示]

オマケ・テク（1）：
　div要素にid属性やclass属性がついている場合、タグセレクタでは<div#wrapper>（<div id="wrapper">）、<div.productInfo>（<div class="productInfo">）のように表示されます。CSSでのセレクタの扱いと同じですね。

　なお、id属性やclass属性の両方がある場合には、<div.globalMenu#home>（div id="home" class="globalMenu"）のように表示されます。

オマケ・テク（2）：
　CSSでは2つ以上のクラスの指定を行うことができますが、Dreamweaverのデザインビューやプロパティインスペクタでは対応していません。コードビューで<div class="clearfix inner">のように半角スペースで区切って指定することができます。その際、タグセレクタにも<div.clearfix inner>のように表示されます。