どうも、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> | 属性指定＋ナンバリング展開 |
もっと詳細なものは、下記で公開されています。
