Emmetチートシート | 時短サポートサイト「ジターン」

HTML全て展開する

HTMLひな形
ドキュメント構造要素＆見出し
テキスト＆インライン要素
リスト要素
メディア＆図
フォーム＆入力要素
テーブル要素
ユーティリティ＆リソース
複数出力構文

HTMLひな形

`!` を入力すると、HTML5の基本構造（DOCTYPE宣言、head・body要素、viewport設定など）が展開されます。
なお、言語属性（lang）は Emmet の仕様上、初期状態では en（英語）に設定されています。日本語サイトの場合は ja に手動で書き換えてください。

! HTMLひな形: <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

ドキュメント構造要素＆見出し

hdr <header></header>: ページ全体やセクションの先頭部分に使われるヘッダー要素です。

nav <nav></nav>: サイト内のナビゲーションリンクをまとめる要素です。

mn <main></main>: ページの主な内容を表す領域で、1ページに1つだけ使用します。

sect <section></section>: 意味のあるまとまりを持つセクションを定義します。見出しとセットで使われることが多いです。

art <article></article>: 独立して意味が通じる記事や投稿に使います。

aside <aside></aside>: 補足情報やサイドバーとして使用します。

address <address></address>: 著者や運営者の連絡先を記載する要素です。

ftr <footer></footer>: ページや記事の最後に配置されるフッターエリアを示します。

h1 <h1></h1>: ページの主見出しとして使用します。

h2 <h2></h2>: セクションの見出しとして最もよく使われます。

h3 <h3></h3>: <h2>内の小見出しとして使用します。

テキスト＆インライン要素

a <a href=""></a>: リンクを作成するタグです。外部リンクには `target="_blank"` と `rel="noopener"` を推奨します。

br <br>: テキスト内で改行を行うためのタグです。

span <span></span>: 汎用インライン要素で、一部を装飾したいときに使います。

str <strong></strong>: 重要な語句を強調するインライン要素です。

em <em></em>: 意味的な強調を表すインライン要素です。

det <details></details>: クリックで開閉できる情報ブロックを作成します。

使用例：
        <details>
          <summary>よくある質問</summary>
          <p>ここに回答が入ります。</p>
        </details>

summary <summary></summary>: <details>の見出しとして機能します。

リスト要素

ul <ul></ul>: 順不同のリスト（箇条書き）を作成します。

ol <ol></ol>: 番号付きのリストを作成します。

li <li></li>: <ul>や<ol>内のリスト項目を定義します。

メディア＆図

img <img src="" alt="">: 画像を表示します。`loading="lazy"`を使うと高速化可能です。

img:s <img src="" alt="" srcset="">: 画面サイズ・解像度に応じて最適な画像を読み込みます。

<img src="img@1x.jpg" alt="説明" srcset="img@2x.jpg 2x, img@1x.jpg 1x">

source:media <source media="(min-width: )" srcset="">: <picture>内で条件に応じた画像を指定します。

<source media="(min-width: 1024px)" srcset="large.jpg">

pic <picture></picture>: <source>と<img>を組み合わせてレスポンシブ画像を実現します。

<picture>…</picture>

fig <figure></figure>: 画像＋キャプションをセットでまとめる要素です。

<figure>…<figcaption>説明</figcaption></figure>

figc <figcaption></figcaption>: <figure>内でキャプションを記述します。

フォーム＆入力要素

form:post <form action="" method="post"></form>: POST送信のフォームを生成します。GETは`form:get`。

input:t <input type="text" name="" id="">: テキスト形式の1行入力フィールドです。

input:email <input type="email" name="" id="">: メールアドレス用の入力フィールドです。

input:checkbox <input type="checkbox" name="" id="">: 複数選択が可能なチェックボックスです。

input:radio <input type="radio" name="" id="">: 複数選択肢から1つを選ばせるラジオボタンです。

input:tel <input type="tel" name="" id="">: 電話番号入力用フィールドです。

input:h <input type="hidden" name="">: 非表示フィールドです。

input:submit <input type="submit" value="">: フォーム送信ボタンです。

select <select name="" id=""></select>: プルダウン形式のセレクトボックスです。

tarea <textarea name="" id=""></textarea>: 複数行入力用フィールドです。

opt <option value=""></option>: <select>内の各選択肢を定義します。

label <label for=""></label>: フォーム項目の説明ラベルとして使用します。

btn:s <button type="submit"></button>: 送信ボタンを<button>で記述します。テキストやHTMLを自由に入れられます。

テーブル要素

table <table></table>: 行と列でデータを表形式に表示します。

tr <tr></tr>: テーブルの1行を定義します。

th <th></th>: ヘッダーセルを定義します。太字・中央揃えがデフォルト。

td <td></td>: データセルを定義します。

ユーティリティ＆リソース

. <div class=""></div>: .の後にクラス名を入力すると divタグにクラスを追加します。

補足：
p.class → <p class="class"></p>

link:css <link rel="stylesheet" href="style.css">: 外部CSSファイルを読み込みます。

link:favicon <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">: ブラウザタブに表示されるファビコンを指定します。

link:touch <link rel="apple-touch-icon" href="favicon.png">: スマホのホーム画面アイコンを指定します。

script:src <script src=""></script>: 外部JavaScriptファイルを読み込みます。

複数出力構文

覚えておくと作業が早くなります。反復や構造の入力がぐっと楽になります。

ri:a レスポンシブ画像（アートディレクション）: <picture> タグを使って、画面サイズに応じて構図の異なる画像を出し分ける構文。「Responsive Image: Art Direction」の略。

<picture>
<source media="(min-width: )" srcset="">
  <img src="" alt="">
</picture>

使用例：
<picture>
  <source media="(min-width: 1024px)" srcset="wide.jpg">
  <img src="narrow.jpg" alt="風景の写真">
</picture>

> ネスト構造: >（Child）は、親要素の中に子要素をネスト（入れ子）させる構文。階層構造のHTMLを効率的に展開できます。

構文例：nav>ul>li

出力：
<nav>
  <ul>
    <li></li>
  </ul>
</nav>

+ 兄弟構造: +（Sibling）は、同じ階層に兄弟要素を横並びで展開する構文。複数の要素を連続で並べたいときに使います。

構文例：div + p + p

出力：
<div></div>
<p></p>
<p></p>

* 繰り返し構文: *（Multiplication）は、指定した数だけ要素を繰り返して展開する構文。リストや表などの生成に便利。

構文例：ul>li*3

出力：
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

^ 親要素へ戻る構文: ^（Parent）は、一段上の親要素に戻って新しい要素を展開する構文。ネストの途中で分岐を入れたいときに使います。

構文例：div>ul>li^p

出力：
<div>
  <ul>
    <li></li>
  </ul>
</div>
<p></p>

() グループ化構文: ()（Grouping）は、複数の要素をひとつのまとまりとして扱う構文。複雑な構造をまとめて展開したいときに便利。

構文例：div>(header>ul>li*2)+footer>p

出力：
<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

$ 連番構文: $ を使うと、繰り返し構文（*）と組み合わせて、クラス名やIDに自動で連番を付与できます。

構文例：ul>li.item$*3

出力：
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

レイアウト・配置

pos position: relative;: 要素の位置を、元の配置を基準にして相対的にずらしたいときに使います。親要素を基準としたレイアウト調整によく利用されます。

poa position: absolute;: 要素を親要素の位置を基準にして、絶対的な座標で配置します。スクロールや他の要素の影響を受けにくい配置にしたい場合に使われます。

pof position: fixed;: 要素の位置をビューポートに対して固定します。スクロールしても常に同じ位置に表示されるため、ヘッダーや戻るボタンなどに適しています。

t top: ;: positionプロパティと併用して、要素の上端の位置を指定します。

補足：例）t10 と入力すると → top: 10px; に展開されます。

r right: ;: positionプロパティと併用して、要素の右端の位置を指定します。

補足：例）r5 と入力すると → right: 5px; に展開されます。

b bottom: ;: positionプロパティと併用して、要素の下端の位置を指定します。

補足：例）b0 と入力すると → bottom: 0; に展開されます。

l left: ;: positionプロパティと併用して、要素の左端の位置を指定します。

補足：例）l20 と入力すると → left: 20px; に展開されます。

z z-index: ;: 要素の重なり順を指定するプロパティです。数値が大きいほど前面に表示されます。positionプロパティと併用されることが一般的です。

補足：例）z10 と入力すると → z-index: 10; に展開されます。

db display: block;: 要素をブロックレベルで表示します。幅は親要素いっぱいに広がり、改行されるのが特徴です。

df display: flex;: 要素をフレックスボックスで表示し、子要素を柔軟に並べます。

dg display: grid;: グリッドレイアウトを有効にします。要素を行と列で整列できます。

dn display: none;: 要素を非表示にします（DOM上には存在しますが見えません）。

di display: inline;: インライン要素として表示します。幅や高さは基本的に指定できません。

dib display: inline-block;: インライン要素のように並びつつ、幅・高さを指定できるブロック要素として表示します。

dif display: inline-flex;: インライン要素のように並びつつ、flexboxのレイアウト制御を行います。

v visibility: hidden;: 非表示状態を解除して表示に戻します。通常はデフォルトの状態です。

ov overflow: hidden;: はみ出した要素を非表示にします。レイアウト崩れ防止やスクロール制御でよく使われます。

ovx overflow-x: hidden;: 横方向のスクロールを無効化します。スマホでの横はみ出し防止などに使用されます。

plai place-items: ;: FlexやGridで、縦横両軸の中央揃えを同時に指定できるショートハンドです。中央配置によく使われます。

補足：
place-items: center;（縦横とも中央揃え）

ar aspect-ratio: ;: 要素の横幅と高さの比率（アスペクト比）を固定します。画像や動画、ボックスの比率制御に便利です。

例：
aspect-ratio: 1; （正方形）
aspect-ratio: 16 / 9; （横16：縦9）

iso isolation: ;: ブレンドモード（mix-blend-mode など）の影響を遮断し、要素をスタッキングコンテキストとして分離します。

補足：
isolation: isolate;（混色の影響を遮断）

gtr grid-template-rows: repeat();: Gridコンテナの行のサイズを定義します。レイアウトの高さの構成を調整できます。

例：
grid-template-rows: auto 1fr;

gtc grid-template-columns: repeat();: Gridコンテナの列幅を指定します。レイアウトの横方向の比率を制御できます。

例：
grid-template-columns: 1fr 2fr;

tbl table-layout: fixed;: HTMLの <table> 要素における列幅のレイアウト方式を指定します。表示の安定性や描画速度の改善に役立ちます。

補足：tbl に略記を加えることで指定が変わります。
例：
tbl → table-layout: fixed; （すべての列幅を均等に固定）
tbla → table-layout: auto; （セル内容に応じて自動調整）

ord order: ;: Flexbox や Grid において、子要素の表示順を制御するプロパティです。HTMLの並び順に関係なく順番を変更できます。

補足：
ord:0 → order: 0;

余白・サイズ

m margin: ;: 要素の外側に余白をつけるプロパティです。上下左右のスペースを調整する際に使われます。

補足：m に数値や方向（t, r, b, l）を続けて入力することで、対応する余白（px単位）や方向を展開できます。
- を入力すると連続でpxを入力できます。
例：
m10 → margin: 10px;
m10-10-10-10 → margin: 10px 10px 10px 10px;
m-0-auto → margin: 0 auto;
mt10 → margin-top: 10px;
mr10 → margin-right: 10px;
mb10 → margin-bottom: 10px;
ml10 → margin-left: 10px;

p padding: ;: 内側の余白を指定するプロパティです。コンテンツとボックスの枠との間隔を調整する際に使用されます。

補足：p に数値や方向（t, r, b, l）を続けて入力することで、対応する内側余白（px単位）を展開できます。
- を入力すると連続でpxを入力できます。
例：
p10 → padding: 10px;
p10-10-10-10 → padding: 10px 10px 10px 10px;
pt10 → padding-top: 10px;
pr10 → padding-right: 10px;
pb10 → padding-bottom: 10px;
pl10 → padding-left: 10px;

