さいごうの技術メモ集

CSS入門：崩れないレイアウトと“読みやすい見た目”を最短で作る基礎の地図

はじめに

CSSは「見た目を整える言語」と一言で片付けられがちですが、実際には“情報の優先度を視覚に変換する設計道具”です。文字のサイズ、余白、行間、色、配置、そして画面幅が変わったときの振る舞い。これらを筋よく扱えるようになると、HTMLが同じでも「読みやすい」「迷わない」「押しやすい」UIになります。

入門で挫折しやすいのは、プロパティを暗記しようとしてしまうことです。CSSは暗記よりも、**適用のされ方（カスケード）とレイアウトの基本（Box Model / Flex / Grid）**を押さえる方が効果が出ます。この記事では、実務でも通用する「まずこれで形にする」順番で、座学→ハンズオンの流れで整理します。

座学

1) CSSが当たる仕組み：カスケードと詳細度

CSSは「どのルールが勝つか」のゲームです。ここを理解すると、突然スタイルが効かなくなる事故が減ります。

  • カスケード：後から書かれたものが勝ちやすい
  • 詳細度（Specificity）：より“狙いが具体的”なセレクタが勝つ
    • ざっくり id > class/属性/擬似クラス > 要素/擬似要素
  • !important：強制的に勝つが、保守性を壊しやすい最終手段

入門では「とりあえず !important」で直しがちですが、後々の拡張や変更で必ず苦しみます。まずはセレクタを必要以上に強くしない、そしてレイヤー（後述）を作るのが王道です。

2) セレクタは“狙いの粒度”を決める

セレクタは自由度が高い反面、運用で差が出ます。おすすめの考え方は以下です。

  • まずは class中心（見た目の意味に寄せる）
  • タグ直指定（div {} など）は“全体ルール”以外は控えめに
  • 親子に依存しすぎる（.a .b .c {}）と、HTMLの変更に弱くなる

入門で覚える価値が高いのはこのあたりです：

  • .class / .a.b（複数class）
  • .parent > .child（直下）
  • .item + .item（隣接。リストの区切りなどに便利）
  • :hover, :focus-visible（操作感とアクセシビリティ）

3) Box Model：余白とサイズの“正しい感覚”

CSSレイアウトの土台はBox Modelです。

  • content（中身）
  • padding（内側の余白）
  • border（枠線）
  • margin（外側の余白）

入門で頻出の混乱は「幅100%なのに溢れる」問題。多くは box-sizing が原因です。
実務では基本として、

  • * { box-sizing: border-box; }

を入れて、width/heightにpaddingとborderが含まれる状態を標準にすることが多いです（設計が安定します）。

4) レイアウトはFlexとGridを軸にする

昔のCSSはfloatやpositionで頑張る場面が多かったですが、今は基本をこれに寄せると整理が速いです。

  • Flex：1次元（横並び or 縦並び）で“整列”が得意
    • 例：ヘッダーの左右配置、ボタンの横並び、カード内の整列
  • Grid：2次元（行×列）で“骨組み”が得意
    • 例：カード一覧、2カラムレイアウト、ダッシュボード

「まずGridで大枠 → 中はFlexで整列」という組み合わせが強いです。

5) 文字が読みやすいCSSは“UIの品質”

見た目の派手さより、読みやすさが成果に直結します。最低限の基準はこれです。

  • line-height を詰めすぎない（文章は 1.6 前後が無難）
  • max-width を決めて行が長くなりすぎない（文章なら 60〜75文字程度が目安）
  • コントラストを確保し、リンクやボタンは「押せる」と分かる見た目にする
  • :focus-visible を入れてキーボード操作でも迷わない

“入門”の段階でここを押さえると、CSSが単なる装飾ではなくUI設計になる感覚が掴めます。

ハンズオン

ここでは「小さなページを、崩れず読みやすく、操作しやすく」整える一連を作ります。コピペで動く想定です。

