CSSの便利な関数まとめ！デザインやレイアウトを自在に操る

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

.button {
  background-color: var(--primary-color);
  color: white;
}

.alert {
  background-color: var(--secondary-color);
  color: white;
}

• :root に --primary-color と --secondary-color を定義。
• .button では --primary-color を使用し、.alert では --secondary-color を適用。
• 一箇所の値を変更するだけで、サイト全体のカラーテーマを簡単に変えられる。

右方向に2色のグラデーション

/*右方向に2色のグラデーション*/
.button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

• to right を指定すると、左から右に向かってグラデーションが適用 される。
• #ff7e5f（オレンジ系）→ #feb47b（ピーチ系）へと滑らかに色が変化
• ボタンや見出し背景のアクセント に最適。。

斜め方向に3色のグラデーション

/*斜め方向に3色のグラデーション*/
.header {
  background: linear-gradient(135deg, #6a11cb, #2575fc, #2ecc71);
}

• 135deg を指定すると、135度（左上から右下へ向かうグラデーション） を作成。
• #6a11cb（紫）→ #2575fc（青）→ #2ecc71（緑）へと滑らかに色が変化。
• ヘッダーやセクションの背景に適用すると、より洗練されたデザイン になる。

/*固定値と可変値を組み合わせたレイアウト調整*/
.container {
  width: calc(100% - 2rem);
  margin:auto
}

• 100%（親要素の幅）から 2rem（固定の余白）を引いたサイズを適用。
• 画面サイズに応じて要素の幅が変わるが、必ず 2rem の余白が確保される。
• margin:autoが入ることで、画面横方向の中央に配置される

.text {
  font-size: calc(1rem + 1vw);
}

• 1rem（基本のフォントサイズ）に、1vw（ビューポート幅に応じたサイズ）を加える。
• これにより、画面が広くなるとフォントサイズが自動的に大きくなり、狭くなると小さくなる。
• 文字の視認性を保ちつつ、レスポンシブ対応できる。

.button {
  padding: calc(10px + 2%);
}

• 10px の基本パディングに加えて、画面幅の 2% 分の余白を追加。
• 画面サイズが広がるほどパディングが増え、狭くなると減るため、ボタンサイズが適度に調整される。

.text {
  font-size: clamp(16px, 2.5vw, 24px);
}

• 最小サイズ16px（これ以下にはならない）。
• 推奨サイズ2.5vw（画面幅に対して2.5%のサイズに動的に変化）。
• 最大サイズ24px（これ以上は大きくならない）。
• これにより、画面サイズが大きくなってもフォントが大きくなりすぎず、小さい画面でも視認性を確保。

.card {
  height: clamp(150px, 50vh, 400px);
}

• 最小の高さ150px で、要素が小さくなりすぎないようにする。
• 推奨の高さ50vh（ビューポートの50%）で、デバイスに応じた動的な高さを確保。
• 最大の高さ400px に制限し、過度に大きくなりすぎないようにする。
• これにより、デバイスに応じた適切なカードサイズを維持 できる。

/*ボタンの幅を適切に調整*/
.button {
  width: clamp(100px, 20vw, 300px);
}

• 最小幅 100px（ボタンが小さくなりすぎない）。
• 推奨幅 20vw（画面幅の20%に応じて調整）。
• 最大幅 300px（大きくなりすぎない）。
• これにより、ボタンサイズをレスポンシブに保ちつつ、過度に大きくなるのを防ぐ。

min() は、指定した複数の値のうち、小さい方の値 を適用する関数です。これにより、「要素が 大きくなりすぎないように したい」ときに便利です。通常、CSSで width: 80% のように指定すると、画面サイズが大きい場合に 要素が広がりすぎてしまう ことがあります。しかし、min(80%, 1200px) のように記述すれば、「画面の80%の幅を確保しつつ、最大でも 1200px 以内に収める」といった制御が可能になります。

また、フォントサイズの調整にも役立ちます。たとえば、min(3rem, 5vw) を指定すると、フォントサイズは 5vw（ビューポート幅の5%）を基準に変化しつつ、最大でも 3rem を超えないように 制御できます。

.container {
  width: min(80%, 1200px);
}

• 80% の幅を基本にするが、最大 1200px を超えないように する。
• 画面が狭い場合 → 80% の幅を適用。
• 画面が広い場合 → 1200px を適用し、コンテンツが広がりすぎるのを防ぐ。
• これにより、中央に適度な幅のコンテンツエリアを維持 できる。

/*フォントサイズを最大 3rem に制限*/
.text {
  font-size: min(3rem, 5vw);
}

• 最大フォントサイズ 3rem を設定し、これ以上は大きくならない ようにする。
• 推奨フォントサイズ 5vw（ビューポート幅の5%に応じて変化）。
• 画面が狭いとき → 5vw に従ってフォントサイズが変化。
• 画面が広いとき → 3rem を超えないように固定。
• これにより、フォントが大きくなりすぎて読みづらくなるのを防ぐ。

/*ボタンの幅を最大 200px に制限*/
.button {
  width: min(50%, 200px);
}

• 最大幅200px を設定（これ以上は大きくならない）。
• 推奨サイズ50%（親要素の半分の幅）。
• 小さな画面では 50% に合わせて変動し、大きな画面では 200px を超えない。
• これにより、ボタンが大きくなりすぎるのを防ぎ、適切なバランスを保つ

/*フレキシブルなナビゲーションバーの高さ調整*/
.navbar {
  height: min(10vh, 80px);
}

• 最大高さ80px を設定し、これ以上は大きくならないようにする。
• 推奨サイズ10vh（画面の高さに応じて変動）。
• これにより、ナビゲーションバーが大きくなりすぎるのを防ぎつつ、適切に変化 する。

/*最小幅を確保しつつ、可変サイズに対応*/
.container {
  width: max(300px, 50%);
}

• 50% の幅を基本にするが、300px を下回らないようにする。
• 画面が広い場合 → 50% を適用。
• 画面が狭い場合 → 300px を適用し、レイアウトが崩れるのを防ぐ。
• レスポンシブデザインで 要素が極端に小さくならないようにする のに便利。

/*フォントサイズを最小1remにしつつ、可変対応*/
.text {
  font-size: max(1rem, 2vw);
}

• 最小フォントサイズ1rem を確保（これ以下にはならない）。
• 推奨フォントサイズ2vw（ビューポート幅の2%）。
• 画面が狭いとき → 1rem のフォントサイズを維持。
• 画面が広いとき → 2vw に応じてフォントが大きくなる。
• これにより、文字の可読性を保ちつつ、適度に拡大縮小 できる。

/*ボタンのサイズを適切に調整*/
.button {
  width: max(120px, 10vw);
}

• 最小幅120px（ボタンが極端に小さくならないようにする）。
• 推奨サイズ10vw（ビューポート幅の10%に応じたサイズ）。
• 小さな画面では 120px を維持し、大きな画面では 10vw に拡大 することで、ボタンサイズが適切に調整される。

/*カラムレイアウトの最小幅を確保*/
.grid-item {
  flex: 1;
  min-width: max(200px, 25%);
}

• flex: 1; で柔軟に広がるが、min-width を max(200px, 25%) に設定。
• 要素が小さくなりすぎるのを防ぎつつ、余白をうまく調整 できる。
• これにより、グリッドレイアウトが整った見た目 になる。

画像をぼかす（blur()）

/*画像をぼかす（blur()）*/
.image {
  filter: blur(10px);
}

• .image のクラスがついた画像に 10px のぼかし を適用。
• 背景画像をぼかして フォーカスのあるデザイン を作るのに最適。
• モーダルの背景をぼかしたり、テキストの可読性を向上させる用途 に使える。

画像の明るさを調整（brightness()）

/*画像の明るさを調整（brightness()））*/
.image {
  filter: brightness(1.5);
}

• brightness(1.5) は、画像の明るさを 1.5倍 にする。
• 値が 1 の場合は元の明るさで、0.5 なら暗く、2 ならより明るくなる。
• 画像が暗すぎる場合に視認性を向上させたり、ホバーエフェクト に活用できる。

画像をモノクロに変換（grayscale()）

/*画像をモノクロに変換（grayscale()））*/
.image {
  filter: grayscale(100%);
}

• grayscale(100%) を適用すると、画像が 完全なモノクロ（白黒） に変換される。
• 50% なら半分だけグレースケールになり、レトロなデザインやニュース記事風の効果を演出 できる。
• ホバー時にカラー画像に戻すエフェクト と組み合わせると、動きのあるデザインに。

マウスオーバー時に要素を移動

/*マウスオーバー時に要素を移動*/
.card:hover {
  transform: translate(10px, 10px);
}

.card {
  transition: transform 0.3s ease;
}

• .card にマウスを乗せると、X軸方向に10px、Y軸方向に10px移動。
• スムーズな動き をつけたい場合は、transition と組み合わせると効果的。
• .card により、マウスオーバー時に 滑らかに移動 するアニメーションが実現できる。

ボタンをクリックしたときに押し込むような効果

/*ボタンをクリックしたときに押し込むような効果*/
.button:active {
  transform: translate(0, 3px);
}

• ボタンをクリック（:active）すると、Y軸方向に3pxだけ移動 し、押し込まれたような効果を演出。
• UIのアクセント に使える。

キーフレームアニメーションを使ったスライドイン

/*キーフレームアニメーションを使ったスライドイン*/
@keyframes slide-in {
  from {
    transform: translate(-100px, 0);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

.box {
  animation: slide-in 0.5s ease-out;
}

• .box 要素が、左（-100px）からスライドイン するアニメーションを実装。
• opacity を 0 → 1 に変化させることで、ふわっと現れる効果 も追加。
• ページロード時のエフェクト や スクロール時のアニメーション に活用できる。

3等分のカラムを作成

/*3等分のカラムを作成*/
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

• repeat(3, 1fr) を指定すると、3つの均等なカラム（1fr × 3）を作成。
• 1fr はフレキシブルな幅（余白を考慮して均等に分配） を意味する。
• 等間隔のカードレイアウトや、リスト表示 に最適。

自動的に列の数を調整

/*自動的に列の数を調整*/
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

• auto-fit を使うと、要素の幅に応じてカラム数が自動調整 される。
• minmax(150px, 1fr) は 最小150px、最大1fr（均等に広がる）。
• これにより、レスポンシブなグリッドレイアウト を簡単に作成できる。

5行 × 2列のグリッドレイアウト

/*5行 × 2列のグリッドレイアウト*/
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 100px);
}

• repeat(2, 1fr) → 2列（等幅）
• repeat(5, 100px) → 高さ100pxの行を5つ作成
• 固定サイズのグリッドレイアウトを構築するときに便利。

ツールチップを表示

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: white;
  padding: 5px;
  border-radius: 5px;
  white-space: nowrap;
}

