HTMLとCSSのEmmet記法まとめ
今回はコードを効率的に書くことが出来るEmmetの書き方について紹介します。
Emmetをマスターすることで、スペルミスを無くしたり、コーディング速度をあげることが出来るメリットがあります。
実務でよく使うEmmetを中心に紹介していくので、是非実装者の方は参考にしてください。
目次
HTMLのEmmet
HTMLの雛形
□入力
!
□出力表示
<!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>
通常のタグ
□入力
h1
□出力表示
<h1></h1>
タグを入れ子にする
□入力
nav>ul>li
□出力表示
<nav>
<ul>
<li></li>
</ul>
</nav>
タグを隣接する
□入力
div+p+bq
□出力表示
<div></div> <p></p> <blockquote></blockquote>
同じタグを複数記述する
□入力
ul>li*5
□出力表示
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
タグをグループにする
□入力
div>(header>ul>li*2>a)+footer>p
□出力表示
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
classを振ったタグを記述する
□入力
.title
em>.class
□出力表示
<div class="title"></div> <em><span class="class"></span></em>
idを振ったタグを記述する
□入力
#header
□出力表示
<div id="header"></div>
classとidを指定したタグを記述する
□入力
form#search.wide
p.class1.class2.class3
□出力表示
<form action="" id="search" class="wide"></form> <p class="class1 class2 class3"></p>
テキストを含んだタグを記述する
□入力
a{こちらをクリック}
p>{Click}+a{here}+{to continue}
□出力表示
<a href="">こちらをクリック</a> <p>Click <a href="">here</a> to continue</p>
classを連番で記述する
□入力
ul>li.item$*5
h$[title=item$]{Header $}*3
ul>li.item$$$*5
($の数が例えば1つだと1、２つだと01と表示される)
ul>li.item$@-*5
ul>li.item$@3*5
□出力表示
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
CSSのEmmet
margin & padding
margin[m]
m10 margin: 10px; m35-20 margin: 35px 20px; mt10 margin-top: 10px; mr10 margin-right: 10px; mb10 margin-bottom: 10px; ml10 margin-left: 10px;
padding[p]
p10 padding: 10px; P35-20 padding: 35px 20px; pt10 padding-top: 10px; pr10 padding-right: 10px; pb10 padding-bottom: 10px; pl10 padding-left: 10px;
Visual Formatting
position:absolute;[posa]
posa position: absolute;
position:relative;[posr]
posr position: relative;
position:fixed;[posf]
posf position: fixed;
top:;[t]
t10 top: 10px;
right:;[r]
r10 right: 10px;
bottom:;[b]
b10 bottom: 10px;
left:;[l]
l10 left: 10px;
z-index:;[z]
z10 z-index: 10;
display:block;[db]
db display: block;
display:none;[dn]
dn display: none;
display:flex;[df]
df display: flex;
display:inline;[di]
di display: inline;
display:inline-block;[dib]
dib display: inline-block;
overflow:hidden;[ovh]
ovh overflow: hidden;
overflow:visible;[ovv]
ovv overflow: visible;
overflow:scroll;[ov:s]
ov:s overflow: scroll;
overflow:auto;[ov:a]
ov:a overflow: auto;
overflow-x:scroll;[ovx:s]
ova:s overflow-x: scroll;
overflow-x:auto;[ovx:a]
ova:a overflow-x: auto;
cursor:pointer;[curp]
curp cursor: pointer;
box-sizing
box-sizing:border-box;[bxz]
bxz box-sizing: border-box;
width[w]
w100 width: 100px;
height[h]
h100 height: 100px;
height:auto;[ha]
ha height: auto;
max-width[maw]
maw100 max-width: 100px;
max-height[mah]
mah100 max-height: 100px;
min-width[miw]
miw100 min-width: 100px;
min-height[mih]
mih100 min-height: 100px;
font
font-weight:normal;[fwn]
fwn font-weight: normal;
font-weight:bold;[fwb]
fwb font-weight: bold;
font-size[fz]
fz10 font-size: 10px;
text
vertical-align:top;[va]
va vertical-align: top;
vertical-align:middle;[vam]
vam vertical-align: middle;
vertical-align:baseline;[vabl]
vabl vertical-align: baseline;
vertical-align:bottom;[vab]
vab vertical-align: bottom;
text-align:left;[ta:l]
ta:l text-align: left;
text-align:center;[ta:c]
ta:c text-align: center;
text-align:right;[ta:r]
ta:r text-align: right;
text-decoration:none;[td:n]
td:n text-decoration: none;
text-decoration:underline;[td:u]
td:u text-decoration: underline;
letter-spacing[lt]
lt.1em letter-spacing: 0.1em;
background
background[bg]
bg#fff background: #fff;
background-color[bgc]
bgc#777 background-color: #777;
background-image:url();[bgi]
bgi background-image: url();
background-repeat:no-repeat;[bgr:n]
bgr:n background-repeat: no-repeat;
background-position[bgp]
bgp20-20 background-position: 20px 20px;
background-size[bgsz]
bgsz100 background-size: 100px;
background-size:auto;[bgsza]
bgsza background-size: auto;
background-size:contain;[bgszct]
bgszct background-size: contain;
background-size:cover;[bgszcv]
bgszcv background-size: cover;
color
color[c]
c#fff color: #fff;
color:rgb(0, 0, 0);[cr]
cr color: rgb(0, 0, 0);
color:rgba(0, 0, 0, .5);[cra]
cra color: rgba(0, 0, 0, .5);
opacity
op.1 opacity: 0.1;
Generated content
content:’’;[cnt]
cnt content: '';
Border
border[bd]
bd2 border: 2px; bd1-solid-#fff border: 1px solid #fff;
border:none;[bdn]
bdn border: none;
border-width[bdw]
bdw2 border-width: 2px;
border-top[bdt]
bdt1 border-top: 1px; btd1-solid-#000 border-top: 1px solid #000;
border-right[bdr]
bdr1 border-right: 1px; bdr1-solid-#000 border-right: 1px solid #000;
border-bottom[bdb]
bdb1 border-bottom: 1px; bdb1-solid-#000 border-bottom: 1px solid #000;
border-left[bdl]
bdl1 border-left: 1px; bdl1-solid-#000 border: 1px solid #000;
border-radius[bdrs]
bdrs10 border-radius: 10px; bdrs50% border-radius: 50%;
Others
!important[!]
! !important
align-items:baseline;[aib]
aib align-items: baseline;
align-items:center;[aic]
aic align-items: center;
align-items:flex-end;[aife]
aife align-items: flex-end;
align-items:flex-start;[aifs]
aifs align-items: flex-start;
flex-direction:column;[fxdc]
fxdc flex-direction: column;
flex-direction:column-reverse;[fxdcr]
fxdcr flex-direction: column-reverse;
flex-direction:row;[fxdr]
fxdr flex-direction: row;
flex-direction:row-reverse[fxdrr]
fxdrr flex-direction: row-reverse;
flex-wrap:wrap;[fxww]
fxww flex-wrap: wrap;
justify-content:center;[jcc]
jcc justify-content: center;
justify-content:flex-end;[jcfe]
jcfe justify-content: flex-end;
justify-content:flex-start;[jcfs]
jcfs justify-content: flex-start;
justify-content:space-between;[jcsb]
jcsb justify-content: space-between;
まとめ
以上が、Emmetのまとめでした。
Emmetに慣れるとかなり効率的にコードを書くことが出来るので、是非導入してみましょう。
大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。
