• コーディング ファクトリーHOME
  • Coding Methodology
  • 第48回 zen codingの便利な機能を活用した効率的なコーディング術

コーディングメソドロジー

第48回 zen codingの便利な機能を活用した効率的なコーディング術

コーディングをより効率的行うDreamweaverのプラグイン、「zen cording」は有名ですが、今回はあまり使われてない? zen cordingの活用すべきテクニックをご紹介します。なお、今回紹介する機能を任意のキーボードショートカットに割り当てることでさらに効率的になります。

Match Pair InwardとOutward

図1[コマンド]>[Zen Coding]を展開したイメージです。

図1[コマンド]>[Zen Coding]を展開したイメージです。

これはそれぞれ、
Inward → 子タグの選択
Outwoard → 親タグの選択

という機能です。

例)下記のようなタグの場合、「テキスト」という文言内にカーソルを置いた時の選択範囲です。


Inward


上の状態からOutwoardを実行すると・・・


という選択範囲になります。

これを活用することで素早く意図した範囲を選択することができます。

Wrap with Abbreviation

図2

図2

これは選択範囲をタグで囲むことができる機能です。

例)下記の選択範囲の時に実行するした場合

まず図2のようなダイアログがでます。そこに囲みたいタグを入力し、OKを押すと・・・

このようにspanをaタグで囲うことができます。
先述のInwardと組み合わせることでさらに便利に使うことができます。

Previous Wdit PointとNext Edit Point

これはそれぞれ、
Previous → 前の編集領域にカーソルを移動
Next → 次のの編集領域にカーソルを移動

という機能です。
編集領域とはタグとタグの間や「"" 」(空のダブルクォーテーションの間) 等です。
例えば「alt=""」のように空のaltに素早くカーソルを移動することができ、スピードアップが可能になります。

Remove Tag

これはタグの中にカーソルを入れたときに実行すると、その開始タグと終了タグのみを削除してくれる機能です。
例)下記タグの場合


spanタグ内にカーソルを置いた状態で使うと・・・


Spanタグのみきれいに削除してくれます。
修正や組み方の変更などに使えるので、知っておくと便利です。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム