HTML 省略記法
要素のショートカット
| div | を作成 |
| p | を作成 |
| h1 | を作成 |
| a | を作成 |
| img | |
| input | を作成 |
| btn | を作成 |
| link:css | CSS スタイルシートのリンクタグ |
HTML ボイラープレート
! → 完全な HTML5 ボイラープレート
doc → HTML5 doctype のみ
暗黙タグ
| .class | に展開 |
| ul>.item | 子は |
| table>.row | 子は |
| select>.opt | 子は |
ネスト
ネスト演算子
| > | 子要素 |
| + | 兄弟要素 |
| ^ | 1レベル上に移動 |
| ^^ | 2レベル上に移動 |
ネストの例
div>ul>li → ネストした子要素
div+p+footer → 兄弟要素
div>p>span^h2 → 1つ上: h2 は p の兄弟
div>p>span^^h2 → 2つ上: h2 は div の兄弟
グループ化
括弧によるグループ化
div>(header>nav)+main+footer
→ header>nav をひとつのグループとして扱う
(div>h2+p)*3
→ グループ化した構造を 3 回繰り返す
複雑なレイアウト
.container>(header>h1+nav>ul>li*3)+main+footer
→ ページレイアウトの骨格
乗算
繰り返し演算子
| li*5 | |
| div>p*3 | 子 p を 3 つ持つ div |
| ul>li*4>a | リンクを持つ 4 つの li を含むリスト |
| tr>td*4 | td が 4 つのテーブル行 |
乗算の例
ul>li.item*5 → クラス付きリストアイテム 5 つ
table>tr*3>td*4 → 3行 4列のテーブル
.row>.col*3>p{Content} → テキスト付き 3 カラム行
番号付け
アイテム番号付け（$）
| $ | 連番（1、2、3...） |
| $$ | ゼロパディング 2 桁（01、02...） |
| $$$ | ゼロパディング 3 桁（001、002...） |
| $@3 | 3 から番号付けを開始 |
| $@- | 逆順番号付け（降順） |
| $@-3 | 3 から始まる逆順番号付け |
番号付けの例
li.item$*3 → item1、item2、item3
li.item$$*3 → item01、item02、item03
li.item$@3*3 → item3、item4、item5
属性
ID とクラス
| #id | id 属性を追加: |
| .class | クラスを追加: |
| .c1.c2 | 複数クラス: class="c1 c2" |
| #main.container | ID とクラスの組み合わせ |
カスタム属性
td[colspan=2] →
a[href=#]{Click} → Click
input[type=email placeholder=Email]
div[data-id=$]*3 → data-id="1"、"2"、"3"
テキスト
テキストコンテンツ（{}）
| p{Hello} | Hello |
| a{Click me} | Click me |
| p{Item $}*3 | Item 1、Item 2、Item 3 |
ネスト付きテキスト
p>{Click }+a{here}+{ to continue}
→
Click here to continue
ul>li{Item $}*4 → 番号付きアイテムのリストCSS 省略記法
ボックスモデル
| m10 | margin: 10px; |
| m10-20 | margin: 10px 20px; |
| p10 | padding: 10px; |
| w100 | width: 100px; |
| w100p | width: 100%; |
| h50 | height: 50px; |
表示と位置
| d:f | display: flex; |
| d:g | display: grid; |
| d:n | display: none; |
| d:b | display: block; |
| pos:r | position: relative; |
| pos:a | position: absolute; |
Flexbox
| jc:c | justify-content: center; |
| jc:sb | justify-content: space-between; |
| ai:c | align-items: center; |
| fxd:c | flex-direction: column; |
| fw:w | flex-wrap: wrap; |
タイポグラフィと色
| fz14 | font-size: 14px; |
| fw:b | font-weight: bold; |
| ta:c | text-align: center; |
| c:#333 | color: #333; |
| bgc:#fff | background-color: #fff; |