CSSって？

HTMLの見た目（色・余白・レイアウト・アニメ）を指定するスタイル言語。
重要キーワード：Cascade（優先順位の連なり）、Specificity（詳細度）、Inheritance（継承）。

1) CSSの書き方・読み込み方

<!-- 外部ファイル（推奨） -->
<link rel="stylesheet" href="styles.css">

<!-- ページ内（学習用） -->
<style>
  p { color: #333; }
</style>

<!-- インライン（基本非推奨） -->
<p style="color:#333;">テキスト</p>

2) セレクタの基本

/* タイプ（要素） */      h1 { ... }
/* クラス */             .btn { ... }
/* ID */                 #header { ... }   /* 乱用しない */
 /* 子孫・子・隣接 */    nav a { ... }  nav > a { ... }  h2 + p { ... }
/* 属性 */               input[type="email"] { ... }
/* 擬似クラス */         a:hover, li:nth-child(2) { ... }
/* 擬似要素 */           p::first-line, a::after { content:"→"; }

3) カスケード＆優先度（Specificity）

計算イメージ：ID(100) > class/属性/擬似クラス(10) > 要素/擬似要素(1)
競合したら：後勝ち（後から書いた方が有効）
!importantは最終手段（設計悪化のもと）

4) ボックスモデル（超重要）

margin ─ 外側の余白
border ─ 枠線
padding ─ 内側の余白
content ─ 中身

* { box-sizing: border-box; } /* 幅計算が直感的になる定番 */

5) 単位＆色

単位：px（固定）/ %（相対）/ em（親のfont-size基準）/ rem（ルート基準）/ vw,vh（ビューポート）
→ レスポンシブは rem と % を多用。
色：#222 / rgb(34 34 34) / hsl(210 10% 20%)（HSLは調整しやすい）
変数：--brand: #5865f2; → color: var(--brand);

6) 文字・余白の基本

html { font-size: 16px; }       /* remの基準 */
body { line-height: 1.7; }
h1 { font-size: clamp(1.5rem, 3vw, 2.5rem); } /* 可変サイズ */
p  { margin: 0 0 1rem; }

7) レイアウト：display / Flex / Grid

display

.block { display: block; }        /* 幅いっぱい */
.inline { display: inline; }      /* 行内 */
.inline-block { display:inline-block; }

Flex（1次元レイアウト：横並び・縦中央寄せが得意）

.container {
  display: flex;
  gap: 1rem;
  align-items: center;        /* 交差軸整列（縦） */
  justify-content: space-between; /* 主軸整列（横） */
}
.center {
  display:flex; align-items:center; justify-content:center;
}

Grid（2次元レイアウト：段組が得意）

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 1rem;
}

/* レスポンシブな自動詰め */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

8) 位置指定

.box { position: relative; }
.badge {
  position: absolute; top: .5rem; right: .5rem;
}
header { position: sticky; top: 0; } /* スクロール追従 */

9) レスポンシブ（メディアクエリ・コンテナクエリ）

/* 画面幅が768px以上で適用（モバイル優先） */
@media (min-width: 768px) {
  .nav { display: flex; }
}

/* コンテナクエリ（対応ブラウザ増） */
.card { container-type: inline-size; }
@container (min-width: 500px) {
  .card__side-by-side { display:flex; }
}

10) トランジション＆トランスフォーム

.btn {
  transition: transform .2s ease, background-color .2s;
}
.btn:hover {
  transform: translateY(-2px) scale(1.02);
  background: #111;
  color: #fff;
}

11) リセットとベース

