どうも、Tです。
HTMLを書くときにEmmetを使うようになりましたが、結構忘れちゃうのでよく使うものまとめました。
CSSは、ショートハンドが割と簡単・使ってもコーディングがあまり早くなった気がしなかったので、あまり使ってないです。(´・ω・｀)
| ショートハンド | 例 | 概要 |
| html:5 |
<!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> </body> </html> |
html5の基本構造展開 |
| div#hoge |
<div id=“hoge”></div> |
ID付与 |
| div.hoge |
<div class=“hoge”></div> |
クラス付与 |
| h1+div |
<h1></h1> <div></div> |
兄弟関係の展開 |
| ul>li |
<ul> <li></li> </ul> |
親子関係の展開 |
| p{hogehogehoge} |
<p>hogehogehoge</p> |
要素内のテキスト指定展開 |
| p>{hogeテキスト前半}+a{hogeリンク}+{hogeテキスト後半} |
<p> hogeテキスト前半 <a href=“”>hogeリンク</a> hogeテキスト後半 </p> |
兄弟要素のテキスト指定展開 |
| li*3 |
<li></li> <li></li> <li></li> |
複数要素の展開 |
| dl>(dt+dd)*2 |
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> |
グループ化した展開 |
| div>img[src=”image$$.jpg” alt=”画像”]*3 |
<div> <img src=“”image01.jpg”” alt=“”画像””> <img src=“”image02.jpg”” alt=“”画像””> <img src=“”image03.jpg”” alt=“”画像””> </div> |
属性指定＋ナンバリング展開 |
もっと詳細なものは、下記で公開されています。