HTML用語33選

このマニュアルの使い方

1. 見本を見る各用語の見本は、実際に動くHTMLです。マウスを乗せたり、押したりして確かめられます。
2. コードは眺めるだけ右側のコードは、AIが書くものです。読めなくて構いません。名前と姿が結びつけば十分です。
3. 指示例をコピーする「コピー」を押して、自分の内容に書き換えてAIに渡します。

AIへの指示は「場所 + 部品 + 配置」で組み立てる

ヒーローエリアに、H1とCTAボタンを、Flexboxで中央に並べて

• 場所 どこに置くか（ヘッダー、セクションなど）
• 部品 何を置くか（見出し、ボタン、カードなど）
• 配置・見た目 どう並べ、どう見せるか（Flexbox、余白、色など）

ページ全体の地図

Webページは、区画を上から下へ積み重ねてできています。名前の札を押すと、その用語の説明に移動します。

全部入りの指示文の例

ここまでの用語を組み合わせると、短い文でページの設計図を渡せます。丸ごとコピーして、店名や商品の内容に書き換えてください。