WEB Tips デザイン・コーディング

[DreamWeaver] 複数タグに共通する属性とその値の検索置換

[DreamWeaver] 複数タグに共通する属性とその値の検索置換

Adobe DreamWeaverの検索置換は強力です。ファイル内のテキスト検索置換はもちろん、複数ファイルの横断検索やコード内の検索置換も便利です。

私はコード内の検索置換を使うことが多いですね。

DreamWeaverの便利な検索置換の機能をまとめました。

複数要素の共通の属性、属性値を検索置換する

通常Dreamweaverで現在開いているドキュメントで検索するには以下のショートカット

Ctrl + F (Win)

Command + F (Mac)

検索して置換もする場合は

Ctrl + Alt + F (Win)

Command + Option + F (Mac)

Dreamweaver CCになってから(多分)検索するとクイック検索バーというのが表示されるようになりました。その名の通り簡単な検索なら手軽にできるようになりました。

クイック検索バー

しかしちょっと複雑に検索置換したい時のは昔のように検索置換ウィンドウを表示した方がやりやすい気がします。

table内のth,tdなどの要素に含まれる属性や属性値を一括で検索置換するには

Ctrl + Shift + F (Win)

Command + Shift + F (Mac)

で「検索および置換」ウィンドウが表示されます。

Dreamweaverの検索置換ウィンドウ

例:td要素にある属性を一括で削除したい場合

元のコードはこのような感じ

data-sheets-value

Google スプレッドシートの表データをDreamWeaverにコピペしたら、td要素にdata-sheets-valueという属性が付いています。

これを全て削除したい場合、Dreamweaverの検索置換で簡単にできます。

前述のショートカットキーで検索置換ウィンドウを開きます。「基本」と「詳細」のタブがあるので、「詳細」を選択します。

Dreamweaver 検索置換ウィンドウ

以下のように入力します。

Dreamweaver検索置換、詳細タブ

検索対象は「現在のドキュメント」でプルダウンで今回検索置換したい要素tdを選択します。

2番目の項目は「属性あり」のままでその右側に属性を選択するプルダウンメニューがありますが、今回の「data-sheets-value」はメニューの中にはないので、直接入力します。

さらに比較演算子は「=」のままで値は[任意の値]のままにします。

※複数の属性を設定したい場合は、左側にある+ボタンで項目の追加ができます。

最後に「操作」の項目では属性そのものを削除したいので「属性を削除」を選択し、再度属性名「data-sheets-value」を指定します。

これで「すべて置換」をクリックします。

検索置換の結果が以下の通りです。

td要素に

綺麗に属性が削除できました。

これ以外にもDreamweaverの検索置換には、属性を追加したりタグ(要素)を削除したり変更したりできるほか、複数ファイルの横断検索も可能です。

アドビソフト+動画講座受講セット 最大82%OFF~

今月キャンペーン特典があるサービス

  • ConoHa WING
    WINGパック36ヶ月で月額652円 55%OFF - 2023年3月31日(金)16:00まで
  • エックスサーバー
    月額費用が最大30%オフの693円&ドメイン永久無料、さらに移転代行も0円中 - 2023年4月21日(金)12:00まで
  • Xserverビジネス
    12ヶ月以上契約で初期費用無料、3ヶ月・6ヶ月で初期費用半額 - 2023年4月4日(火)12:00まで
  • カラフルボックス
    .jp取り扱いスタート。BOX2以上の月額費用が25%OFFのクーポンコード「SERVER25

-WEB Tips, デザイン・コーディング
-,