Dreamweaver(ドリームウィーバー)のスニペット|頻繁に使用するコードをすぐに使えるように保存できる機能

スニペット


ホームページのコーディングをしている時に、

このコード良く使うからどこかに保存して使うときにコピペしようと

テキストメモなどに貼り付けて使ったりしていませんか?

Dreamweaver(ドリームウィーバー)でそれを簡単にしてくれる機能があります。

スニペットという機能です。

これを使えばhtmlやcssのよく使うコードをファイルとして保存することができ、

使用する際に呼び出せます。

Dreamweaver(ドリームウィーバー)を開くと右下の方に「ファイル」と同じところでタブに

「スニペット」とありますでしょうか?

スニペット

スニペット

もし表示されていないようでしたら、「ウィンドウ」⇒「スニペット」で呼び出してください。

スニペット2

スニペット2

この中には新規で作成する前からデフォルトで色々なコードが入ったスニペットがあります。

デフォルトで入っているコードを使用したことは無いのですが

気になるようでしたら一度内容を確認してみても良いと思います。

デフォルトのスニペットはtableでの記述やCSSを直接書いているので

使いどころが無いのが正直なところです。

スニペットの新規作成

スニペットの右下の方にある+マークがあるファイルのアイコンをクリックすると

新規のスニペットが作成できます。

スニペット3

スニペット3

「名前」と「説明」、「スニペットの種類」、コードを書く欄、「プレビュータイプ」があります。
・「名前」 任意
・「説明」 任意 空欄でも可
・スニペットの種類  1.選択範囲を囲む  2.ブロックの挿入
・プレビュータイプ  1.デザイン     2.コード

スニペットの種類で1.を選んだ場合、選択範囲を囲むようなコードに対して使います。

例を挙げるとブログのようにテキストをひたすら書いてhtmlを書かず、

最後に<div></div>で囲むなどの時に使えます。

スニペット4

スニペット4

「ブロックの挿入」は「前に挿入」「後ろに挿入」というのは無く

「コードの挿入」というのが1つだけあり、

選択した場所にそのままコードを入れる形となります。

プレビュータイプはコードでのプレビューか

ブラウザ上の見た目でのプレビューとなります。

スニペットの使用方法

先程の画像にある<div class=””></div>を選択範囲を挟むように挿入してみます。

スニペット5

スニペット5

そして先程のスニペットを選択し挿入。

スニペット6

スニペット6

すると下記のようにスニペットが挿入されます。

スニペット7

スニペット7

この例の様な短いコードではあまり使いませんが、

良く使うやCSSの初期化のコードなどをスニペットとして取っておけば

新しくサイトを立ち上げた際に大変便利です。

是非活用してみてください!


Pocket