joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

emmetを使ってhtml5のテンプレート入力補完する

投稿日:

Pocket

fondo1

概要

みなさんこんにちはcandleです。今回はemmetを使ったhtml5テンプレートの入力補完を試してみましょう。html5が使われだしてから、だいぶ経ちました。私も今ではhtml5で全てのhtmlを書いています。

ところが、htmlファイルを新しく作成する度に、html5のひな形を入力するのはかなり面倒です。そこでemmetの補完機能を使って入力してみましょう。

前提

emmetが入っているエディタを持っている
(私はAptana Studio 3を使います)

SPONSORED LINK


emmetでhtml5テンプレートを入力する

まずは、適当にhtmlファイルを作成します。お約束のindex.htmlを作りました。
Web - alltest_index.html - Aptana Studio 3 - _Applications_MAMP_htdocs

エディタ上で下の文字を打ち込み

html:5

「tab」かMacなら「Command+E」,Windowsなら「Ctrl+E」で自動的にhtml5テンプレートを書いてくれます。

Web - alltest_index.html - Aptana Studio 3 - _Applications_MAMP_htdocs-1

Web - alltest_index.html - Aptana Studio 3 - _Applications_MAMP_htdocs-2

テンプレートを書いてくれました。

だいぶ楽ですね。

lnagがenなのをjaに変更する

よくみるとindex.htmlのlangの所がenになっています。私はおもに、日本語のhtmlを書いているので、これをjaにする必要があります。手入力で変更するのは大変なので、環境設定から変更をします。

メニューの「Apptana Studio 3」から「環境設定」をクリック
スクリーンショット 2014-04-14 21.06.05

「Emmet」の「Variables」を選び、横の画面から「lang」の項目をダブルクリックします。

Preferences

別のウィンドウが現れたら、値が「en」になっているのを「ja」に変更してokを押します

Edit variable

環境設定の画面も「ok」を押して閉じましょう。これで先ほどのhtml5テンプレートコマンドを打つとlangがjaになります。

html:5

Web - gittest_index.html - Aptana Studio 3 - _Applications_MAMP_htdocs

langがjaになりました。



まとめ

emmetは便利です。htmlをちょいっと書く時はあまり恩恵を感じませんが、長いコードを書くと素晴らしがわかります。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Xcode5にCommand Line Tools(コマンドラインツール)をインストールする

概要 Xcodeを使ってみようと思っているcandleです。 特にOpenCVを使用したいので、Command Line Tools(コマンドラインツール)をインストールするわけですが、どうやら、ちょ …

Mac 標準terminal、iterm2のEmacsでpowerlineが文字化けするのを修正する

概要 みなさんこんにちはcandleです。 今回はemacsのpowerlineが文字化けしてしまうのを修正する方法を紹介します。 こちらのサイトを参考にさせていただいています。 https://gr …

Mac YosemiteのFinderをカスタマイズして使いやすくする

概要 みなさんこんにちはcandleです。今回はfinderの設定を行い、より使いやすいfinder構成を行いましょう。 finderはプログラマーでもよく使うソフトでこれが使いにくいとストレスしかた …

redmineのaccept pluginでチケットの担当者をボタン1つで自分にする

概要 みなさんこんにちはcandleです。今回はaccept pluginを使って、チケットの担当者を自分にする方法を紹介します。一般にチケットの担当者を変更するには、チケット画面から「編集」を押し、 …

wordpressでタグをボタンで挿入できる種類を増やす-AddQuicktag

概要 みなさんこんにちはcandleです。wordpressの記事を書いている時、 タグの挿入がもっと楽になれば便利なのにと思いました。私は記事の見出しはh3タグを使用しているのですが、h3タグのボタ …

  • English
  • 日本語

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