HTML/CSS初心者が覚えておくと楽になるルール集

Webデザインの基本ルール集

Webデザインをする際に押さえておきたい基本ルールをまとめました。
感覚だけでなくルール化・システム化することで、統一感があり、メンテしやすいデザインになります。

基本の考え方

• Webデザインで長さを決めるときは16pxをベースにすることが多い
• 長さを決めるのに迷ったときは16pxの倍数か、その半分の8px、さらにその半分の4pxの倍数にするというルールにすると統一感のあるデザインになる
• 見た目を数値で感覚的に決めず、ルール化する
• 迷ったら「既に使っている値」を再利用する
• デザインとCSSの値は1対1で対応させると管理しやすい

余白・レイアウト編

• 余白（margin / padding）は「意味のある塊」ごとに段階を分ける
  （例：小 = 8px / 中 = 16px / 大 = 32px）
• 同じ種類の要素には同じ余白ルールを使う
• レイアウト調整のために<br>を使わない（余白はCSSで管理）
• 横並びの要素はgapプロパティで間隔を空けると楽

文字・テキスト編

• 本文の文字サイズは16px前後が読みやすい
• 行間（line-height）は1.5〜1.8を目安にすると可読性が上がる
• 見出しと本文はサイズ差をしっかりつける（1.25〜1.5倍など）
• 文字数が多い文章は1行あたり30〜40文字程度に収めると読みやすい

フォント編

• 日本語フォントは游ゴシック / Noto Sans JP / ヒラギノ角ゴあたりが無難
• 英数字だけ別フォント（Roboto / Inter など）を指定すると洗練される
• font-weightは400（normal）と 700（bold） があれば大体OK
• 欧文フォントを先に、和文を後に書く

font-family: "Roboto", "Noto Sans JP", sans-serif;

色・配色編

• 色は3〜4色までに抑えるとごちゃつきにくい
  （ベース / メイン / アクセント）
• 完全な黒（#000）は使わず、#333 や #222を使うと目に優しい
• 強調色（アクセントカラー）は使いすぎない
• 重要な情報ほどコントラストを高くする

階層・視覚的重み編

• 重要な要素ほど太く・大きく・濃くする
• 情報の優先度を3段階くらいに分けると整理しやすい
  （例：見出し > 小見出し > 本文）
• 同じ階層の要素は同じスタイルにする（一貫性）
• 背景色を変えてセクションを区切ると構造が伝わりやすい

ボタン・UI編

• ボタンのpaddingは上下より左右をやや大きめにすると押しやすく見える
• クリックできる要素は見た目で分かるようにする
• ボタンの最小サイズは高さ40px以上を意識する
• hover時に何かしら変化（色・影・透明度）を付ける

枠線・角丸編

• 枠線は1pxが基本
• 角丸（border-radius）は4px / 8pxが使いやすい
• 角丸の大きさは要素サイズに比例させる

影・立体感編

• 影（box-shadow）はぼかし半径を大きく、広がりを小さくすると自然
  （例：0 2px 8px rgba(0,0,0,0.1) など）
• 影の色は完全な黒より少し青みがかったグレーのほうが柔らかい
• 影は上下2段階くらい用意すると使い分けやすい
  （浅い影 / 深い影）
• hover時に影を濃くすると浮き上がる感じが出る

アイコン・画像編

• アイコンサイズは16px / 24px / 32pxあたりが標準的
• アイコンと文字を並べるときは縦方向の中央揃えを意識
• 画像の縦横比は固定して、歪まないようにする
  （object-fit: cover など）
• 重要でない画像は遅延読み込み（loading="lazy"）を使う

グリッド・整列編

• 要素の左端や中央を揃えると綺麗に見える
• カード型レイアウトではカード間の余白を統一する
• 画面幅に応じて列数を変える（1列 → 2列 → 3列 など）

リンク・インタラクション編

• リンクには下線 or 色で区別をつける
• 訪問済みリンク（:visited）の色も考慮する
• focus時（キーボード操作）のアウトラインを消さない
• クリック範囲は見た目より少し広めにすると親切

アニメーション・動き編

• アニメーションの時間は0.2〜0.3秒が快適
• イージング（transition-timing-function）はease-outが自然
• 動きすぎる要素はユーザーの邪魔になるので控えめに
• prefers-reduced-motionに対応するとアクセシビリティ向上

フォーム・入力編

• input / textarea の高さは40px以上を確保
• プレースホルダーは薄めのグレー（#999 など）
• エラー表示は赤系の色 + 具体的なメッセージ
• 必須項目には**「必須」ラベル or アスタリスク（*）**をつける

レスポンシブ編

• スマホ → タブレット → PC の順で考える（モバイルファースト）
• 画面が狭くなったら
  「文字を小さくする」より「余白や段組を変える」
• 横スクロールは基本的にNG
• 作ったら一度スマホ実機で確認する（DevToolsだけでは不十分）

余白編

CSSでレイアウトを組んでいると、どのように余白を入れればいいのか迷う時があります。
そのような場合は、上下の余白については外側の領域のpadding、要素間の余白については二番以降の要素にmargin-topをつけていくという方法がおすすめです。

ドットインストール参照
https://dotinstall.com/lessons/portfolio_htmlcss_v2/62708

┌──────────────────────────┐
│        padding-top       │
│   ┌──────────────────┐   │
│   │     要素①        │   │
│   └──────────────────┘   │
│        margin-top        │
│   ┌──────────────────┐   │
│   │     要素②        │   │
│   └──────────────────┘   │
│        margin-top        │
│   ┌──────────────────┐   │
│   │     要素③        │   │
│   └──────────────────┘   │
│       padding-bottom     │
└──────────────────────────┘

  <header>
    <img src="yamada.png" alt="太郎のアイコン" width="128" height="128">
    <h1>山田太郎</h1>
    <p>Webデザイナー見習いです</p>
  </header>

上記のようなHTMLを記述した場合、header領域にimg、h1、pという要素があります。
その場合は、headerにpadding、h1にmargin-topを指定します。（h1とpの間は開けない）

header {
  background: #eee;
  text-align: center;
  padding: 32px 0;
}

h1 {
  margin: 16px 0 0;
  font-weight: normal;
  font-size: 24px;
}