w width: ;: 要素の横幅を指定します。

補足：w に数値をつけると px 単位で展開されます。
例：
w10 → width: 10px;

h height: ;: 要素の縦の高さを指定します。

補足：h に数値をつけると px 単位で展開されます。
例：
h10 → height: 10px;

maw max-width: ;: 要素の最大横幅を制限するプロパティです。レスポンシブデザインでよく使われます。

補足：maw に数値をつけると px 単位で展開されます。
例：
maw800 → max-width: 800px;

mah max-height: ;: 要素の最大縦幅を制限するプロパティです。画像や枠の高さ制限などに使用されます。

補足：mah に数値をつけると px 単位で展開されます。
例：
mah400 → max-height: 400px;

miw min-width: ;: 要素の最小横幅を指定します。コンテンツが極端に小さくなるのを防ぐ際に使用されます。

補足：miw に数値をつけると px 単位で展開されます。
例：
miw300 → min-width: 300px;

mih min-height: ;: 要素の最小縦幅を指定します。高さ不足によるレイアウト崩れを防ぐ際に使用されます。

補足：mih に数値をつけると px 単位で展開されます。
例：
mih200 → min-height: 200px;

bxz box-sizing: border-box;: padding や border を含めて、要素のサイズを制御できるようにします。レイアウト崩れの防止に便利です。

g gap: ;: FlexやGridレイアウトにおける要素間のスペース（間隔）を指定します。

補足：g に数値をつけることで px 単位で展開されます。
例：
g10 → gap: 10px;

テキスト装飾・文字

fw font-weight: ;: 文字の太さを指定するプロパティです。通常は 400（標準）、700（太字）がよく使われます。

補足：fw に数値をつけるとそのまま展開されます。
例：
fw700 → font-weight: 700;

fz font-size: ;: 文字サイズを指定するプロパティです。px 単位で数値を入力して展開します。

補足：fz に数値をつけると px 単位で展開されます。
例：
fz18 → font-size: 18px;

lh line-height: ;: 行間の高さ（行送り）を調整するプロパティです。読みやすさやデザイン上の整列に重要です。

補足：lh に数値をつけると、そのまま数値として展開されます。
例：
lh1.5 → line-height: 1.5;

lts letter-spacing: ;: 文字と文字の間隔（字間）を調整するプロパティです。読みやすさやデザイン性の向上に役立ちます。

補足：lts に数値をつけると px 単位で展開されます。
例：
lts1 → letter-spacing: 1px;

ta text-align: left;: テキストやインライン要素の水平方向の配置を指定するプロパティです。

補足：ta に略記をつけることで方向を指定できます。
例：
tar → text-align: right;
tac → text-align: center;

ti text-indent: ;: 段落の最初の行の字下げ（インデント）を設定します。読み物の文章や段組レイアウトで使用されます。

補足：ti に数値をつけると px 単位で展開されます。
例：
ti20 → text-indent: 20px;
ti-9999 → text-indent: -9999px;

tt text-transform: uppercase;: テキストの大文字・小文字変換を指定するプロパティです。見出しや装飾目的での表記統一に使用されます。

補足：tt に略記をつけることで変換スタイルを指定できます。
例：
tt → text-transform: uppercase;（すべて大文字）
ttl → text-transform: lowercase;（すべて小文字）
ttc → text-transform: capitalize;（各単語の先頭文字のみ大文字）

tdu text-decoration: underline;: テキストに下線を引くプロパティです。リンク風の表現や強調に使われます。

va vertical-align: top;: インライン要素やテーブルセルの垂直方向の位置揃えに使用します。

補足：va に略記をつけることで具体的な位置指定ができます。
例：
vam → vertical-align: middle;
vab → vertical-align: bottom;

tsh text-shadow: ;: テキストに影をつけて、視認性や立体感を高める装飾効果を与えます。

whs white-space: nowrap;: テキスト中の空白や改行の扱いを制御するプロパティです。折り返しや整形制御に使用されます。