/* まずはこれでOKな最小ベース */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display:block; }
button, input, select, textarea { font: inherit; }
:root {
  --bg: #fff; --fg:#222; --muted:#6b7280; --brand:#3b82f6;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b0b0f; --fg:#e5e7eb; --muted:#9ca3af; }
}
body { background: var(--bg); color: var(--fg); line-height:1.7; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

12) すぐ試せるミニページ（HTML+CSS）

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS基礎デモ</title>
<style>
  * { box-sizing: border-box; }
  body { margin:0; font-family: system-ui, sans-serif; line-height:1.7; }
  header, footer { padding:16px; background:#f5f5f5; }
  .wrap { max-width:960px; margin:24px auto; padding:0 16px; }
  .hero {
    padding: 48px 16px; text-align:center;
    background: linear-gradient(120deg, #e0f2fe, #fde68a);
    border-radius:16px;
  }
  .btn {
    display:inline-block; padding:.75rem 1rem; border-radius:9999px;
    background:#111; color:#fff; transition: transform .2s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .grid {
    display:grid; gap:1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    margin-top:24px;
  }
  .card { border:1px solid #e5e7eb; border-radius:12px; padding:16px; }
  .card h3 { margin:.25rem 0 .5rem; }
</style>
</head>
<body>
  <header><div class="wrap"><strong>CSS基礎デモ</strong></div></header>
  <main class="wrap">
    <section class="hero">
      <h1>CSSの基本を掴もう</h1>
      <p>セレクタ / ボックスモデル / Flex / Grid / レスポンシブ</p>
      <a class="btn" href="#cards">カードを見る</a>
    </section>

    <section id="cards" class="grid">
      <article class="card">
        <h3>セレクタ</h3>
        <p>`.class` / `#id` / `a:hover` / `input[type="text"]` …</p>
      </article>
      <article class="card">
        <h3>Flex</h3>
        <p>横並び・中央寄せが簡単。`display:flex; gap:1rem;`</p>
      </article>
      <article class="card">
        <h3>Grid</h3>
        <p>2次元レイアウト。`auto-fit`×`minmax()`が実用的。</p>
      </article>
    </section>
  </main>
  <footer><div class="wrap"><small>&copy; 2025 CSS Demo</small></div></footer>
</body>
</html>

13) つまずきポイント

高さが合わない：親にalign-items: stretchやheight:auto、画像にはdisplay:block。
中央寄せできない：インラインはtext-align:center、ブロックはmargin: 0 auto、Flexならcenter。
崩れる：box-sizing:border-boxにして、余白はgap優先、width指定は最小限。
優先順位に勝てない：セレクタを少しだけ強くする（親クラスを1段増やすなど）。!importantは避ける。

次に進むなら

レイアウト設計：BEM・Utility First（Tailwind的考え方）
モダン機能：subgrid、container queries、logical properties（margin-inlineなど）
パフォーマンス：未使用CSSの削減、content-visibility、will-changeの慎重な活用

投稿者: chosuke

趣味はゲームやアニメや漫画などです chosuke のすべての投稿を表示

CSSの基礎

CSSって？

1) CSSの書き方・読み込み方

2) セレクタの基本

3) カスケード＆優先度（Specificity）

4) ボックスモデル（超重要）

5) 単位＆色

6) 文字・余白の基本

7) レイアウト：display / Flex / Grid

display

Flex（1次元レイアウト：横並び・縦中央寄せが得意）

Grid（2次元レイアウト：段組が得意）

8) 位置指定

9) レスポンシブ（メディアクエリ・コンテナクエリ）

10) トランジション＆トランスフォーム

11) リセットとベース

12) すぐ試せるミニページ（HTML+CSS）

13) つまずきポイント

次に進むなら

投稿者: chosuke

コメントを残すコメントをキャンセル

CSSって？

1) CSSの書き方・読み込み方

2) セレクタの基本

3) カスケード＆優先度（Specificity）

4) ボックスモデル（超重要）

5) 単位＆色

6) 文字・余白の基本

7) レイアウト：display / Flex / Grid

display

Flex（1次元レイアウト：横並び・縦中央寄せが得意）

Grid（2次元レイアウト：段組が得意）

8) 位置指定

9) レスポンシブ（メディアクエリ・コンテナクエリ）

10) トランジション＆トランスフォーム

11) リセットとベース

12) すぐ試せるミニページ（HTML+CSS）

13) つまずきポイント

次に進むなら

投稿者: chosuke

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル