はじめてでもできる！簡単に爆速でHTMLを書くための「Emmet」の使い方

Emmetとは？

まずは、実際にEmmet使ってるところを見てください。

こんな簡単な記載でHTMLを書くことができます。

Emmetのセットアップ

Emmetのセットアップ方法を紹介します。

今回は、以下の2つのエディタでEmmetを使用できるようにするためのセットアップ方法を解説します。

• Pycharm
• Sublime text3

どちらのエディタでもEmmetの機能は変わりません。 お好きな方を使用してください。

私はPythonコードを書くことが多いので Pycharmを使用していますが、エディタのみで使用する場合はsublime_textの方がいいと思います。

Pycharmのインストールから行いたいという方は以下のリンクを参考にしてください。

セットアップ、Pycharm

Pycharmの設定はとても簡単です。

「ファイル」→「設定」(Ctrl+Alt+s)→「エディター」→「Emmet」→「XML/HTML Emmetを使用可能にする」にチェック

以上です。これで、XMLファイル/HTMLファイルのファイルを編集する際にEmmetを使用することが出来ます。

セットアップ、sublime_text

エディタを開いたら、「Ctrl+Shift+p」でコマンドパレットを開き、「Package Control:Install Pacage」を選択してください。

書き方

ではEmmetの書き方を簡単に解説します。 よく使うであろう基本的な箇所の書き方のみ解説します。

HTMLへの変換方法

まず、Emmetの基本的な使い方として以下の手順でHTMLを書いていきます。

• HTML(XML)ファイルを作成する
• Emmetの特殊コードを書く
• HTMLに変換する(Tabを押す)

※Tab以外の設定にすればTab以外でのキーでHTML変換が可能です。今回はデフォルト設定での説明とします。

実際にやってみます。

HTML(XML)ファイルを作成する

「test.html」ファイルを適当な場所に保存します。 そのファイルを先程設定したエディタで開きます。

Emmetの特殊コードを書く

まずは試すことが目的なので「!」を書きます。

HTMLに変換する(Tabを押す)

!の右側にカーソルがある状態で「Tab」を押してください。 HTMLのテンプレに変換できます。

よく使うEmmetの書き方

Emmetは画面デザイン部分を書くCSSを変換する事もできますが、この記事ではHTMLの書き方に絞って紹介していきます。

html

HTMLの雛形を作るときは以下のように指定します。

• html
• html:5
• !

「!」はすでに何回か紹介していますが「！」と書くだけでHTMLの基本構文を書くことが出来ます。

タグ

HTMLにはpタグ(<p>)、divタグ(<div>)、aタグ(<a>)など様々なタグがあります。 これらのタグを書きたい時はpタグであれば「p」と書いて「Tab」を押してください。

class

タグの中にclass名を定義したい場合は「.」を使用します。

画像は「p.classname」をHTML変換した結果です。

.の右側が「class=""」の中に指定できます。

id

タグの中にidを定義したい場合は「#」を使用します。

画像は「p#idname」をHTML変換した結果です。

#の右側が「id=""」の中に指定できます。

外部ファイル定義(link)

linkタグで外部ファイルを取り込みます。

デザインを定義するCSSや画面のアニメーションや実際のシステムの処理を行うjsのファイルを読み込むことで、読み込んだファイルの内容を取り込むことが出来ます。

relとhrefのプロパティがデフォルトで設定されます。

relにはファイルの種類(デフォルトはstylesheet)、hrefにはファイルの場所を設定してください。

リスト(ul,li)

リストを表示したい時に、ul、liを使用します。

少しむずかしい書き方になりますが、「>」と「*」を使用しています。

「○○>XX」は○○の中にXXがあるという意味になります。 「○○*3」は○○が3個分あるという意味になります。

以下のように変換されます。

テーブル(table,tr,td)

最後にテーブルを書く場合の書き方です。

テーブルの場合、「tr」と「td」は省略することが出来ます。

「.row」「.col」のようにクラス名だけ指定することで、 テーブルの要素を勝手に判断しテーブル用のHTMLに変換してくれます。