• attr(data-tooltip) を使って、HTMLの data-tooltip 属性の値を取得し、要素の後ろに表示。background や border-radius で、ツールチップ風のデザイン に。

HTML側の記述は、

<span class="tooltip" data-tooltip="これはツールチップです">Hover me</span>

マウスオーバー時に ::after でツールチップを表示 するスタイルを追加すれば、簡単なホバー情報を作成可能。

フォームのプレースホルダーとして表示

input::before {
  content: attr(placeholder);
  color: gray;
}

• attr(placeholder) を使い、フォームの placeholder 属性の値を要素内に表示。
• ただし、input::before はブラウザによってサポートされていない場合があるため、通常の placeholder の代替手段として利用可能。

HTML側の記述は、

<input type="text" placeholder="ここに入力してください">

リストの自動ナンバリング

/* リストの自動ナンバリング*/
ol {
  counter-reset: section;
}

li::before {
  counter-increment: section;
  content: "Step " counter(section) ": ";
}

• counter-reset: section; → リスト全体のカウンターをリセット する
• counter-increment: section; → リスト項目ごとにカウンターを増やす
• content: "Step " counter(section) ": "; → リストの前に「Step 1:」「Step 2:」のように番号を付加。

/* 見出しに自動番号を付加*/
h2 {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "章 " counter(section) " - ";
}