補足：whs に略記を加えることで異なる値を展開できます。
例：
whs     → white-space: nowrap;（1行に強制表示）
whsp    → white-space: pre;（改行・空白をそのまま反映）
whspw   → white-space: pre-wrap;（折り返しあり＋空白反映）

wob word-break: normal;: 単語の途中で改行するかどうかを指定するプロパティです。長い文字列でのレイアウト崩れを防止します。

補足：wob の略記で改行の方法を指定できます。
例：
wob → word-break: normal;（単語単位でのみ改行）
wobba → word-break: break-all;（途中でも強制改行）

c color: #000;: テキストの文字色を指定します。カラーコードやキーワードで指定可能です。

補足：c に値を続けることで即展開されます。
例：
c#fff → color: #fff;（白）
c:red → color: red;（キーワード指定）

tov text-overflow: ellipsis;: テキストが要素の幅を超えた場合の表示方法を制御します。「...」で省略するケースなどに使用されます。

補足：
tov → text-overflow: ellipsis; 超過部分を「...」で省略
tovc → text-overflow: clip; はみ出た部分をカット（デフォルト）

装飾・背景・境界

bg background: #000;: 背景色・画像・位置・サイズなど、背景に関する設定をまとめて指定できるプロパティです。

補足：背景に関する各種プロパティを個別に指定する略記もあります。
例：
bgn   → background: none;               背景のリセット
bgc   → background-color: #fff;         背景色の指定
bgi   → background-image: url();        背景画像の指定
bgr   → background-repeat: no-repeat;   画像の繰り返し制御
bgp   → background-position: 0 0;       表示位置の指定
bgsc  → background-size: cover;         要素を覆うように拡大
bgsz  → background-size: contain;       全体を収めるように縮小
bga   → background-attachment: fixed;   背景の固定表示

bd border: 1px solid #000;: 要素の枠線を一括で指定するプロパティです。線の太さ・種類・色をまとめて設定できます。

補足：以下の略記で各方向ごとに指定可能です。
例：
bd    → border: 1px solid #000;
bdn   → border: none;                  枠線を非表示
bdt   → border-top: 1px solid #000;    上側だけ枠線
bdb   → border-bottom: 1px solid #000; 下側だけ枠線
bdl   → border-left: 1px solid #000;   左側だけ枠線
bdr   → border-right: 1px solid #000;  右側だけ枠線

bdi border-image: url();: 画像を要素の枠線として使用するプロパティです。装飾的なデザインに使われます。

補足：bdi を使うと以下のように展開されます。
例：
bdi → border-image: url();

bdrs border-radius: ;: 要素の角を丸くするプロパティです。カードやボタンなどのデザインによく使われます。

補足：bdrs に数値を加えることで半径を指定できます。
例：
bdrs10 → border-radius: 10px;

bxsh box-shadow: ;: 要素に影をつけて立体感や浮き上がりを演出するプロパティです。UIのアクセントとして多用されます。

mbm mix-blend-mode: ;: 要素の背景と、その背後にある要素の重なり方（ブレンド方法）を指定します。画像や装飾の演出に使用されます。

補足：重ねた際の表示のされ方（合成方法）を制御できます。
  例：
  mbm:multiply → mix-blend-mode: multiply;（乗算で重ねる）
  mbm:screen  → mix-blend-mode: screen;（明るい重なり方）

ct content: "";: 疑似要素（::before や ::after）に挿入するテキストや装飾内容を指定します。通常のHTML要素には効果がありません。

Flex・Gridレイアウト補助

fx flex: ;: 子要素に対して、伸縮性（grow / shrink）や基準サイズ（basis）をまとめて指定します。Flexbox の基本プロパティです。

補足：
fx1 → flex: 1;
fx0 → flex: 0;

fxd flex-direction: row;: Flexbox の主軸方向（横並び・縦並び）を指定します。アイテムの並ぶ向きを決定します。

補足：
fxd   → flex-direction: row;
fxdrr  → flex-direction: row-reverse;
fxdc   → flex-direction: column;
fxdcr  → flex-direction: column-reverse;

fxw flex-wrap: nowrap;: Flexbox の子要素が収まりきらない場合に折り返すかどうかを制御します。

