【Emmetチートコード】よく使うものまとめ

こんにちは、メトロです٩(ˊᗜˋ*)و

ここではEmmetで僕がよく使うもの、いわゆるチートコードを紹介しています!

 

※僕がスキルアップするごとに更新されます。

 

こういうやつ↓

 

 

使い方(Atomの場合)
・パッケージのインストールでEmmetと検索しインストール
・コード+tabボタンで使う

 

Emmetのチートコードが載ってるサイト

一応引用していますが、リンクで飛んでくれた方がわかりやすいので、引用元のサイトで見てください。

Emmet Documentation

Emmet Documentation

多分公式のやつです。

 

Emmetの使い方

「はじめて」でも簡単!Emmetの使い方とよく使うパターン集

上記リンクの記事の下部によく使うパターン集が載っています。

『HPcode』さんからの引用

Emmetの使い方

EmmetはHTMLとCSSの記述を短縮するために使える記法です。HTML、CSSそれぞれの書き方を見ていきましょう。

EmmetでHTMLを記述

index.htmlなど、htmlファイルを作成してEmmetが使えるエディタで開いてください。

要素 + Tab が基本

基本としては、divなどの要素を入力してTabキーを押すとHTMLタグとして保管されるような仕組みとなっています。

h2と書いてTabキーを押すと、以下のようなHTMLが作られます。

コピー<h2></h2>

 

Emmet『Myチートコード』

自分がよく使うショートハンドを、Myチートコードとして書き出してみました。

頻出のものはマーカーつけてます。

HTML

!→HTMLテンプレ(jaに変える)

link→スタイルシート読み込み

link:css→css読み込み(css/入れる、一番下に入れる)

link:favicon→favicon読み込み

script:src(bodyの閉じタグ前、js/script.jsを入れる、一番下に入れる)

.ほにゃらら→div class=”ほにゃらら”

ul>li.クラス名*5→メニュー5個(ヘッダーでよく使う)

CSS

c#000→color

bg→背景色

まとめ

自分用チートコードを使うといい感じです。

Emmetを使って爆速でコーディングしていきましょう٩(ˊᗜˋ*)و

 

コメント