「ドリームウィーバースニペット機能」使い方と現役webデザイナーの登録内容

2023年09月22日

本日はコーディングソフト「ドリームウィーバー」の機能のひとつスニペット機能の登録方法と使い方また現役webデザイナーがスニペットに何を登録しているかご紹介させていただきます。

コーディングソフトは様々ありますが、私はアドビ製品のドリームウィーバーを使用しています。利用している理由は特にはありませんが、もともとイラストレーターやフォットショップを使っていてその流れで使っています。

他のコーディングソフトで有名なのはVSコードなどがありイケてるウェブデザイナーさん（若い人たちなど）はVSコードを利用しているイメージがありますが、なぜかおじさんの私はドリームウィーバーを利用しています。

それではドリームウィーバーのスニペットについてご紹介していきます。

スニペット機能とは

まずは簡単にスニペット機能についてご説明させていただきます。

スニペット機能は定型文を登録することができます。長い文章やよく使うコードを登録し、ショートコートで呼び出したり、ダブルクリックで呼び出したりできる、時短機能です。

よく使う長いコードや難しいコードを登録してコーディングをemmet機能（入力をショートカットで補助）などと併用して爆速化することができる便利ツールです。

emmet機能と似ていると言えば似ていますが、もっと自分好みに登録できる点が大きな違いとなります。

スニペット機能登録・使用方法

登録方法をご紹介いたします。

まずは、画面上にスニペットを表示させます。表示されていない方は、上部メニューのウィンドウの中にスニペットがあるのでそちらをクリックまたはショートカット「Shift＋F9」ボタンで表示されます。

人によって表示される場所は違うと思いますが、だいたい右側に表示されます。

すでにデフォルトでブートストラップなどのスニペットが登録されていますので、こちらに自分好みのスニペットを登録していきます。

登録方法使い方はとても簡単です。先ほど表示させたスニペットパネルの下にアイコンがあるのでそこで、挿入・新規フォルダ作成・登録・編集ができます。

管理しやすいようフォルダを作ってから新規登録した方が使いやすいかと思います。
私はorijinalというフォルダを作ってそこに入れています。

上から2番目の感じです。

登録方法は管理しやすくフォルダを作成したのちにその中で登録を推して、登録したい文字列を入れるだけです。

登録をクリックするとポップアップがでてきますので、入力してOKをクリックで完成です。

下記は記入見本です。

ULを登録しています。
名前はわかりやすくお好きなものを入れていください。

トリガーですが、こちらがショートカットになりますので、覚えやすいものがいいと思います。
ショートカットを入力してtabボタンで挿入されます。トリガーは無しでも大丈夫ですが便利なので登録して使用するのがおすすめです。

スニペットの種類には選択範囲を囲むとブロックの挿入がありますが囲む感じのタグの場合は選択範囲を囲むで登録し、そのまま挿入したい時はブロックの挿入で大丈夫です。

あとはお好きなコードを入力すれば完了です。
（直接入力はミスもでるかもしれませんので、登録するときは登録したい文字をソース画面本体でドラッグした状態で登録ボタンを押すと自動的に反映されます。こちらがおすすめ）

後は、使用したいところで、アイコンの挿入をクリックするか、トリガーを入力してtabボタンをクリックするか、スニペット自体をダブルクリックでも挿入されます。

以上で簡単に登録できて、簡単に使用できます。

現役webデザイナーのスニペット登録内容

emmet機能もありますのであまりスニペット登録していませんが、せっかくなのでご紹介させていただきます。登録理由も簡単ですがご説明させていただきます。

html

<!--トリガー-->
ul

<!--登録内容ー-->
<ul class="">
	<li></li>
	<li></li>
</ul>

まずはulです。通常のulでtabをクリックすると、閉じタグのみでliがでないのでliも出るようにスニペット登録しています。

emmetをもともと使用して

ul>li*3

などで使用していましたが、>や*を推すときのshiftボタンを押すのが苦手なもので、スニペットにクラス付きで登録しています。
liの数は最低限の2個登録しておいて、後はctrlボタン＋Dの複製で数を調整しています。

