html初心者にもEmmet入力は、強い味方になります。
広告
htmlの入力軽減方法の1つにEmmet入力があります。 特定のコマンドを覚えて、それを対応するテキストエディタで入力すると、入力作業が軽減できる機能、あるいは、書式です。
これまで、コマンドを覚えるのが大変と考え使わないで来ましたが、少し、覚えてみることにしました。 すると、かなり便利なことに気が付きました。
おそらく、複雑なこともできるとは思いますが、使い始めは、簡単でよく使うところから覚えるのがポイントです。
私が使っているVisual Studio Codeでは、言語指定をhtmlに変更後、Emmet書式で入力し、Tabキーを押すことで変換できます。
Visual Studio Codeでの言語モードの切替
ドキュメントの新規作成直後は、Plane Text になっています。右下に、表示がありますので、ここをマウスでクリックします。
上部中央に入力ボックスが表示されます。
ここでhtmlとタイプし、エンターキーを押します。 入力補助が有効なので、htまでタイプしてリターンを押せば、htmlモードに切り替わり、Emmet入力が有効になります。
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入力は、いろいろなエディタで対応しているので、あなたの使用しているエディタでも利用できるかもしれません。
