Dwでコーディングがちょこっと早くなる小技

ツール

コーディングを早くすると言えば超速コーディングとして話題になった「Zen-Coding」がありますが、記述方法を覚えなければいけないのもあって及び腰な人も多いのではないでしょうか(私です)。

私はコーディングする際は先にテキストをコピーしてもってきてからタグで囲むので、このような使い方をしてるとあまりZen-Codingは使わないのかなと思います。【追記】調べたら囲んだあとにもできました。Wrap with Abbreviationを選択し、ウインドウが出てくるのでそこにzen-codingの記述をすればいいです。ご指摘ありがとうございました。

覚えてしまえば早くなりそうですが、そこまでなーと思う人がちょこっとスピードアップできることをよく使っているDreamweaverの機能をご紹介します。
特に新しい事ではなく元から付いてる便利な機能のご紹介です。

スニペットを使う

よく使うコードを登録しておけるスニペット。自分でキーボードショートカットを指定できます。
また、テキストを選択してから使用するとそのテキストを囲んでくれるのがいいですね。
自分が登録してよくつかってるのは、「border: 1px solid red;」です。
何に使うかと言うと、CSSを記述している時にレイアウトが崩れたりしたらこれを指定してどこがおかしいのか調べてます。

私が登録してるのは以下です。

リスト
<ul>
<li></li>
</ul>
順序ありリスト
<ol>
<li></li>
</ol>
リストの中身
<li></li>
定期型リスト
<dl>
<dt></dt>
<dd></dd>
</dl>
定期型リスト中身
<dt></dt>
<dd></dd>
HTMLコメントアウト
<!---->
CSSコメントアウト
/*----*/
最優先
!important
ボーダー(確認用)
border: 1px solid red;

<strong></strong>など最初から登録されているものもありますね。

コマンドを使う

コマンドを使って処理を自動で行ってもらう方法です。Photoshopでいうアクションみたいな感じでしょうか。

最初から「ソースフォーマットの適用」などあるので使った事がある人が多いと思いますが、これは自分で作ることも可能です。

コマンドはHTMLとJSで作られています。
配布しているサイトもたくさんありますので、これがあれば便利なのに!っていうのがあったら探してみてはいかがでしょうか。

ちなみに私がよく使ってるのはこちら。以前紹介したものです。

他にも以下のようなものがあります。

サイトの管理を使う

直接的なコーディングではありませんが、Dreamweaverにある機能でサイトの管理があります。

ここで制作するフォルダを指定しておくと、ウィンドウでファイルを表示してくれますので、使うファイルや階層が一目でわかります。

また、ここでファイル名を変更や削除をすると、そのファイルにリンクを指定してるファイルのリンクも変えてくれますので、リンク切れが起きなくて済みます。
またファイルの移動もできます。

あとはFTPの設定をしていればファイルのアップ削除や同期をとることも可能です。あまり大量にアップするには時間がかかるので向いていないと思いますが、すでにアップされているファイルの同期をとるには便利です。

自分のサイトは最初はFTPソフトを使ってアップして、更新作業はDreamweaverのFTPで済ませています。

基本的な機能ですがいかがでしたでしょうか。これだけでもコーディングは結構早くなると思います。ツールは機能をつかってこそですので有効利用しましょう。