6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【コーディングが爆速に】HTML/CSSのEmmet入門

Last updated at Posted at 2020-06-09

#はじめに
フロントは記述量が多くて大変!もうやだ!嫌い!覚えられない!
という方にぜひ知って頂きたいEmmetというものがあります。

Emmetを使えば作業効率が格段に上がります。知らなかった頃には戻れなくなります。

#Emmetとは
入力補完プラグインです。HTMLやCSSを省略記法で記述して展開する事で楽に入力することができます。AWS Cloud9,VScodeではデフォルトで使用できます。
(エディタによってはプラグインの導入が必要です。)

#どんなものか
例えば
スクリーンショット 2020-06-07 15.13.54.png
こんなメニューを作るためのHTMLは

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <header>
    <ul class="nav">
      <li class="nav__item"><a href="#">menu</a></li>
      <li class="nav__item"><a href="#">menu</a></li>
      <li class="nav__item"><a href="#">menu</a></li>
    </ul>
  </header>
</body>
</html>

こうなります。1からすべて記述するのはめんどくさいですよね。

Emmetを使うと同じコードが

!>header>ul.nav>li.nav__item*3>a[#]{menu}

こう書いてtabキーを押して展開するだけで出来上がります。早い!
ただ、Emmet自体も慣れるまでは大変だと思います。ここではよく使う記法をチートシートとしてご紹介します。

#Emmetチートシート
チートシートから、よく使うものを抜粋して以下に紹介しています。

##使い方
①矢印の左側を入力する
例) p → pタグ
tabキーを押す(※設定によっては異なる場合があります)
③コードブロックの内容が展開される
例)

<p></p>

##HTML

まずは、タグ名 + tabだけでも使ってみてください。
閉じタグ忘れの表示崩れと戦うことがなくなるのでストレスフリーになりますよ。

タグ名(a,h1,divなど) → タグ(閉じタグ付き)

<a href=""></a>
<h1></h1>
<div></div>

! → 雛形

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

link → スタイルシートのリンク

<link rel="stylesheet" href="">

◯◯.class名 → クラスがついたタグ

<div class="class-name"></div>

※divタグは**.class名**だけで作成できます。

◯◯#id名 → idがついたタグ

<div id="id-name"></div>

※divタグは**.id名**だけで作成できます。

ul > li → 入れ子

<ul>
  <li></li>
</ul>

h1 + h2 → 隣接

<h1></h1>
<h2></h2>

li*3 → 繰り返し

<li></li>
<li></li>
<li></li>

[" 属性値 "] (a["url"]、img["img"]など) → 属性付きタグ

<a href="url"></a>
<img src="img" alt="">

{ 文字 } (h1{タイトル}など)

<h1>タイトル</h1>

そしてこれらは組み合わせて記述できます。慣れたら15行くらいのメニューのマークアップは

!>header>ul.nav>li.nav__item*3>a[#]{menu}

これでできちゃいます。めちゃくちゃ便利です。

##CSS
プロパティの頭文字 + 値 + tabで記述します。
;の入力忘れも防げるので、基本だけ抑えたら試しながら覚えていくのがおすすめです。

c#fff → 文字の色

color: #fff;

bg → 背景色

background: #000;

色の初期値は#000(black)

w100 → 横幅

width: 100px;

デフォルトの単位はpx。px以外の単位は w100% のように入力する

fz10 → フォントの大きさ

font-size: 10px;

⚠️fsだとfont-styleになります!

p10-20 → padding(要素内の余白)上下10px, 左右20px

padding: 10px 20px;

値が2つ以上の時は -(ハイフン)で繋ぎます。

###覚えると便利なCSS
m0-a → 中央寄せ

margin: 0 auto;

df → 横並び

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;

db → display: block;なども使えます。ベンダープレフィックス(-webkit-など)も一気に出ます。

tdn → テキストの装飾(リンクの下線など)を消す

 text-decoration: none;

lstn → 箇条書きの・を消す

list-style-type: none;

tac → テキストの中央寄せ

text-align: center;

bd+ → 線の値を一気に指定する

border: 1px solid #000;

psl,psa → ポジションを自由に決める(top,bottom,left,rightと組み合わせる)

position: relative;
position: absolute;

#もっとEmmetを知りたい方へ

公式ページには、デモ動画や試し打ち、一覧チートシートがあります。

こちら では省略記法の絞り込み検索ができます。

覚えようと思うと大変なので、まずは頭の片隅にEmmetを置いてコーディングしてみてください。
気づいたらスピードアップしてること間違いなしです。

6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?