• counter-reset: section; → 各 h2 でカウンターをリセット。
• counter-increment: section; → 新しい h2 が登場するたびにカウントを増やす
• content: "章 " counter(section) " - "; → 「章 1 -」のように見出しの前に番号を付加。

ネストされたリストに階層ごとの番号を付加

ネスト（入れ子）されたリストの番号を階層ごとに表示できるので、細かい手順に番号を振る時などにとても便利

/* 見出しに自動番号を付加*/
ol {
  counter-reset: list-counter;
}

li {
  counter-increment: list-counter;
}

li::before {
  content: counter(list-counter) ". ";
}

HTML側の記述は、

<ol>
  <li>準備
    <ol>
      <li>必要なツールを揃える</li>
      <li>環境をセットアップする</li>
    </ol>
  </li>
  <li>作業
    <ol>
      <li>手順1</li>
      <li>手順2</li>
    </ol>
  </li>
</ol>

1. 準備
   1.1 必要なツールを揃える
   1.2 環境をセットアップする
2. 作業
   2.1 手順1
   2.2 手順2

タイピング風のアニメーション

.typing {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing 3s steps(10) forwards;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

• .typing の width を 0 から 100% に変化させることで、テキストがタイピングされるようなアニメーション を作成。
• steps(10) を指定すると、10段階で幅が増えていくので、一文字ずつ表示される効果 を再現できる。

HTML側の記述は、

<p class="typing">Hello, World!</p>

スプライトアニメーション（コマ送り）

.sprite {
  width: 100px;
  height: 100px;
  background-image: url('sprite.png');
  animation: spriteAnimation 1s steps(4) infinite;
}

@keyframes spriteAnimation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -400px 0;
  }
}

