06 ホームページ中級講座 便利なEmmet!

  • URLをコピーしました!
目次

Emmetとは?

Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダンなエディタ(VS Code、Sublime Text、Atomなど)に対応しています。Emmetを使うことで、数秒で複雑なHTML構造を楽に生成できます。

!から始める基本操作

まず、HTMLの基本構造をすばやく生成するために、Emmetの!を使ってみましょう。

  1. エディタを開く
    使用するエディタ(例: VS Code)で、新しいHTMLファイルを作成します。
  2. !を入力
    ファイル内に ! を入力します。
  3. タブキーを押す
    タブキーを押すと、以下の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>
  1. nav
    • <nav>タグを生成します。
    • ナビゲーションメニューを定義するために使用されるHTML要素です。
  2. >
    • 子要素を作成することを指定します。
    • ここでは、<nav>の中に<ul>を生成します。
  3. ul
    • <ul>タグ(無秩序リスト)を生成します。
    • リスト項目をまとめるために使用されるHTML要素です。
  4. >li*3
    • <li>タグ(リスト項目)を生成し、それを3つ作成します。
    • *3繰り返し回数を指定する部分です。
  5. >a
    • <li>の中に<a>タグ(リンク)を生成します。
    • <li>は親要素で、<a>はその子要素となります。
  6. {リンク$}
    • {}の中に入力した文字列が<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のマークアップ練習を行います。

よかったらシェアしてね!
  • URLをコピーしました!
目次