はじめに
最近Web制作の案件を受注できたプログラミング初心者。
Emmetついて、まとめたので投稿しますわ😇
目次
Emmetとは
HTMLの雛形
単体
要素を入れ子にする
要素を複数作成する
要素を同階層に作成する
idとclass
混ぜて使用してみた
CSSの記述
Emmetとは
HTMLやCSSの記述をサポートしてくるプラグインのこと。
独自の省略記法によるコーディング作業を効率化している。
Web制作のお仕事は出来上がった成果物に対して報酬が出るので、
時給という概念では捉えづらい🤔
作業時間が長くても報酬には比例しないため、作業時間を短縮できれば単価向上に繋がる。
そのため、Emmetを使いこなすことは重要かと考える👍
HTMLの雛形
!
↓
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>単体
div
↓
<div></div>要素を入れ子にする
div>p
↓
<div><p></p></div>要素を複数作成する
li*5
↓
<li></li><li></li><li></li><li></li><li></li>要素を同階層に作成する
header>h1+p
↓
<header><h1></h1><p></p></header>idとclass
☆id
#box
↓
<divid="box"></div>☆class
.p
↓
<divclass="p"></div>
p[class=box]
↓
<pclass="box"></p>★[]外で指定しなければ自動的にdivタグとなる。
混ぜて使用してみた
ul>(li[class=box$]>a{たくみの分身$})*5
↓
<ul><liclass="box1"><ahref="">たくみの分身1</a></li><liclass="box2"><ahref="">たくみの分身2</a></li><liclass="box3"><ahref="">たくみの分身3</a></li><liclass="box4"><ahref="">たくみの分身4</a></li><liclass="box5"><ahref="">たくみの分身5</a></li></ul>★連番で名前をつける場合は「$」を使用する。
テキストの挿入には{}を使用する。
CSSの記述
.container{w70+h70+m70e+p70r}↓.container{width:70px;height:70px;margin:70em;padding:70rem;}参考
・1分を節約する為にEmmetのHTMLとCSS記述方法を学び直し&まとめシートを作る。
https://qiita.com/tanimoto-hikari/items/8848445babdfe3586592
・Emmetでマークアップを効率化しよう（HTML&カスタマイズ編）
https://www.granfairs.com/blog/staff/efficiency-by-emmet-01
おわりに
軽く目を通す
⇅
使う時が来たら思い出して使用する
を繰り返して覚えていきました。
また、Emmetをタイピングアプリの感覚で遊べるツールがあったので
紹介しておきます🙌
https://emmpra.com/