kledgeb Ubuntuの使い方や日本語化、アプリの使い方を紹介しています。 Ubuntuの最新情報も紹介しています。

Zen Codingプラグイン

  「Zen Coding」プラグインは、XMLやHTMLなどWeb向けのドキュメントの記述を支援するプラグインです。


  「Zen Coding」(Emmet)というWeb向けドキュメントの入力を支援する仕組みがあるのですが、これを「gedit」で実現するプラグインです。

  HTMLのようなマークアップ言語であれば、XMLなど他の言語でも「Zen Coding」の機能が利用できます。
  ここでは便宜上、よく利用されるHTMLで紹介します。

プラグインを有効にする

  「Zen Coding」プラグインを有効にするには、設定画面の「プラグイン」タブで「Zen Coding」にチェックを入れます。


略記の展開

  略記の展開とは、入力するHTMLを省略して記述し、その記述をHTMLに展開することです。
  略記の展開を利用することで、HTMLの記述にかかる時間を軽減します。
  また終了タグの記述ミス等、よくあるHTMLの記述ミスも軽減することができます。

  この機能は「Zen Coding」の中心となる機能です。

  略記のままでは不正なHTMLとして扱われてしまいます。
  略記を入力した後は、略記をHTMLに展開する必要があります。

  この略記をHTMLに展開する機能を「Zen Coding」が提供しています。

  HTMLの例

    例えば、以下の赤枠内のHTMLを記述するとします。


    同じ内容の行はコピー&ペーストで入力するとしても、それ以外の箇所は手入力していく必要があります。
    少し面倒ですね。
    また記述ミスする可能性もあります。

  略記の利用

    そこで、略記を利用します。
    上記のHTML展開するには、以下のように略記を記述します。


    略記の記述方法は、CSSやjQueryのセレクターの記述に類似しています。
    略記を展開すると、上記のHTMLに展開されます。

    略記の記述方法を新たに覚えなければなりませんが、CSSやjQueryの記述に慣れている人であれば、習得に時間はかからないでしょう。

略記の展開を行う

  上記の例を利用して、略記の展開を行ってみます。

  1.略記の入力

    HTMLを展開したい場所に、略記を記述します。


  2.展開する略記の指定

    HTMLに展開する略記を指定します。
    指定方法には2種類あります。

    キャレットの位置で略記を指定する方法

      1つ目は、キャレットの位置で略記を指定する方法です。
      行頭から現在あるキャレットの位置より前の文字列を略記として指定します。

      例えば以下のように行末にカーソルの位置を指定すると、行全体が略記として指定されます。     


      もし行頭に略記ではない別の要素が記述されていたとしても、どこまでが略記であるか「Zen Coding」側で判断するため、問題ありません。

    選択範囲で略記を指定する方法

      もうひとつの方法は、選択範囲で略記を指定する方法です。
      以下のように略記の記述位置を選択します。


  3.略記の展開

    略記をHTMLに展開します。

    「編集」メニューを開き「Zen Coding」を選択し、「Expand abbreviation」をクリックします。
    「Ctrl + E」キーを押しても良いです。


  4.展開完了

    以下のように、略記がHTMLに展開されます。



関連コンテンツ
同一カテゴリーの記事
コメント
オプション