06 ホームページ中級講座 便利なEmmet!
目次
Emmetとは?
Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダンなエディタ(VS Code、Sublime Text、Atomなど)に対応しています。Emmetを使うことで、数秒で複雑なHTML構造を楽に生成できます。
!
から始める基本操作
まず、HTMLの基本構造をすばやく生成するために、Emmetの!
を使ってみましょう。
- エディタを開く
使用するエディタ(例: VS Code)で、新しいHTMLファイルを作成します。 !
を入力
ファイル内に!
を入力します。- タブキーを押す
タブキーを押すと、以下のHTMLの基本構造が一瞬で生成されます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
headerにh1と文字を入れる場合
Emmetのショートカットで header>h1{Hello World} と入力し、タブキーを押します。
<header> <h1>Hello World</h1> </header>
header
<header>
タグを生成します。主に見出しやナビゲーションなど、ページのヘッダー部分を定義します。>
子要素を生成することを示します。h1
<h1>
タグを生成します。ページやセクションの主要な見出しに使用します。{Hello World}
{}
の中に入力した文字列が、生成されるタグの中身として追加されます。
liを3行作成 ナビゲーションメニュー
Emmetのショートカットで nav>ul>li*3>a{リンク$} と入力し、タブキーを押します。
<nav> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク2</a></li> <li><a href="">リンク3</a></li> </ul> </nav>
nav
<nav>
タグを生成します。- ナビゲーションメニューを定義するために使用されるHTML要素です。
>
- 子要素を作成することを指定します。
- ここでは、
<nav>
の中に<ul>
を生成します。
ul
<ul>
タグ(無秩序リスト)を生成します。- リスト項目をまとめるために使用されるHTML要素です。
>li*3
<li>
タグ(リスト項目)を生成し、それを3つ作成します。*3
は繰り返し回数を指定する部分です。
>a
- 各
<li>
の中に<a>
タグ(リンク)を生成します。 <li>
は親要素で、<a>
はその子要素となります。
- 各
{リンク$}
{}
の中に入力した文字列が<a>
タグの中身として出力されます。- **
$
**は、繰り返しの回数をインクリメントして数字を挿入します。
例えば、リンク$
とすると、以下のように番号付きのテキストが自動生成されます:リンク1
リンク2
リンク3
Emmentが動かない時
「コピペ」の場合、文字列に不要な空白や隠れた文字(不可視文字)が混入していることが原因で、Emmetが正しく動作しないことがあります。コピペではなく、直接 div.box
などと入力してTabキーを押すことで正しく展開されるか確認してください。
またエディタ側で無効化されていたり、ファイルの種類が対応してなかったりすると使えません。Emmet は対応する言語モード(HTML、CSS、JavaScript、PHP など)でしか機能しません。
練習してみよう
練習 1: シンプルなボックス
div.box
<div class="box"></div>
練習2: 見出しと段落
h1{タイトル}+p{説明文}
<h1>タイトル</h1> <p>説明文</p>
練習3: リストの生成
ul>li*3{項目$}
<ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul>
練習4:ナビゲーションメニュー
nav>ul>li*5>a[href=”#”]{リンク$}
<nav> <ul> <li><a href="#">リンク1</a></li> <li><a href="#">リンク2</a></li> <li><a href="#">リンク3</a></li> <li><a href="#">リンク4</a></li> <li><a href="#">リンク5</a></li> </ul> </nav>
練習5: カードレイアウト
div.card*3>h2{タイトル$}+p{コンテンツ$}
<div class="card"> <h2>タイトル1</h2> <p>コンテンツ1</p> </div> <div class="card"> <h2>タイトル2</h2> <p>コンテンツ2</p> </div> <div class="card"> <h2>タイトル3</h2> <p>コンテンツ3</p> </div>
次は、装飾系
あわせて読みたい


07ホームページ中級講座 CSSで作成するロゴとグラデーションを使ったナビゲーション
HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネットワークサービス 株式会社</title> <link rel="style...
動画を確認しながらのHTMLのマークアップ練習
下記の動画を参照後、HTMLのマークアップ練習を行います。