wadadanet

コーディング作業は多くのストレスが伴うと思うのですが、
それを少しでも和らげるDreamweaverのTipsを特集してみます。

<br />後の自動改行解除

DWで「Ctrl」＋「Enter」を押すと、<br />タグが挿入されると思うのですが、
<br>の後に改行が勝手に入るのを止める方法です。

1. <br />のスニペット登録
2. 登録したスニペットをキーボードショートカット「Ctrl＋Enter」に登録

コメントアウトをショートカットに登録

そのまんまですが、良いコードを書くにはコメントは必須なので、これはしておくべきです。

イメージリストを作るときの簡単な方法

意外に時間がかかってしまう作業なので、ここも工夫しましょう。

1. パネル(DW上の右か左に表示されている)の画像ファイルをコードにドラッグアンドドロップ(画像:左)
2. できたコードをコピー
3. さくらエディタなどを使い置換（*1）(画像:右)
4. DWにコピペ、<ul></ul>をつけて終了

 

DWのコマンド系が簡単に作れたらいいのですが、とりあえずこれで難を逃れています。
イメージリストでもなくても、３，４はよく使うので覚えておくと便利です。

(*1):私の場合はマクロを使っています。
「リスト.mac」(サクラエディタ用マクロ)

S_ReplaceAll('^', '<li>', 20);    //
S_ReDraw(0);    // 再描画
S_ReplaceAll('$', '</li>', 20);    //
S_ReDraw(0);    // 再描画

CSSでもタブを利用

これはDWとは関係が無いのですが、知っておくと便利なのでご紹介します。
「百聞は一見にしかず」といいますから、とりあえずどちらの方が見やすく分かりやすいか見て判断してください。

/* 例１*/
.image_box {
    padding:5px;
}
.image_box .left-box {
    float:left;
    width:400px;
}
.image_box .right-box {
    float:right;
    width:300px;
}

/* 例2 */
.image_box {
    padding:5px;
}
    .image_box .left-box {
        float:left;
        width:400px;
    }
    .image_box .right-box {
        float:right;
        width:300px;
    }

残りTipsは近日公開予定！

ご期待ください。