<!--トリガー-->
dl

<!--登録内容ー-->
<dl class="">
	<dt></dt>
	<dd></dd>
</dl>

続いてはdlです。

こちらはulとほぼ同じ理由で登録しています。

<!--トリガー-->
ta

<!--登録内容ー-->
<table class="">
	<tr>
		<th></th>
		<td></td>
	</tr>
</table>

tableの一式をtaをトリガーで登録しています。
こちらも上記2つと同じ理由です。複製で中身の数は調整しています。

<!--トリガー-->
ii

<!--登録内容ー-->
<img src="img/" width="" height="" alt="" >

imgタグをiiのトリガーで登録しています。

imgを入力してtabをおすと、srcとaltのみでwidthとheightがでてこないので、こちらをスニペット登録しています。

以前はwidthとheightはレスポンシブデザインなので入れていませんでしたが、最近はグーグルさんの指示で入れるようにしていますので、登録しています。
※ドーリームウィーバーの画像挿入機能で画像を入れるとwidthとheightの数値が自動で入るので最近はそちらをメインで使用しています（SVG以外）。（ショートカットctrl＋alt＋i（アイ））

<!--トリガー-->
ar

<!--登録内容ー-->
<article class="">
	
</article>

<!--トリガー-->
se

<!--登録内容ー-->
<section class="">

</section>

articleをトリガーarで登録しています。

こちらは、そんなに長い文字でもないしなぜと思うかもしれませんが、純粋にタイピングミスが多いので登録しました。

なぜかこちらとsectionはタイプミスが多いので登録しています。

<!--トリガー-->
l

<!--登録内容ー-->
loading="lazy"

htmlはこれで最後です。

l(エル）をトリガーにしてloading=”lazy”を登録しています。imgが多い場合は一括で置換で最後にloading=”lazy”をimgタグに入れますが、少ない場合はスニペットで入力しています。

CSS

お次はCSSです。

CSSもsassのmixinがあるので機能的には被りますが、@includeを書くのが手間なのでスニペットを利用しています。あと、あまりmixinを使いすぎると管理が複雑になるので極力mixinは少なめでやっています。

<!--トリガー-->
sp

<!--登録内容ー-->
@include sp

mixinでspの部分に@media screen and (max-width: 768px)をいれており、

スマホの記述をするときに毎回spをトリガーにして@include spを読み込んでいます。これはほんとによく使うので重宝しております。

<!--トリガー-->
cc

<!--登録内容ー-->
display: flex;
justify-content: center;
align-content: center;

上下中央寄せをcc(センターセンターのイメージ）をトリガーで登録しています。

こちらもよく使うCSSなので入れています。

<!--トリガー-->
be

<!--登録内容ー-->
&::before{

    content: '';
    display: block;
    width: 10px;
    height: 10px;
    background:url("../img/aaa.svg") no-repeat  ;
    background-size: contain;
    position: absolute;
    top: calc(50% - 10px/2);
    left: 10px;
}

疑似要素を登録しています。
beをトリガーにして画像を疑似要素で読み込む記述を入れています。こちらも個人的によく使うので入れています。

<!--トリガー-->
af

<!--登録内容ー-->
&::after{

    content: '';
    display: block;
    width: 10px;
    height: 20px;
    background:#FF0000 ;
    position: absolute;
    top: 10x;
    left:calc(50% - 10px/2);
    transform:rotate(310deg);
}

こちらも疑似要素を登録しています。
afをトリガーにして見出しなどにあしらいをいれれるように疑似要素で読み込む記述を入れています。こちらも個人的によく使うので入れています。

本当はもう少しありますが、あまり効率が良くないようなものばかり登録していますのでここまでとさせていただきます。

またCSSのスニペットには一つ問題があってスニペットを挿入した際にインデントがバラけるのが難点です。解決方法があるかもしれませんが、ちょっと調べきれておりません。これだけなんとかしてもらえればもっと使い勝手がいいのにと思っています。

以上になります。

スニペットによく使うコードなどを登録しておくと、ミスも減りますしコーディングスピードも大幅に上がると思いますので、まだ使っていない方は是非一度お試しください。