• sprite.png に 横4コマのアニメーション画像 を配置。
• steps(4) を指定し、4コマで切り替えるスプライトアニメーション を作成。
• 滑らかに動かさず、1フレームずつ変化させたいときに有効。

カウントアップの数値をカクカク進める

.number {
  font-size: 2rem;
  animation: countUp 2s steps(10) forwards;
}

@keyframes countUp {
  from {
    content: "0";
  }
  to {
    content: "10";
  }
}

• 数字が 0 から 10 にカウントアップするアニメーションを steps(10) で 10段階に区切ってカクカクさせる。
• steps(10) にすることで、1ずつ増えていくようなエフェクト を作れる。
• JavaScriptと組み合わせると、より柔軟なカウントアップアニメーションを作成可能。

シンプルな円形グラデーション

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(red, yellow, green, blue);
}

• conic-gradient(red, yellow, green, blue) → 赤 → 黄色 → 緑 → 青 へと滑らかに色が変化
• border-radius: 50% を加えることで、完全な円形のグラデーションを作成。

円グラフを作成

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #ff6384 0% 40%, 
    #36a2eb 40% 70%, 
    #ffce56 70% 100%
  );
}

• #ff6384（ピンク）→ 0% 40%（最初の40%）
• #36a2eb（青）→ 40% 70%（次の30%）
• #ffce56（黄色）→ 70% 100%（最後の30%）
• CSSだけでシンプルな円グラフを作成できる。

ホバー時に回転

.icon:hover {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

• rotate(45deg) → 要素を45度時計回りに回転。
• transition: transform 0.3s ease; を追加すると、スムーズな回転アニメーション を実現できる。
• ボタンやアイコンのホバーエフェクトに最適。

無限に回転するアニメーション

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid lightgray;
  border-top: 5px solid blue;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

• rotate(0deg) から rotate(360deg) に変化し、要素が360度回転するアニメーション を作成。
• infinite を指定することで、スピナーのように無限に回転 させることができる。
• ローディングアニメーションに最適。