Emmetを使ってHTMLファイルを爆速で作成する方法【VS Code対応】

サイト全体のHTMLコードを、数分どころか数秒で書き上げられたら便利だと思いませんか?実は「Emmet」を使えばそれが可能です。Emmetは、HTMLやXMLなど構造化されたコードを高速に開発するための手法で、短い記述から完全なコードへ瞬時に展開できる強力なツールです。

Emmetは多くの人気テキストエディタで使えるプラグインとして提供されています。Emmetでは、合理的でありながら非常に圧縮された独自の構文でページの骨組みを記述し、それを正式なHTMLコードへと展開します。その結果はまるで魔法のようで、たった1行のテキストが数百行のHTMLに変換され、静的ページやサイト全体の構造さえも数分で完成させられます。

この記事では、Emmetを使って完全な静的Webページを作成する手順を解説します。チュートリアルにはVisual Studio Codeを使用します。VS CodeにはEmmetが標準搭載されているため、追加設定なしですぐに使えるのがメリットです。Sublime TextやAtomなど他のエディタでも拡張機能を導入すればEmmetを利用できます。

サイト用ファイルを作成する

まずはVisual Studio Codeを起動しましょう。

メニューから「File → New File」を選択して、新しい空のドキュメントを作成します。

続いて「File → Save As」を選び、拡張子を「html」としてファイルを保存してください。これでEmmetの補完機能が有効になります。

基本構造を作る

Webページの各要素は、グループとサブグループに整理されています。Emmetでコーディングする際は、「各グループの中には、さらに別の要素群を含む項目がある」という階層構造を常に意識することが大切です。

注意:ここでは基本事項を説明しますが、進める前にHTMLの基礎文法を一通り理解しておくと、内容がよりスムーズに頭に入ります。

最も基本的なレベルでは、多くのサイトは「ヘッダー(header)」「メインコンテンツ(mainsite)」「フッター(footer)」という3つのセクションで構成されています。Emmetでこれらを作成するには、次のように入力します。

#header+#mainsite+#footer

各単語の前についた「#」は、「ID付きのdiv要素」を意味します。行末でEnterキーを押すと、Emmetが動き出し、この短い記述が3行の整ったHTMLへと変換されます。

ヘッダー部分の構造

一般的なサイトのヘッダーには、ロゴと1〜2個のメニューが含まれます。これらをページに追加するには、前の手順で展開したHTMLをそのまま残し、Headerのdiv内に直接入力していきます。例えば次のように入力します。

#logo+#menu_top+#menu_main

Enterキーで展開すると、ヘッダーの中にロゴ用と2つのメニュー用、合計3つのdivが追加されます。

Emmetでのグループ化

Emmetでは、括弧()で要素を囲むことでグループ化できます。これにより、複雑なページ構造も自由自在に組み立てられます。まずはここまでの入力をすべて取り消して、先ほどの基本的な #header+#mainsite+footer のコードだけを残しておきましょう。

次に、コード内の #header を以下の記述に置き換えます。

(#header>.logo+.menu.top+.menu.main^)

Emmetでは、> を使うと階層を1つ下に降り、^ を使うと1つ上の階層に戻ることができます。つまり「ある要素の中に入って子要素を追加し、その後外に出る」という操作が直感的に行えます。

結果は次のようになります。

(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer

この記述は日本語に訳すと「ID #header のdiv(グループ)を追加する。その中にクラス .logo、.menu.top、.menu.main の3つのdivを配置する。1階層上のグループ外に戻り、隣に ID #mainsite と #footer の2つのdivを並べる」という意味になります。

投稿(記事)部分の構造

一般的なサイトの投稿記事には、通常次のような要素が含まれます。

• タイトル
• 画像
• 抜粋(テキスト段落)

本来なら本文を読むためのリンクやカテゴリー・タグへのリンクなども必要ですが、ここではシンプルにするため、上記の3つの要素だけを使います。

今回追加するコードはこちらです。

(.post>h3{Post Title $}+img+p{Post Excerpt})*5

これはEmmetに対して「クラス .post のdivを作成し、その中にH3見出しのタイトル、画像、抜粋用の段落を配置せよ」と指示しています。

要素の後に「{TEXT}」と付けることで、その要素の中身を定義できます。つまり「{Post Title}」と指定すると、各H3タイトルの内容がプレースホルダーテキスト「Post Title」になるという意味です。「Post Title」の部分は自分の好きな文字列に変更でき、展開時にはそのテキストが記事タイトルとして出力されます。

「Post Title」の横にある $ は数値変数で、括弧の外にある「5」と連動して動作します。括弧の後ろの *5 は、括弧内の内容を5回繰り返すという指示です。$ は繰り返しごとに連番(1、2、3…)に置き換えられます。この数字は、ページに表示したい記事の数に合わせて自由に変更できます。

このコードを実際のコードに組み込むと、次のようになります。

(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)

フッター部分の構造

フッターには2つのグループ、つまりクラス「.design」と「.copyright」を持つ2つのdivを追加します。

コードは次の通りです。

(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))

これは「クラス .design のdivを作り、その中にクラス .designerslink のリンクを配置する。その隣にクラス .copyright の2つ目のdivを追加し、その中に『Copyright 2020 My Name』というテキストの段落を入れる」という意味になります。

最終的なコードはこうなります。

(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))

あとはEnterキーを押すだけで、サイトの完成です!

キー1回の入力で、これまで説明してきた超圧縮された文字列が、フルページ分の数十行にも及ぶ正規のHTMLコードへと一気に変換されます。

Ctrl + S キー、または「File → Save」からファイルへの変更を保存しましょう。作業結果を確認するにはブラウザを起動し、「File → Open」または外部のファイラーを使って、保存したHTMLファイルを見つけて開いてください。

まとめ

今回は、Emmetを使ってHTMLファイルを作成するための基本を学びました。もちろん、後からいつでもコードに戻って調整したり、要素を追加して拡張したりできます。

あなたはすでにEmmetをご存じでしたか?サイト制作に役立っている他の時短テクニックがあれば、ぜひコメント欄で教えてください。