Sponsored Link
この記事の目次
Emmet記法でのhtmlコーディング
htmlコーディングでEmmet記法を使用する場合は、基本的には「要素名」を入力し、直後に[Tab]キーを押す流れです。
注意すべきは、Emmet記法で入力後は他の操作をせず[Tab]キーを押す必要がある点です。
もし[Space]キーを押すなどの他の操作をしてしまった場合、打ち直しを行いましょう。
また「{}(波カッコ)」は必ず半角で記述しましょう。全角の場合、ただの文字列として認識・処理されます。
htmlのEmmet記法(基本編)
①要素のみと兄弟要素
Emmet記法でhtmlを記述する場合は基本中の基本として「要素名[Tab]」で展開ができます。
また同一階層の要素、つまり兄弟要素も「要素名+要素名[Tab]」で展開ができます。
まずは「基本編①要素のみと兄弟要素」をCodePenのウィンドウを使って行ってみましょう。
例題1-A. HTMLタブ「要素のみ」のEmmet記法
div[Tab]
例題1-B. HTMLタブ「兄弟要素」のEmmet記法
header+main+footer[Tab]
See the Pen Emmet練習 html基本編①要素のみと兄弟要素 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
それぞれ・・・
例題1-Aの展開
<div></div>
例題1-Bの展開
<header></header>
<main></main>
<footer></footer>
・・・と展開されていれば正解です。
②テキスト付き要素
htmlタグは要素名をそのまま打ち込んでTabを押せばいいですが、テキストも「要素名{テキスト}[Tab]」と、
テキストを波カッコで囲ってTabを押すことで展開します。
次は「基本編②テキスト付き要素」をCodePenのウィンドウを使って行ってみましょう。
例題2. HTMLタブ「テキスト付要素」のEmmet記法
p{Emmetで爆速コーディング}[Tab]
See the Pen Emmet練習 html基本編②テキスト付き要素 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
例題2の展開
<p>Emmetで爆速コーディング</p>
・・・と展開されていれば正解です。
③要素の階層と要素数指定
htmlの基本は入れ子構造でしたね。入れ子構造もEmmetで展開すれば爆速。
「要素名>要素名[Tab]」で入れ構造を作ることができ、「>要素名」を増やすことで階層を増やすこともできます。
また入れ子の「子」は、「子の要素名」に「*数」で要素数を指定することができます。
次は以下の「基本編③要素の階層と要素数指定」をCodePenのウィンドウを使って行ってみましょう。
例題3-A. HTMLタブ「要素の階層(1)」のEmmet記法
ul>li[Tab]
例題3-B. HTMLタブ「要素の階層(2)」のEmmet記法
div>ul>li>a[Tab]
例題3-C. HTMLタブ「階層と要素数指定」のEmmet記法
ul>li*3[Tab]
See the Pen Emmet練習 html基本編③要素の階層と要素数指定 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
それぞれ・・・
例題3-Aの展開
<ul>
<li></li>
</ul>
例題3-Bの展開
<div>
<ul>
<li><a href=””></a></li>
</ul>
</div>
例題3-Cの展開
<ul>
<li></li>
<li></li>
<li></li>
</ul>
・・・と展開されていれば正解です。
④id・class付き要素
要素にはidやclassという名前をつけることができ、細かい指定を行えましたが、その指定もEmmetなら爆速で終わります。
idの場合は「要素名#id名[Tab]」、classの場合は「要素名.class名[Tab]」でid・class付きの要素の展開が行えます。
ではhtml基本編の最後に以下の「基本編④id・class付き要素」をCodePenのウィンドウを使って行ってみましょう。
例題4-A. HTMLタブ「id付き要素」のEmmet記法
div#container[Tab]
例題4-B.HTMLタブ「class付き要素」のEmmet記法
div.logo[Tab]
例題4-C. HTMLタブ「id+class付き要素」のEmmet記法
div#container.logo[Tab]
See the Pen Emmet練習 html基本編④id・class付き要素 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
それぞれ・・・
例題4-Aの展開
<div id=”container”></div>
例題4-Bの展開
<div class=”logo”></div>
例題4-Cの展開
<div id=”container” class=”logo”></div>
・・・と展開されていれば正解です。
htmlのEmmet記法(番外編)
①htmlのひな形
Emmet記法ではなんと!記述量の多いhtmlのひな形をたった一文字「![Tab]」で展開することができます。
展開したあとはコードの変更・追加・削除をして、書き換えのみ行えばよいという状態に爆速でできます。
以下の「html番外編①htmlのひな形」をCodePenのウィンドウを使って行ってみましょう。
例題5. HTMLタブ「htmlのひな形」のEmmet記法
![Tab]
See the Pen Emmet練習 html番外編①htmlのひな形 by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
例題5の展開
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body></body>
</html>
・・・と展開されていれば正解です。
②ダミーテキスト
ウェブサイト制作を進めるうち、ダミーテキストが必要になる場面が必ず訪れます。
「ダミーテキストダミーテキスト・・・」とテキストをタイプしたりコピペしてもよいですが、Emmet記法ならこれすらも爆速。
ウェブデザインの世界では非常に有名なダミーテキスト「lorem ipsum」を「lorem[Tab]」で展開することができます。
また「lorem5[Tab]」のように「lorem」に続けて数値を打って展開すると、入力数値と同じ単語数に制限することができます。
では以下の「html番外編②ダミーテキスト」をCodePenのウィンドウを使って行ってみましょう。
例題6-A. HTMLタブ「ダミーテキスト」のEmmet記法
lorem[Tab]
例題6-B. HTMLタブ「ダミーテキスト(単語数制限)」のEmmet記法
lorem5[Tab]
See the Pen Emmet練習 html番外編②ダミーテキスト by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.
それぞれ・・・
例題6-Aの展開
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ab tempore ipsa beatae recusandae nisi quas perferendis id nam possimus molestias, quis, deserunt rerum! Itaque, non dignissimos! Et, iure tenetur?
例題6-Bの展開
Lorem ipsum dolor sit amet.
・・・などと展開されていれば正解です。(文字列はランダム)
![[コーディングの応用] JavaScriptライブラリ「jQuery」とは?よく使うjQueryプラグインの紹介](https://webcre8tor.com/wp-content/uploads/2024/09/share.png)
![[コーディングの応用] どうしても覚えてほしいレイアウトを簡単に組む方法!フレックスボックス(flexbox)](https://webcre8tor.com/wp-content/uploads/2022/11/webdesigna09_01.jpg)
![[コーディングの応用] どうしても覚えてほしいスマートフォン対応!レスポンシブWebデザイン(RWD)](https://webcre8tor.com/wp-content/uploads/2023/12/domenico-loia-EhTcC9sYXsw-unsplash-scaled.jpg)