🎨

CSS言語のサンプルコード

文法解説で学んだ内容を組み合わせた、実践的なサンプルを3本紹介します。①基本的なカード型レイアウト、②Flexbox/Gridによるレスポンシブレイアウト、③アニメーションを使ったUI部品、の順に難易度が上がります。

サンプル①：カード型レイアウト（基本スタイリング）

ボックスモデル・色・単位・疑似クラスの基本を組み合わせた、よくある「カードコンポーネント」の例です。box-sizing: border-boxでサイズ計算を分かりやすくし、:hover疑似クラスでマウスオーバー時の見た目を変えています。

SAMPLE PROGRAM

<!-- HTML -->
<div class="card-list">
  <div class="card">
    <h3>商品A</h3>
    <p>説明文がここに入ります。</p>
    <span class="price">￥1,200</span>
  </div>
  <div class="card">
    <h3>商品B</h3>
    <p>説明文がここに入ります。</p>
    <span class="price">￥2,400</span>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  width: 220px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.card h3 {
  margin: 0 0 8px;
  color: #222;
  font-size: 1.1rem;
}

.card .price {
  display: block;
  margin-top: 12px;
  font-weight: bold;
  color: #d33;
}

サンプル②：Flexbox/Gridを使ったレスポンシブレイアウト

ヘッダー・サイドバー・メインコンテンツからなるページ全体のレイアウトをdisplay: gridで組み、ヘッダー内のナビゲーションをdisplay: flexで横並びにする例です。grid-template-areasで名前付きの領域を定義するとレイアウトの見通しが良くなります。画面幅が狭いときは@mediaでグリッド構成を1カラムに切り替え、モバイルでも見やすくします。

SAMPLE PROGRAM

<!-- HTML -->
<div class="layout">
  <header class="layout__header">
    <nav class="nav">
      <span class="nav__logo">MyApp</span>
      <div class="nav__links">
        <a href="#">ホーム</a>
        <a href="#">製品</a>
        <a href="#">お問い合わせ</a>
      </div>
    </nav>
  </header>
  <aside class="layout__sidebar">サイドバー</aside>
  <main class="layout__main">メインコンテンツ</main>
</div>

CSS

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;   /* サイドバー固定幅＋残り可変 */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
  min-height: 100vh;
}

.layout__header { grid-area: header; }
.layout__sidebar {
  grid-area: sidebar;
  background: #222;
  color: #fff;
  padding: 16px;
}
.layout__main {
  grid-area: main;
  padding: 24px;
}

/* ヘッダー内のナビゲーションはFlexboxで1次元に整列 */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #ddd;
}

.nav__links {
  display: flex;
  gap: 20px;
}

/* 画面幅が768px未満ではサイドバーを上に、1カラムに切り替える */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main";
  }

  .nav__links {
    gap: 12px;
    flex-wrap: wrap;
  }
}

サンプル③：アニメーションを使ったUI部品（トグルスイッチ）

チェックボックスと::before擬似要素、transitionを組み合わせて、よくある「トグルスイッチ（ON/OFFスイッチ）」を作る例です。JavaScriptを使わず、CSSの:checked疑似クラスだけでON/OFFの見た目を切り替えています。アニメーションにはtransformを使い、reflowを避けて滑らかに動かしています。

SAMPLE PROGRAM

<!-- HTML -->
<label class="switch">
  <input type="checkbox" class="switch__input">
  <span class="switch__track"></span>
</label>

CSS

.switch {
  display: inline-block;
  position: relative;
  width: 52px;
  height: 28px;
}

/* 元のチェックボックスは見た目上は透明にして隠す（クリックは有効なまま） */
.switch__input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__track {
  position: absolute;
  inset: 0;    /* top/right/bottom/leftをまとめて0に */
  background: #ccc;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease;  /* 色の変化を滑らかに */
}

/* つまみ（丸い部分）を::beforeで作る */
.switch__track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;  /* transformで動かすので高速 */
}

/* チェックされているときの見た目を:checkedで切り替える */
.switch__input:checked + .switch__track {
  background: #4ade80;
}

.switch__input:checked + .switch__track::before {
  transform: translateX(24px);   /* leftではなくtransformで移動させる */
}

/* キーボード操作時のフォーカスも視認できるようにする */
.switch__input:focus-visible + .switch__track {
  outline: 2px solid #6f8cff;
  outline-offset: 2px;
}

クイズに挑戦する →