概要
みなさんこんにちはcandleです。今回はemmetを使ったhtml5テンプレートの入力補完を試してみましょう。html5が使われだしてから、だいぶ経ちました。私も今ではhtml5で全てのhtmlを書いています。
ところが、htmlファイルを新しく作成する度に、html5のひな形を入力するのはかなり面倒です。そこでemmetの補完機能を使って入力してみましょう。
前提
emmetが入っているエディタを持っている
(私はAptana Studio 3を使います)
emmetでhtml5テンプレートを入力する
まずは、適当にhtmlファイルを作成します。お約束のindex.htmlを作りました。
エディタ上で下の文字を打ち込み
html:5
「tab」かMacなら「Command+E」,Windowsなら「Ctrl+E」で自動的にhtml5テンプレートを書いてくれます。
テンプレートを書いてくれました。
だいぶ楽ですね。
lnagがenなのをjaに変更する
よくみるとindex.htmlのlangの所がenになっています。私はおもに、日本語のhtmlを書いているので、これをjaにする必要があります。手入力で変更するのは大変なので、環境設定から変更をします。
メニューの「Apptana Studio 3」から「環境設定」をクリック
「Emmet」の「Variables」を選び、横の画面から「lang」の項目をダブルクリックします。
別のウィンドウが現れたら、値が「en」になっているのを「ja」に変更してokを押します
環境設定の画面も「ok」を押して閉じましょう。これで先ほどのhtml5テンプレートコマンドを打つとlangがjaになります。
html:5
langがjaになりました。
まとめ
emmetは便利です。htmlをちょいっと書く時はあまり恩恵を感じませんが、長いコードを書くと素晴らしがわかります。
