ドローイング空間

3D-CADを中心に、雑多なことをかいています。

html初心者にもEmmet入力は、強い味方になります。

広告

htmlの入力軽減方法の1つにEmmet入力があります。 特定のコマンドを覚えて、それを対応するテキストエディタで入力すると、入力作業が軽減できる機能、あるいは、書式です。

これまで、コマンドを覚えるのが大変と考え使わないで来ましたが、少し、覚えてみることにしました。 すると、かなり便利なことに気が付きました。

 

おそらく、複雑なこともできるとは思いますが、使い始めは、簡単でよく使うところから覚えるのがポイントです。

私が使っているVisual Studio Codeでは、言語指定をhtmlに変更後、Emmet書式で入力し、Tabキーを押すことで変換できます。

Visual Studio Codeでの言語モードの切替

ドキュメントの新規作成直後は、Plane Text になっています。右下に、表示がありますので、ここをマウスでクリックします。

右下に、表示がありますので、ここをマウスでクリックします。

上部中央に入力ボックスが表示されます。

上部中央に入力ボックスが表示されます。

ここでhtmlとタイプし、エンターキーを押します。 入力補助が有効なので、htまでタイプしてリターンを押せば、htmlモードに切り替わり、Emmet入力が有効になります。

htmlとタイプし、エンターキーを押します。

Emmet入力を使用する

ヘッダ部分などは、テンプレートを使いますので、そのあたりは、私は使いません。 記事本文の入力に使うタグの入力に使いますhtmlエディタのように、ツールバーが用意されていれば、 マウスで、必要なタグのツールバーボタンをクリックすれば良いのですが、Visual Studio Codeには、ツールバーは用意されていません。 それでも、Emmet入力を使えば、それもあまり気にならなくなります。

タグ名を入力して、Tabキーを押すと、開始タグと終了タグが入力され、カーソルがその間に移動します。

使用例

コメント

cをタイプしてTabキーを押します。

<!--  -->

タグの入力

h2をタイプしてTabキーを押します。

<h2></h2>

divの場合は、

<div></div>

属性の存在するタグ

属性にurlなどを入力する必要があるタグは、属性名も入力されます。 後は、ブラウザなどから、urlをコピペします。相対アドレスの指定方法が、 どうすれば良いのかよくわからないので、そのあたりは、私は、htmlエディタを使います。

aをタイプしてTabキーを押します。

<a href=""></a>

imgの場合は、

<img src="" alt="">

箇条書き要素

ul>li*3をタイプしてTabキーを押します。*の後に項目の数を入力します。すると指定した項目分のタグが展開されます。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

ol>li*2の場合は、

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

ちなみに、lu>li*2をタイプしてTabキーを押すと

<lu>
    <li></li>
    <li></li>
</lu>

間違ったタグのまま展開されるので注意が必要です。タグの有無をチェックしているわけではないようです。

テーブル要素

一番助かるのが、テーブルタグの入力です。

table>tr*2>td*3をタイプしてTabキーを押します。これでテーブルタグが作成できてしまします。後は、コピペでテーブルの中身を入力するだけです。

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

table>(tr>th*3)+tr*2>td*3の場合は、

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

いろいろ考えながら、使う必要はありますが、これだけ覚えれば、かなり入力が楽になります。

より詳しく知りたい方は、

Emmet Documentation

チートシートカンニングペーパー)が必要な方は、

Cheat Sheet

ドキュメントページを参考にしてください。そして、さらに、便利な技を見つけてください。

ドキュメントページを参考にしてください。そして、さらに、便利な技を見つけてください。 Emmet入力は、いろいろなエディタで対応しているので、あなたの使用しているエディタでも利用できるかもしれません。