DWのDOM機能が便利すぎた。

Dreamweaverとは、Adobeのオーサリングツールですが、コーダーの中では反Adobe組織(個人)がいる。

個人的には、なぜなんだ!!と言いたいくらいですが、そこまでいうならSublime TextAtomをインストールしたるわい!
と思い試しにいれたら、サクサクうごいてあれ。よくね?って思った。

今回はnode.jsもうまく入れることが出来た。
以前はDWの記事書いた時は、きっとnodeが一発でインストできなかったからその腹いせというかもう引き返せない感じでDW派のような記事を書いたんだ。
自分で書いたけど、きっとそんな気持ちだったに違いない。

Dreamweaverよいしょ記事はこちら↓
[blogcard url=”https://sheeplog.work/editor-dreadmweaver-good/”]

とはいえ、まだ慣れてないのでしばらくはDreamweaverで行くつもりだ。

それにDreamweaverが劣っているとは思っていない。

今している案件で、HTMLの整列(インデントとか改行とか)をしてくれとの要件だったので

こんなんとか
[blogcard url=”http://u670.com/pikamap/htmlseikei.php”]

こんなツール
[blogcard url=”https://lab.syncer.jp/Tool/HTML-PrettyPrint/”]

を使ってました。
ページが増えればふえるほど納品データを作るのがめんどくさくなってきた。

それを解決したのが、DOMパネル機能!!

このDOMパネルですが、要素を挿入したり、クラス名・ID変更したりが出来る。
これの良いのは、HTMLの構造が確認できるところ。

正直こんな機能いつつかうの?って感じなんですが、こいつが曲者でした。

なんとコピーして貼り付けるだけでHTMLを整列してくれる!!

貼り付けた時のインデントは、環境設定>コードフォーマットの数値を変えると変更出来るよ。

extractの次に便利な機能だと思った。

ソースがなんか汚いなーと思った人はぜひ使ってみて欲しい。コピーして貼り付けるだけ!!

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。