MEMO完成

ドットインストールの『Emmet入門』メモ

Saki

ドットインストールの『Emmet入門』で
やったことをここでメモしておきます。
→無料範囲のレッスンです！


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div></div>
 
</body>
</html>

<!-- div -->
<div></div>

<!-- a -->
<a href=""></a>

<!-- div#target -->
<div id="target"></div>

<!-- div.container -->
<div class="container"></div>

<!-- divの補完 -->
<!-- .container -->
<div class="container"></div>

<!-- p{hellow} -->
<p>hello</p>

<!-- p*3 -->
<p></p>
<p></p>
<p></p>

<!-- div.item*5 -->
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

<!-- div.item$*3 -->
<!-- 連番を追加したい -->
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

<!-- div.item$$$*3 -->
<!-- 連番を001のようにしたい -->
<div class="item001"></div>
<div class="item002"></div>
<div class="item003"></div>

<!-- div.item$@3*4 -->
<!-- 3からはじまる連番にしたい -->
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>

<!-- main>section -->
<!-- メインの子要素としてsectionがほしい -->
<main>
 <section></section>
</main>

<!-- main>section*3 -->
<!-- メインの子要素としてsectionが3つほしい -->
<!-- 別階層の時は>を使用 -->
<main>
 <section></section>
 <section></section>
 <section></section>
</main>

<!-- main>section*3+div.btn -->
<!-- 同階層要素は+を使用 -->
<main>
 <section></section>
 <section></section>
 <section></section>
 <div class="btn"></div>
</main>

<!-- main>section*3^footer -->
<!-- 1つ上の階層に戻りたい時^使用 -->
<main>
 <section></section>
 <section></section>
 <section></section>
</main>
<footer></footer>

<!-- ul*2>li*3 -->
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

<!-- ()で囲むことで上記と同じ展開ができる -->
<!-- (ul>li*3)*2 -->
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>
<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

<!-- liの補完 -->
<!-- ul>.item*2 -->
<ul>
 <li class="item"></li>
 <li class="item"></li>
</ul>

<!-- input:t -->
<input type="text" name="" id="">

<!-- select[value="item5"] -->
<select name="" id="" value="item5"></select>

<p></p>
<!--<p>lorem</p>でダミー文章が入る-->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum est rerum cum enim aliquid facere provident deleniti minus quam exercitationem voluptates doloremque, beatae adipisci dolor libero consequatur nam tenetur illum!</p>

読んでくだりありがとうございます。 頂いたサポートはスキルアップのために大切に使わせていただきます！