第8回
知らなきゃ損！
Dreamweaverのスニペットを使おう！テーブルレイアウトを卒業しよう
知らなきゃ損！Dreamweaverのスニペットを使おう！
今回は少し趣向を変えて、知らなきゃ損！なDreamweaverの便利機能「スニペット」をご紹介します。
スニペット（snippet）とは、頻繁に使用するコード等をすぐに使えるように保存しておくことができる機能です。コードスニペットとも言われます。Dreamweaverだけではなく、コードを記述するようなソフトウェアにはよくある機能です。
Dreamweaverでコード編集するなら必須！といえるほど便利なので、知らなかった方は是非覚えてしまいましょう。
Dreamweaverスニペットの使い方
step1 スニペットパネルを開く
まずはスニペットが登録されているスニペットパネルを開きます。[ウィンドウ]メニューから[スニペット]をクリックします。
step2 スニペットを挿入する
スニペットパネルには、デフォルトで多数のスニペットが登録されています。コード内に挿入したいスニペットを選んで、ダブルクリック or ドラッグ＆ドロップすると、該当するコードが挿入されます。
次からがスニペットの本領発揮です。
step3 スニペットを登録する
普段よく使うコードは新規に登録することができます。たとえばCSS用のコメントや、よく使うハックセレクタなどを登録すると便利でしょう。
まずは、わかりやすくフォルダを作ります。[新規スニペットフォルダ]をクリックし、フォルダ名を付けます。その後、[新規スニペット]をクリックし、編集ダイアログを開きます。
- 名前
- スニペットの名前をつけます。
- 説明
- どんなスニペットかわかりやすい説明を入れておくといいでしょう。
- スニペットの種類
- [選択範囲を囲む]の場合、選択範囲の前後にそれぞれ何を挿入するかを指定できます。選択範囲をタグで囲むような場合に使います。[ブロックの挿入]は、登録されたコードがそのまま挿入されます。
- プレビュータイプ
- スニペットパネルのプレビューペインに[デザイン]で表示するか、[コード]で表示するかを選択します。
すべて設定後[OK]をクリックすればオリジナルスニペットの完成です。
また、既に挿入されているコードを、スニペット化することも可能です。スニペットにしたい部分を選択し、右クリックして[新規スニペットの作成]をクリックします。あとは同様です。
step4 スニペットをキーボードショートカットで使う
さらにガッツリとスニペットを使いこなしたい場合には、キーボードショートカットを割り当てることもできます。スニペットパネルを右クリックし、[キーボードショートカットの編集]をクリックします。
キーボードショートカットを割り当てたいスニペットを選択して、実際に使いたいショートカットを押します。もしすでに使われているショートカットであれば警告がでるので安心です。
Dreamweaverのオンラインヘルプも参考にしてみてください。（こう
）
お問い合わせ
メルマガ