読者です 読者をやめる 読者になる 読者になる

モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

HTMLとCSSをEmmetで書いてみる!:Visual Studio Code

Emmet VSCode

 Emmetとは、HTMLとCSS を省略記法で、効率よく書くためのプラグインです。
 Visual Studio Code(以下、VSCode)では、標準で使えます。
 例えば、

html:5

と入力して、Tabキー(*VSCodeの場合)を押すと

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

↑のようにコードが展開されます。
 もう一例、

table>tr>th+td

と入力して、Tabキーを押すと

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

となります。
 という風に、少ない文字数で書くことが出来ます。
 VSCodeの他にも、Atom等、プラグインを導入することでEmmetが使用できるコードエディタは多数あります。

使用環境

 私が使用している環境です。

Emmetの公式サイト

 Emmetの公式サイトです。

Emmetが使えるコードエディタ

 Emmetが使用できるコードエディタは、公式サイトの下記のページで確認出来ます。

Emmetの使用方法

 VSCodeでは、プラグインのインストールは必要ありません。
 .htmlファイルを作成すると、HTMLのEmmetの記法が使用できます。
 CSSも同様に.cssファイル上で使用できます。
 Emmetの有効無効は、拡張子で判別しているようです。
 ざっと調べたところ、

  • HTMLのEmmet記法が使える拡張子
    • .html、.xml、.xsl、.php、.asp、.aspx、.cshtml
  • CSSのEmmet記法が使える拡張子
    • .css、.less、.scss

 他にもあるかもしれません。

Emmetの書き方

 HTMLとCSSに対応したEmmetのコードを入力後、Tabキーを押下して展開します。
 この記事の冒頭の例に書いたやり方です。

HTMLとCSSのコードとEmmetのコードの対応一覧

 下記のリンクで一覧できます。

 全部上記の『Cheet Sheet』に書いてありますが、少しピックアップします。

ネスト(入れ子)

ネストするには、『>』を使います。

ol>li
<ol>
    <li></li>
</ol>

同階層

同階層にするには『+』を使います。

dl>dt+dd
<dl>
    <dt></dt>
    <dd></dd>
</dl>

親階層

親階層にするには『^』を使います。

ul>li^ol>li
<ul>
    <li></li>
</ul>
<ol>
    <li></li>
</ol>

マルチ

複数まとめて作るには『*』を使います。

ol>li*2
<ol>
    <li></li>
    <li></li>
</ol>

グループ化

グループ化するには『()』でくくります。

table>(tr>th+td)*2
<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

テキスト

タグ内のテキストは『{}』でくくります。

a{リンクだよ}
<a href="">リンクだよ</a>

ID、CLASS

IDは頭に『#』、CLASSは『.』を頭に付けます。

input#myid.myclass
<input type="text" id="myid" class="myclass">

CSS

 公式のCheet Sheetでは、プロパティ名と値は『:(コロン)』区切りになっていますが、無くても行けました。
 『auto』の指定は『-』や『a』でも行けました。

  • 例1
bgc#04a6eb+c#fdffff+w500+mr-+ml-
background-color: #04a6eb;
color: #fdffff;
width: 500px;
margin-right: auto;
margin-left: auto;
  • 例2
pd5-10+bgc#337ab7+c#fdffff+bdc#3e6da4+bdsn
padding: 5px 10px;
background-color: #337ab7;
color: #fdffff;
border-color: #3e6da4;
border-style: none;

htmlのひな形の『lang="en"』を『lang="ja"』に変える

 この記事の冒頭の例を見ると、『html:5』を展開した時、lang属性が"en"になっています。
 これを"ja"にする方法です。

手順

 下記のファイルをVSCodeで開いて編集します。
*テキストエディットで編集したら、文字コードのせいかバグりました。編集する前に、オリジナルをコピペして退避しておいて下さい。

  • /Applications/Visual Studio Code/Resources/app/node_modules/emmet/lib/snippets.json
  1. Applicationフォルダ内の『Visual Studio Code』を右クリックし、『パッケージの内容を表示』をクリック
  2. フォルダを展開して、上記のファイル『snippets.json』を探す
  3. 『snippets.json』を右クリックし、『このアプリケーションで開く』→『Visual Studio Code(1.6.1)』をクリック
  4. 3行目と4行目を下記のように修正して保存し、VSCodeを再起動する
{
	"variables": {
		"lang": "ja",
		"locale": "ja-JP",
		"charset": "UTF-8",

以上です。

あとがき

 使用頻度が低いものは、Emmetの書き方調べるのに時間かかっちゃいそうですが、タグを『<>』でくくってくれるだけでもありがたいですね。
 htmlのlang属性の変更方法を見つけるのに苦労しました。
 毎回直しても大したことないのですが、気になってしまった。
 html:5[lang="ja"]っていう書き方もあります。