• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

作業効率を高めるDreamweaverの小技

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

鷹野 雅弘 2007/02/20 日経デザイン

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

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

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

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

●シチュエーション:

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

●どこまでがdiv要素

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

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

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

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

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

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

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

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

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

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

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

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

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>のように表示されます。

タグセレクタには、CSSと同様、id属性が「#」、class属性が「.」で表示される。複数のクラスを指定する場合には半角スペースが入る。
タグセレクタには、CSSと同様、id属性が「#」、class属性が「.」で表示される。複数のクラスを指定する場合には半角スペースが入る。
[画像のクリックで拡大表示]

  【修正履歴】本記事の「●どこまでがdiv要素」のオマケ・テク(1)内に、「</div>の後ろに入れる方もいますが、構造上も手前が望ましいですし、」という記述がありましたが、語弊があるという理由から「構造上も手前が望ましいですし、」の個所を削除しました。(2007年2月22日)

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

クライアント/OA機器

ネットワーク/通信サービス

セキュリティ

もっと見る