見出し画像

基本の Emmet まとめ 【HTML編】

Sofia 33 | マルポテデザイナーの学びの記録

この記事はデイトラWeb制作初級DAY5〜DAY7で学んだEmmetという省略記法の学習記録です。（一部自分で調べたものも含まれています）

Document Type: !

!

<!DOCTYPE html>
<html lang="ja">
<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>

Child: >

nav>ul>li

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

Sibling: +

header+div+footer

<header></header>
<div></div>
<footer></footer>

Multiplication: *

ul>li*5

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

Grouping: ()

div>dl>(dt+dd)*3

<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>

CLASS: .

div.title

<div class="title"></div>

ID: #

div#header

<div id="header"></div>

TEXT: {}


a{テキスト}

<a href="">テキスト</a>

Climb up: ^

div>p>span+strong^img

<div>
  <p><span></span><strong></strong></p>
  <img src="" alt="">
</div>

Item numbering: $

ul>li.item$*5

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

いいなと思ったら応援しよう！