皆さん Webプロジェクトで、同じようなコードを 何度も入力していませんか？
Dreamweaver CCのスニペットを使いましょう スニペットは再利用可能なコードのブロックです どのWebプロジェクトでも使えます スニペットパネルが表示されていない場合は ウィンドウ／スニペットをクリックします Bootstrap_Snippetsのほか CSS_Effects、Responsive_Design_Snippetsなどがあります 私がよく使うのはHTML_Snippetsです 自分で作成したスニペットもあります 表示が省略されている場合は マウスでポイントすると、すべて表示されます では、スニペットを追加してみましょう 今回は例として、「Adding a Mailto Link」を使います よく使用する便利なスニペットで 電子メールを送信するためのリンクです 電子メールを送信するためのリンクです どんなコードか思い出せますか？
最初は、「Mailto」 そして、コロンです その後はどうだったでしょう？
そのようなときに、スニペットを使うと便利です フッターに移動します この<p>タグの間に「Mailto」を追加します 終了タグの前にカーソルを置き スニペットをダブルクリックします コメント付きで追加されました 実際のアドレスに書き換えるように促すコメントがあります 便利ですね 自分のアドレスを入力します ライブビューに表示されました 正しい構文で「Email Us」リンクが作成されました これがスニペットを追加する方法です 既存のスニペットを編集することもできます ページのリダイレクトを設定しましょう 多数のページから別のサイトに移動する場合と 同じサイトの別のページに移動する場合があります まずスニペットを選択して 「スニペットの編集」をクリックします 現在のリダイレクト先は「http://website.com/」ですが これを書き換えます 「http://adobe.com/」に変更します このスニペットは、多くのページで利用します すぐに呼び出せるように、トリガーキーを設定しましょう つまり、ショートカットです このスニペット専用のトリガーとして 「redirect」と名付けます 「OK」をクリックします 「redirect」というトリガーキーが作成されました 一番上のhead要素内で使いましょう ページが読み込まれる前に 別のページにリダイレクトします Tabキーを押します スニペットの追加も簡単ですが、トリガーを使えば よく使うスニペットを さらにすばやく入力できます では、いま設定したリダイレクトは削除して、独自のスニペットを作成してみましょう サイトの構築には、何度も同じコードを使います そして、クライアントに応じて 利用する色やフォントのグループが指定されており それを繰り返し使うこととなります そのような場合は、グループを作成します 「新規スニペットフォルダー」アイコンをクリックして 名前を付けます ここでは「My Snippet」にします 「HTML_Snippets」の中に入っているので クリックしたまま一番下にドラッグして 単独で置き、「HTML_Snippets」を閉じます 選択したまま、「新規スニペット」アイコンをクリックします スニペットに名前を付けます 内容がわかりやすい名前にします CSSで繰り返し使用する「Corporate Green」です ここでコードを指定します 「OK」をクリックします CSSで、挿入先を選択します このリード文のテキストを コーポレートグリーンにします この要素を制御するセレクターが ここです 「Corporate Green」をダブルクリックします できました 長いコード行をスニペットにすればさらに便利です ここに<header>タグがあります。
これらをすべて選択します このようなシンプルなヘッダーは、他の多くのプロジェクトでも利用します このようなシンプルなヘッダーは、他の多くのプロジェクトでも利用します 「新規スニペット」をクリックします 選択済みの部分が コードの挿入フィールドに入力されています 名前を付けます トリガーを指定します 「nav」は避けましょう Emmetで使用されているからです トリガー名は、HTMLエレメント名以外で 固有の名前にします ここでは「mynav」にします 「OK」をクリックします 使い方はこうです ページを新規作成して body要素内で、「mynav」と入力して Tabキーを押します HTML構造がすべて入力されました 5文字入力して、Tabキーを押すだけです スニペットがいかに便利かわかるでしょう 使うだけでも、編集しても役立ちます 自分で作ることもおすすめです 自分で作るときは 同期設定を有効にしておきましょう 右上のこのアイコンです そうすれば、スニペットがクラウドに同期され Dreamweaver CCを再インストールしても 別のマシンのDreamweaver CCでも使えます 最後に、素晴らしいスニペット Dreamweaver CC ご覧の皆さんに感謝します Dreamweaver CCには他にも多数のチュートリアルがあります ぜひご覧ください
