WEBの作業が楽になるテクニック総まとめ 第7回
![]() |
|
クリップ機能で コーディングの スピードを上げる 文=川下城誉(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」](attach/images/201006/websagyo7/49-1.jpg)
【1】インターフェイスが美しく、動作が軽いMac OS X用のテキストエディタ「Coda」
![クリップにソースとプレースホルダ、tabトリガを設定する。わかりやすいようにタイトルもつけよう](attach/images/201006/websagyo7/49-2.jpg)
【2】クリップにソースとプレースホルダ、tabトリガを設定する。わかりやすいようにタイトルもつけよう
![「img+tabキー」で入力した例。このようなソースをすばやく挿入でき、カーソル位置も指定できる](attach/images/201006/websagyo7/49-3.jpg)
【3】「img+tabキー」で入力した例。このようなソースをすばやく挿入でき、カーソル位置も指定できる
![よく使うタグを登録しておくと便利だ。HTML、CSS、JavaScriptなどを登録しよう](attach/images/201006/websagyo7/49-4.jpg)
【4】よく使うタグを登録しておくと便利だ。HTML、CSS、JavaScriptなどを登録しよう
![インターフェイスが美しく、動作が軽いMac OS X用のテキストエディタ「Coda」](attach/images/201006/websagyo7/49-1.jpg)
【1】インターフェイスが美しく、動作が軽いMac OS X用のテキストエディタ「Coda」
![クリップにソースとプレースホルダ、tabトリガを設定する。わかりやすいようにタイトルもつけよう](attach/images/201006/websagyo7/49-2.jpg)
【2】クリップにソースとプレースホルダ、tabトリガを設定する。わかりやすいようにタイトルもつけよう
![「img+tabキー」で入力した例。このようなソースをすばやく挿入でき、カーソル位置も指定できる](attach/images/201006/websagyo7/49-3.jpg)
【3】「img+tabキー」で入力した例。このようなソースをすばやく挿入でき、カーソル位置も指定できる
![よく使うタグを登録しておくと便利だ。HTML、CSS、JavaScriptなどを登録しよう](attach/images/201006/websagyo7/49-4.jpg)
【4】よく使うタグを登録しておくと便利だ。HTML、CSS、JavaScriptなどを登録しよう
POINT MTなどのテンプレートタグも挿入可能 |
[INDEX]
>>> 47 立体的に見せたいパーツを簡単にシャープな印象に仕上げる
>>> 48 デフォルトのパターン機能を有効利用してオブジェクトをつくる
>>> 49 クリップ機能でコーディングのスピードを上げる
>>> 50 開発サーバでAjaxやPHPファイルを効率よく確認する
>>> 51 スクリプトの固定で複数のアクションを同時に編集する
>>> 52 「関連ファイル」バーで目的のファイルにすばやくアクセスする
【バックナンバー】WEBの作業が楽になるテクニック総まとめ
[第1回を見る][第2回を見る][第3回を見る][第4回を見る][第5回を見る][第6回を見る]