第8回
知らなきゃ損!
Dreamweaverのスニペットを使おう!テーブルレイアウトを卒業しよう

知らなきゃ損!Dreamweaverのスニペットを使おう!

今回は少し趣向を変えて、知らなきゃ損!なDreamweaverの便利機能「スニペット」をご紹介します。

スニペット(snippet)とは、頻繁に使用するコード等をすぐに使えるように保存しておくことができる機能です。コードスニペットとも言われます。Dreamweaverだけではなく、コードを記述するようなソフトウェアにはよくある機能です。

Dreamweaverでコード編集するなら必須!といえるほど便利なので、知らなかった方は是非覚えてしまいましょう。

Dreamweaverスニペットの使い方

step1 スニペットパネルを開く

まずはスニペットが登録されているスニペットパネルを開きます。[ウィンドウ]メニューから[スニペット]をクリックします。

Dreamweaverコードスニペット

step2 スニペットを挿入する

スニペットパネルには、デフォルトで多数のスニペットが登録されています。コード内に挿入したいスニペットを選んで、ダブルクリック or ドラッグ&ドロップすると、該当するコードが挿入されます。

次からがスニペットの本領発揮です。

step3 スニペットを登録する

普段よく使うコードは新規に登録することができます。たとえばCSS用のコメントや、よく使うハックセレクタなどを登録すると便利でしょう。

Dreamweaverコードスニペット

まずは、わかりやすくフォルダを作ります。[新規スニペットフォルダ]をクリックし、フォルダ名を付けます。その後、[新規スニペット]をクリックし、編集ダイアログを開きます。

Dreamweaverコードスニペット

すべて設定後[OK]をクリックすればオリジナルスニペットの完成です。

また、既に挿入されているコードを、スニペット化することも可能です。スニペットにしたい部分を選択し、右クリックして[新規スニペットの作成]をクリックします。あとは同様です。

step4 スニペットをキーボードショートカットで使う

さらにガッツリとスニペットを使いこなしたい場合には、キーボードショートカットを割り当てることもできます。スニペットパネルを右クリックし、[キーボードショートカットの編集]をクリックします。

キーボードショートカットを割り当てたいスニペットを選択して、実際に使いたいショートカットを押します。もしすでに使われているショートカットであれば警告がでるので安心です。

Dreamweaverのオンラインヘルプも参考にしてみてください。(こう鈴木 航 (すずきこう)

次のページは…
CSS3はここがすごい【プロパティ編1】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読