コーディングを倍速にする「スニペット機能」の使い方

１）スニペット機能の利点
２）Dreamweaverのスニペット機能の使い方
３）スニペット登録しておきたいおすすめコード

１）スニペット機能の利点

スニペット機能とは、あらかじめコードを登録して必要な時に必要な箇所へ呼び出すことができるツールです。 コードを書く必要がないので、業務効率がぐんとアップします。

特に多くの記述が必要な場合に役立ちます。
例えば、こんなフォームがあったとします

例

このようなフォームを作るとき、以下のようなhtmlになります。

html

	<form action="" method="post">
    <table class="productOutline">
    <tr>
    <th><label for="お名前">お名前</label></th>
    <td><input type="text" name="textfield" value="Your message">
    </td>
    </tr>
    <tr>
    <th><label for="誕生日">お誕生日月</label></th>
    <td>
    <select name="月">
    <option value="1">1月</option>
    <option value="2">2月</option>
    <option value="3">3月</option>
    <option value="4">4月</option>
    <option value="5">5月</option>
    <option value="6">6月</option>
    <option value="7">7月</option>
    <option value="8">8月</option>
    <option value="9">9月</option>
    <option value="10">10月</option>
    <option value="11">11月</option>
    <option value="12">12月</option>
    </select>
    </td>
    </tr>
    <tr>
    <th>性別</th>
    <td>
    <span><input type="radio" id="man" name="sex" value="男性" checked="checked"><label for="man">男性</label></span>
    <span><input type="radio" id="woman" name="sex" value="女性"><label for="woman">女性</label></span>
    </td>
    </tr>
    </table>
    </form>

長いですね…。

このように、form関連のコードは入力内容が多いため、毎回忘れるコードの代表ではないでしょうか。

特にselectの年月日などは、あらかじめ登録しておくことでコーディング作業がぐっと楽になります。

２）Dreamweaverのスニペット機能の使い方

【スニペット機能の呼び出し方】

Dreamweaverを開き、ウィンドウ ＞ スニペット を選択します。
すると、スニペットのウィンドウが右側あたりに開きます。

【スニペット機能の構成】

１．スニペットを選択すると、その内容が上の方にプレビュー表示されます。
２．登録されているスニペットが表示されます。（フォルダで項目分けが可能）
３．スニペットの「名前」、その左にスニペットの説明をする「詳細」が確認できます。

【登録方法】

１）登録したいコードが含まれるフォルダを選択し、右クリック→「新規スニペット」を選択します。
２）スニペット登録ウィンドウが開きます。以下の通りコードを登録していきます。

◆選択範囲を囲む…ソース上で選択した要素の前後を囲むことができる

◆ブロックの挿入…ソース上のカーソルがある位置にコードを丸ごと配置する

【使用方法】

１）html、cssのコードを挿入したい箇所にカーソルを置きます。
２）使用したいスニペットを選択してダブルクリックすると、カーソルを置いた箇所にコードが挿入されます。
※「選択範囲を囲む」で登録しているスニペットの場合、挟みたい要素を選択することで開始タグと終了タグがその前後に挿入されます

「選択範囲を囲む」と「ブロックの挿入」のどちらで登録するか迷った場合は、「選択範囲を囲む」を選択することをおすすめします。

そうすることで、選択範囲の前後にコードを差し込むことも、最初にコード全体を挿入しておくこともどちらも可能になるため、使い勝手がよくなるからです。

３）スニペット登録しておきたいおすすめコード

初心者のうちは手打ちでコードを体にしみこませることも大事です。
とはいえ、毎回手打ちするのは非効率なものもありますので、そういったものはぜひこのスニペット機能を使って日々の作業を効率化しましょう。

●htmlのheaderにcssファイルを読み込ませる記述

<link rel="stylesheet" href="/css/style.css" media="all">

●htmlのheaderにjavascriptなどscript系ファイルを読み込ませる記述

<script type="text/javascript" src="/js/javascript.js">

●html5をIE8以下に適用

<!--[if lt IE 9]><script src="/js/html5shiv-printshiv.js"></script><![endif]-->

IE8以下はhtml5の新要素に対応していません。そのため、上記のコードをheaderに記載し、指定されたzipファイルをダウンロードして読み込む必要があります。
詳細は以下のサイトをご参照ください。

HTML5でのIE対応 : html5shiv

●テキストの画像置き換え

画像置き換えの詳細については「テキスト画像置換をする時にチェックしたいこと」の記事でチェック！
※cssの要素名は任意で書き換えてください。

.button {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

●「サンカク」をcss3で表現

テキストリンクに付与するサンカクやランディングページで下向きのサンカクを作るときに便利！ 5px、8pxの部分はサイズ、#000部分はサンカクの色なのでお好みで。

div:before {
	content:"";
	margin:0 auto;
	display:block;
	width:0;
	height:0;
	border:5px solid transparent;
	border-left:8px solid #000;
}

それ以外にも色々あるかもしれませんがキリがないのでこんなところでしょうか。
このマークアップブログ上でご紹介したコードを登録するのもおすすめです。