HTML/CSS 早見表
迷ったら引く、タグ・プロパティ早見表
暗記する必要はありません。「これ何だっけ」を素早く引くためのリファレンスです。 AIが出したコードに知らないタグ・プロパティがあったら、ここで意味を確かめましょう。
HTML — 構造・レイアウト
<html> / <head> / <body>ページ全体 / 設定情報 / 表示される中身の3つの土台
<header>ページや区画の上部(ロゴ・ナビなど)
<header>…</header><nav>ナビゲーション(メニューのリンク集)
<main>そのページの主内容。1ページに1つ
<section> / <article>意味のある区切り / 独立した記事のまとまり
<footer>ページや区画の下部(著作権・連絡先など)
<div> / <span>意味を持たない箱(まとめ用) / 文中の一部を囲む
HTML — テキスト・リンク
<h1>〜<h6>見出し。h1が最上位。順番を飛ばさない
<p>段落(ひとまとまりの文章)
<a href>リンク。hrefに飛び先を書く
<a href="/about">会社概要</a><strong> / <em>重要(太字) / 強調(斜体)。意味つきの強調
<ul> / <ol> / <li>箇条書き / 番号付きリスト / 各項目
<br>改行(多用しない。段落や余白で整えるのが基本)
HTML — 画像・フォーム
<img src alt>画像。srcが場所、altが代替テキスト(必須級)
<img src="cat.jpg" alt="猫"><form>入力をまとめて送る枠
<input>入力欄(type=text/email/checkbox…)
<input type="email"><textarea>複数行の入力欄
<select> / <option>プルダウン / その選択肢
<button>ボタン(送信・操作)
<label>入力欄の見出し。押しやすさ・読み上げに効く
CSS — 並べる・配置
display: flex子要素を横一列などに並べる(Flexbox)
justify-content主軸方向の揃え(左/中央/両端など)
justify-content: center;align-items交差軸方向の揃え(上下中央など)
gap要素どうしの間隔(すきま)
display: grid格子状に並べる(行と列)
position配置方法(static/relative/absolute/fixed)
CSS — 箱(余白・サイズ・枠)
width / height幅 / 高さ
margin箱の外側の余白
padding箱の内側の余白(中身と枠の間)
border枠線
border: 1px solid #ccc;border-radius角を丸める
box-sizing: border-box枠と内側余白を幅に含める(崩れ防止の定番)
CSS — 文字・色・背景
color文字の色
color: #333;font-size文字の大きさ
font-weight文字の太さ(normal/bold/700など)
line-height行の高さ(読みやすさに直結)
text-align文字の揃え(left/center/right)
background / background-color背景(色・画像)
CSS — レスポンシブ・その他
@media画面幅などの条件でスタイルを切り替える
@media (max-width: 768px) { … }max-width最大幅(広がりすぎを防ぐ)
overflowはみ出しの扱い(hidden/auto/scroll)
z-index重なり順(大きいほど手前)
transition変化をなめらかにする(ホバー等)