実践的なデジタルの知識を体系的に学ぶ

本サイトについて掲載・取材等のお問い合わせ

解析ツール

ミンウェブ

オウンドメディアライブラリ

ミンウェブニュース

ミンウェブ辞書

運営：株式会社セルリア

ビジネスを成功へと導くWebコンサルティング・インターネット広告・Web制作を提供する会社です。

企業情報

サービス一覧

オウンドメディア制作

Webサイト制作・リニューアル

SEOコンサルティング

Webサイト課題診断

Dreamweaverでスニペットを登録する方法

スニペットは記述パターンを登録して必要なときに一塊のコードとして呼び出して挿入する機能です。Dreamweaverにもスニペットが搭載されているので、今回の記事ではDreamweaverのスニペット機能について解説します。

更新： 2023/03/02

カテゴリ：

本記事では、Dreamweaverでスニペットを登録する方法について解説します。

スニペットとは

日本語のテキスト入力を行う際に、頻出する単語や表現を辞書登録やクリップボードアプリなどに登録して、必要な箇所に貼り付けるといった作業効率化を行っている方も多いかと思います。

コーディングでも繰り返し同じ記述を利用する場合に、その記述パターンを登録して、必要なときに一塊のコードとして呼び出して挿入する技術があり、これを「スニペット（snippet）」と呼んでいます。

「スニペット」という英単語のもともとの意味は「切れ端」「断片」という意味です。

検索エンジンで検索結果の一部として表示される、ページを説明した要約文のことをスニペットと呼ぶこともありますが、コーディングやプログラミングにおいては一般的に切り貼りして再利用する「コードスニペット（コードの断片）」のことを指しています。

Dreamweaverにも、このスニペットを登録する機能が搭載されています。

Dreamweaverのスニペット登録方法

以下がDreamweaverで、スニペットを登録する手順です。

1.メニューバーから「スニペット」を選択

画面上部にあるメニューバーからウィンドウをクリックし、表示されたメニュー項目の中から「スニペット」を選択します。

2.「新規スニペット」のアイコンをクリック

「スニペット」をクリックすると、上の画像のようにスニペットパネルが開きます。このパネル右下にファイルマークに＋記号がついた「新規スニペット」のアイコンがありますので、これをクリックします。

3.名前／説明／トリガーキーを入力・設定

「新規スニペット」のアイコンをクリックすると、上の画像のようにスニペットを設定・入力するパネルが表示されます。

このパネルにある「名前」「説明」「トリガーキー」という項目から設定しておきましょう。

「名前」は、スニペットの名前を設定します。「説明」は、このスニペットを識別できる内容を記載します。「トリガーキー」では、コーディングの際に入力することでスニペットを挿入できるワードを指定します。

4.スニペットを入力

ここでは、表（table）のコードをスニペットとして登録してみましょう。「名前」は「table_1」、「説明」は「表１」、「トリガーキー」は「table1」と設定してみます。

「名前」「説明」「トリガーキー」が設定できたら、「スニペットの種類」を選択します。「スニペットの種類」には、「選択範囲を囲む」と「ブロックの挿入」があります。

「選択範囲を囲む」はコードを範囲選択した状態で、スニペットを挿入する際に用います。「選択範囲を囲む」では、選択範囲の「前に挿入」と「後に挿入」から挿入箇所を選択できます。

「ブロックの挿入」は、コード入力画面でカーソルのある場所に、スニペットをブロックとして挿入する際に用います。今回は、表のコードをスニペットにしたいので、「ブロックの挿入」を選択しておきます。

すべての項目が設定できたら、パネル右上にある「OK」をクリックします。これでスニペットが作成できました。

5.スニペットを挿入する

実際に作成したスニペットをコードに挿入してみましょう。スニペットを挿入する方法は２つあります。１つはトリガーキーを入力する方法、もう1つはスニペットパネルに表示されるスニペット名をクリックする方法です。

トリガーキーを入力する方法では、スニペットを挿入したい箇所に設定したトリガーキーを入力しtabキーをクリックします。

スニペットパネルに表示されるスニペット名をクリックする方法では、スニペットを挿入したい箇所にカーソルを合わせた状態で、スニペットパネルにあるスニペット名をクリックします。

上の画像のように、作成した表のスニペットが挿入されました。

まとめ

表やリンクなど、１つのWebサイトの中で繰り返し用いられるコードを、スニペットに登録しておくことで作業効率が大幅にアップします。

スニペットを登録する専用のアプリもありますがDreamweaverには、CSSやJavaScriptなどデフォルトで予め設定されているスニペットもあり、スニペットの登録もWebサイト作成用に詳細な項目まで設定できますので、大変便利です。

本記事を参考にして、Dreamweaverのスニペット機能を有効に活用してみましょう！

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

記事に対するご意見・ご要望フォーム

minweb編集部（株）セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ！完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術 <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を１つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。

【全3種】他の資料もチェックする

無料で資料をダウンロードする

運営会社

セルリアのロゴ

Web制作・広告・コンサルティングのセルリア

集客力を強化するWeb制作

オウンドメディア制作・立ち上げ

SEOコンサルティング・内製化

無料Webサイト課題診断

コーポレートサイトへ

人気の記事TOP20

今週

今月

全て

　

ランキングTOP100

Web制作・集客ならセルリア