0) HTML（素材）

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS入門ハンズオン</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="site-header">
    <div class="container header-inner">
      <h1 class="site-title">My UI</h1>
      <nav class="nav">
        <a class="nav-link" href="#">Docs</a>
        <a class="nav-link" href="#">Blog</a>
        <a class="nav-link" href="#">About</a>
      </nav>
    </div>
  </header>  <main class="container">
    <section class="hero">
      <h2 class="hero-title">崩れない、読みやすい、押しやすい。</h2>
      <p class="hero-text">
        CSSは暗記よりも「当たり方」と「レイアウトの型」を覚えると、最短で成果が出ます。
      </p>
      <div class="hero-actions">
        <button class="btn btn-primary">はじめる</button>
        <button class="btn btn-ghost">サンプルを見る</button>
      </div>
    </section>    <section class="cards">
      <article class="card">
        <h3 class="card-title">Box Model</h3>
        <p class="card-text">余白とサイズの感覚を身につける。</p>
      </article>
      <article class="card">
        <h3 class="card-title">Flex</h3>
        <p class="card-text">整列を支配する。横並びはまずこれ。</p>
      </article>
      <article class="card">
        <h3 class="card-title">Grid</h3>
        <p class="card-text">大枠の骨組みを作る。2次元レイアウトの主役。</p>
      </article>
    </section>
  </main>  <footer class="site-footer">
    <div class="container footer-inner">
      <small>© My UI</small>
      <a class="footer-link" href="#">Privacy</a>
    </div>
  </footer>
</body>
</html>

1) まず“事故を減らす”土台CSS（style.css）

/* 1) まずリセット寄りの土台 */
*,
*::before,
*::after {
  box-sizing: border-box;
}html, body {
  margin: 0;
  padding: 0;
}body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}/* 2) コンテナ：読みやすい幅に制限 */
.container {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}/* 3) リンクは分かる見た目に（最低限） */
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

ここまでで「余白の謎」「幅の暴走」「focusが消えて迷う」などの初歩事故が減ります。

2) ヘッダー：Flexで左右配置

.site-header {
  border-bottom: 1px solid #ddd;
  background: #fff;
}.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}.site-title {
  margin: 0;
  font-size: 18px;
}.nav {
  display: flex;
  gap: 14px;
}.nav-link {
  padding: 6px 10px;
  border-radius: 8px;
}
.nav-link:hover {
  background: #f2f2f2;
}

**「ヘッダーの左にロゴ、右にメニュー」**はFlexの王道例です。gap は並びの余白を綺麗に管理できます。

3) ヒーロー：余白と文字サイズで“情報の優先度”を作る

.hero {
  padding-block: 28px 18px;
}.hero-title {
  margin: 0 0 8px;
  font-size: 28px;
  line-height: 1.25;
}.hero-text {
  margin: 0 0 16px;
  max-width: 60ch;
  color: #333;
}.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

max-width: 60ch は文章の読みやすさに効きます。画面が広いほど価値が出ます。

4) ボタン：押しやすさと状態（hover / focus）

.btn {
  appearance: none;
  border: 1px solid #ccc;
  background: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}.btn:hover {
  background: #f6f6f6;
}.btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}.btn-primary {
  background: #111;
  color: #fff;
  border-color: #111;
}
.btn-primary:hover {
  filter: brightness(1.1);
}.btn-ghost {
  background: transparent;
}

入門の段階で :focus-visible を覚えておくと、UIが一段“ちゃんとした”ものになります。

5) カード一覧：Gridで“崩れない一覧”

.cards {
  display: grid;
  gap: 14px;
  padding-block: 14px 32px;
  grid-template-columns: repeat(3, 1fr);
}.card {
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}.card-title {
  margin: 0 0 6px;
  font-size: 16px;
}.card-text {
  margin: 0;
  color: #333;
}

これだけだとスマホで窮屈になるので、次でレスポンシブを入れます。

6) レスポンシブ：メディアクエリは“最小限”から

@media (max-width: 800px) {
  .cards {
    grid-template-columns: 1fr;
  }
  .hero-title {
    font-size: 24px;
  }
}

入門は「ブレークポイントを大量に作る」より、**“崩れる場所で最低限1つ追加”**が管理しやすいです。

7) フッター：小さく整える

.site-footer {
  border-top: 1px solid #ddd;
  background: #fff;
}.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 14px;
}.footer-link {
  padding: 6px 10px;
  border-radius: 8px;
}
.footer-link:hover {
  background: #f2f2f2;
}

完成です。ここまでで、Box Model → Flex → Grid → レスポンシブ → focusの順に一通り触れています。

まとめ

CSS入門で最短で伸びるコツは、プロパティ暗記よりも「当たり方」と「型」を覚えることです。

  • CSSはルールの勝ち負け（カスケード/詳細度）で動く
  • box-sizing: border-box と container で土台を固めると事故が減る
  • レイアウトは Gridで骨組み → Flexで整列 が強い
  • 読みやすさ（line-height, max-width）と操作性（focus-visible）が品質を底上げする
  • メディアクエリは“崩れる地点に最小限”から始めると保守しやすい

この型が身体に入ると、あとは必要な表現を追加していくだけになります。

投稿日

カテゴリー:

投稿者:

saigo

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です