49 クリップ機能でコーディングのスピードを上げる - WEBの作業が楽になるテクニック総まとめ 第7回 | デザインってオモシロイ -MdN Design Interactive-

49 クリップ機能でコーディングのスピードを上げる - WEBの作業が楽になるテクニック総まとめ 第7回

2024.9.5 THU

【サイトリニューアル!】新サイトはこちらMdNについて

WEBの作業が楽になるテクニック総まとめ 第7回



Tips 49
クリップ機能で
コーディングの
スピードを上げる


文=川下城誉(CREAMU)


テキストエディタ「Coda」【1】には、「クリップ」という機能がある。これはOSの単語登録のようによく使うソースコードを登録しておき、「文字列+Tabキー」で簡単にそのソースを記述できるという機能だ。Dreamweaverにおけるスニペットという機能に当たる。よく使う<div>タグや<p>タグ、見出しタグ、<img>タグなどは一から書き始めてコード補完で入力していく場合が多いだろう。しかし、クリップに登録しておくと、たとえば、<p>タグの開始タグと終了タグを挿入したい場合、P+tabキーを入力することで「<p></p>」というソースを挿入できる。しかも、開始タグと終了タグの間にカーソルを置いたままにしておけるため、すぐに中のソースを書き始められる。「ウインドウ/クリップ(command+control+Cキー)」でパネルを開いて、「+」をクリックしてクリップを登録しよう。ソースを入力したあと、タイトルとプレースホルダ(クリップ挿入後のカーソルの位置)、tabトリガを入力する【2】【3】【4】。

インターフェイスが美しく、動作が軽いMac OS X用のテキストエディタ「Coda」
【1】インターフェイスが美しく、動作が軽いMac OS X用のテキストエディタ「Coda」

クリップにソースとプレースホルダ、tabトリガを設定する。わかりやすいようにタイトルもつけよう
【2】クリップにソースとプレースホルダ、tabトリガを設定する。わかりやすいようにタイトルもつけよう

「img+tabキー」で入力した例。このようなソースをすばやく挿入でき、カーソル位置も指定できる
【3】「img+tabキー」で入力した例。このようなソースをすばやく挿入でき、カーソル位置も指定できる


よく使うタグを登録しておくと便利だ。HTML、CSS、JavaScriptなどを登録しよう
【4】よく使うタグを登録しておくと便利だ。HTML、CSS、JavaScriptなどを登録しよう


POINT MTなどのテンプレートタグも挿入可能


[INDEX]
>>> 47 立体的に見せたいパーツを簡単にシャープな印象に仕上げる
>>> 48 デフォルトのパターン機能を有効利用してオブジェクトをつくる
>>> 49 クリップ機能でコーディングのスピードを上げる
>>> 50 開発サーバでAjaxやPHPファイルを効率よく確認する
>>> 51 スクリプトの固定で複数のアクションを同時に編集する
>>> 52 「関連ファイル」バーで目的のファイルにすばやくアクセスする



【バックナンバー】WEBの作業が楽になるテクニック総まとめ
[第1回を見る][第2回を見る][第3回を見る][第4回を見る][第5回を見る][第6回を見る]
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在