補足：
fxw → flex-wrap: nowrap;
fxww → flex-wrap: wrap;

ai align-items: start;: Flexbox や Grid の子要素を交差軸（縦方向）でどのように揃えるかを指定します。1行内の要素の縦方向配置に使用します。

補足：ai に略記を加えることで異なる配置が展開されます。
例：
aic   → align-items: center;
aifs  → align-items: flex-start;
aife  → align-items: flex-end;
aib   → align-items: baseline;

as align-self: start;: Flexbox や Grid において、個別の要素の縦方向（交差軸）の揃え方を指定します。親の align-items を上書きできます。

補足：略記でさまざまな配置指定が可能です。
例：
asa   → align-self: auto;
ass   → align-self: start;
asc   → align-self: center;
asfs  → align-self: flex-start;
asfe  → align-self: flex-end;
asb   → align-self: baseline;

jc justify-content: start;: Flexbox や Grid で、主軸（通常は横方向）における子要素の配置方法を指定します。

補足：
jc     → justify-content: start;
jcc    → justify-content: center;
jcfe   → justify-content: flex-end;
jcsb   → justify-content: space-between;

ac align-content: start;: 複数行にまたがる Flexbox や Grid コンテナ内の行の揃え方を指定します。複数行の縦方向の整列に使用します。

補足：ac に略記を加えることで異なる配置が展開されます。
例：
acc    → align-content: center;
acfs   → align-content: flex-start;
acfe   → align-content: flex-end;
ac:sb  → align-content: space-between;

ユーザー操作・状態制御

op opacity: ;: 要素全体の透明度を指定するプロパティです。数値は 0（完全に透明）から 1（完全に不透明）の範囲で指定します。

補足：op のあとに数値をつけると透明度を直接指定できます。
例：
op0.5 → opacity: 0.5;（半透明）
op0 → opacity: 0;（完全に透明）

cup cursor: pointer;: リンクやボタンなど、クリック可能な要素でマウスポインターが指の形に変わるスタイルです。

poe pointer-events: ;: ユーザーのマウス操作を無効化します。ボタンやリンクを一時的に操作不可にする場面で使います。

例:
pointer-events: none;

us user-select: none;: テキストの選択可否を制御するプロパティです。UIパーツなどで選択不可にしたい場合に使います。

補足：
user-select: none;    選択不可（ボタンなど）
user-select: auto;    通常通り選択可
user-select: text;    テキストのみ選択可
user-select: all;     全体を一括選択

sb scroll-behavior: ;: アンカーリンクなどのスクロール挙動を滑らかにするかどうかを制御します。

補足：
scroll-behavior: smooth;（スムーズスクロール）
scroll-behavior: auto;（即時スクロール／初期値）

ap appearance: none;: ブラウザが自動的に適用する標準の見た目（ボタン・フォーム等）を制御するプロパティです。独自デザインに切り替えたいときに使用します。

補足：
appearance: none; → 標準スタイルを無効化
※ -webkit-appearance: none; のようなベンダープレフィックスが必要な場合もあります

! !important: CSSプロパティの優先度を強制的に上げるために使用します。他のルールを上書きしたい場合の「最後の手段」として使われます。

補足：
・すべての CSS プロパティの末尾に付けて使用します。
・外部CSSのスタイルを強制的に上書きする際によく使われます。

アニメーション・変形

anim animation: ;: CSSアニメーションの名前・時間・タイミング・繰り返し回数などをまとめて指定するプロパティです。

補足：animation に関するプロパティは以下のように個別指定も可能です。
例：
anim-name → animation-name: ;
anim-dur  → animation-duration: ;
anim-tf   → animation-timing-function: ;

複数をまとめて指定する場合：
animation: fadeIn 0.3s ease-in-out;

trs transition: ;: 状態の変化を滑らかに見せるアニメーション効果を設定します。hover 時の演出などに用います。

例：
transition: all 0.3s ease;

trf transform: ;: 要素の位置、拡大縮小、回転、傾きなどを2D/3Dで変形できるプロパティです。動きのあるUIに多用されます。

補足：
trfr → transform: rotate();
trft → transform: translate(x, y);