モーリーのメモ

アプリ開発等（プログラミング、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』でも行けました。

  • 例１
bgc#04a6eb+c#fdffff+w500+mr-+ml-

background-color: #04a6eb;
color: #fdffff;
width: 500px;
margin-right: auto;
margin-left: auto;
  • 例２
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で開いて編集します。
＊テキストエディットで編集したら、文字コードのせいかバグりました。編集する前に、オリジナルをコピペして退避しておいて下さい。

  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"]っていう書き方もあります。