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

  • URLをコピーしました!

CSSには、デザインやレイアウトを柔軟に調整できる 「関数」 が数多く用意されています。
calc() を使えば 異なる単位を組み合わせた計算 が可能になり、clamp() を使えば フォントサイズをレスポンシブに調整 できます。
また、conic-gradient()円グラデーション を作成したり、rotate()要素を回転 させるなど、アニメーションやビジュアル効果にも大きく活用できます。ここでは、CSSの代表的な関数15種類を詳しく解説!それぞれの 使い方・サンプルコード・活用例 を紹介しています。よければご参照ください!

目次

calc()は、何ができる?

calc() は、CSS内で四則演算(+, -, *, /)を利用し、異なる単位(px%remvw など)を組み合わせた計算ができる関数です。通常、CSSでは異なる単位を直接組み合わせることができませんが、calc() を使用することで、固定値と可変値を柔軟に組み合わせたスタイル設定が可能になります。

特に、レスポンシブデザインを考慮する際に 「可変サイズ + 固定値」 の組み合わせを活用すると、画面サイズに応じて適切に調整される、バランスの良いデザインを作ることができます

/*固定値と可変値を組み合わせたレイアウト調整*/
.container {
  width: calc(100% - 2rem);
}
  • 100%(親要素の幅)から 2rem(固定の余白)を引いたサイズを適用。
  • 画面サイズに応じて要素の幅が変わるが、必ず 2rem の余白が確保される。
.text {
  font-size: calc(1rem + 1vw);
}
  • 1rem(基本のフォントサイズ)に、1vw(ビューポート幅に応じたサイズ)を加える。
  • これにより、画面が広くなるとフォントサイズが自動的に大きくなり、狭くなると小さくなる。
  • 文字の視認性を保ちつつ、レスポンシブ対応できる。
.button {
  padding: calc(10px + 2%);
}
  • 10px の基本パディングに加えて、画面幅の 2% 分の余白を追加。
  • 画面サイズが広がるほどパディングが増え、狭くなると減るため、ボタンサイズが適度に調整される

clamp()は、何ができる?

clamp() は、CSS内で 最小値・最大値・推奨値(中間値) を指定し、その範囲内で動的にスタイルを調整できる関数です。これにより、例えばフォントサイズを「小さすぎず・大きすぎず、画面サイズに応じて変化させる」ことが簡単にできます。通常、レスポンシブデザインを実装する際は media queries を使って、異なるデバイスごとにスタイルを調整します。しかし、clamp() を使えば 1行のコード で「最小値以上・最大値以下で、適切なサイズを維持する」デザインが可能になります。また、フォントサイズ以外にも、ボックスの幅・高さ・余白(marginpadding など、要素のサイズを動的に制御する場面でも活用できます。

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

  • 最小サイズ16px(これ以下にはならない)。
  • 推奨サイズ2.5vw(画面幅に対して2.5%のサイズに動的に変化)。
  • 最大サイズ24px(これ以上は大きくならない)。
  • これにより、画面サイズが大きくなってもフォントが大きくなりすぎず、小さい画面でも視認性を確保。
.section {
  margin: clamp(1rem, 5%, 3rem);
}

  • 最小の余白1rem を確保。
  • 画面サイズに応じて 5% のマージンを適用(推奨値)。
  • 最大の余白3rem まで広がるが、それ以上は増えない。
  • これにより、画面が大きい場合は適度な余白が増え、画面が狭くても詰まりすぎないデザインになる。
.card {
  height: clamp(150px, 50vh, 400px);
}

  • 最小の高さ150px で、要素が小さくなりすぎないようにする。
  • 推奨の高さ50vh(ビューポートの50%)で、デバイスに応じた動的な高さを確保。
  • 最大の高さ400px に制限し、過度に大きくなりすぎないようにする。
  • これにより、デバイスに応じた適切なカードサイズを維持 できる。
/*ボタンの幅を適切に調整*/
.button {
  width: clamp(100px, 20vw, 300px);
}


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

min()は、何ができる?

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(画面の高さに応じて変動)。
  • これにより、ナビゲーションバーが大きくなりすぎるのを防ぎつつ、適切に変化 する。

max()は、何ができる?

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

また、フォントサイズの調整にも役立ちます。たとえば、max(1rem, 2vw) を指定すると、フォントサイズは 1rem 以上を確保しつつ、画面幅に応じて大きくなるように設定 できます。

/*最小幅を確保しつつ、可変サイズに対応*/
.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-widthmax(200px, 25%) に設定。
  • 要素が小さくなりすぎるのを防ぎつつ、余白をうまく調整 できる。
  • これにより、グリッドレイアウトが整った見た目 になる。

var()は、何ができる?

var()CSS変数(カスタムプロパティ) を定義し、管理を一元化できる関数です。通常、CSSでは色やフォントサイズ、余白などをスタイルごとに個別指定しますが、var() を使うことで、同じ値を複数箇所で使い回す ことが可能になります。

また、変数を :root に定義することで、サイト全体で統一されたスタイル管理ができる ため、大規模なプロジェクトでも保守性が向上します。さらに、var()カラーテーマの変更や、レスポンシブデザインでの柔軟なスタイル調整 にも役立ちます。

: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 を適用。
  • 一箇所の値を変更するだけで、サイト全体のカラーテーマを簡単に変えられる
:root {
  --font-size: 1.2rem;
  --spacing: 16px;
}

.text {
  font-size: var(--font-size);
  margin-bottom: var(--spacing);
}

  • --font-size1.2rem に設定し、すべてのテキスト要素で統一
  • --spacing16px に設定し、余白(margin-bottom)を一括管理
  • 変更が必要になったときも、変数の値を更新するだけでサイト全体に適用 される。
/*ダークモードに対応するカラーテーマ*/
:root {
  --background-color: #ffffff;
  --text-color: #333;
}

[data-theme="dark"] {
  --background-color: #222;
  --text-color: #fff;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}


  • :root にデフォルトの --background-color--text-color を設定(ライトモード用)。[data-theme="dark"] を適用すると、ダークモード用の色に変更。
  • bodyvar(--background-color)var(--text-color) を使うので、data-theme を変更するだけでテーマを切り替えられる
  • JavaScript で document.body.setAttribute("data-theme", "dark") を実行すると、ダークモードが即時適用 される。

linear-gradient()は、何ができる?

linear-gradient() は、CSSで 直線的なグラデーションを作成できる関数 です。単色の背景よりもデザインに奥行きを加えたり、視覚的に魅力的なボタンやセクションを作成するのに役立ちます。
また、角度や複数の色を組み合わせることで、より洗練されたデザインを実現できます。

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

グラデーションを作成できるCSSジェネレーターサイト

より詳細なグラデーションデザインを試したい場合は、以下のジェネレーターサイトを活用すると便利です!

filter()は、何ができる?

filter() は、画像や要素にフィルター効果を適用できる 関数です。これを使用すると、ぼかし、明るさ調整、コントラスト変更、グレースケール変換 などの視覚効果を簡単に追加できます。画像編集ソフトを使わずに、CSSだけでビジュアルを調整できるため、デザインの柔軟性が高まります。

画像をぼかす(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% なら半分だけグレースケールになり、レトロなデザインやニュース記事風の効果を演出 できる。
  • ホバー時にカラー画像に戻すエフェクト と組み合わせると、動きのあるデザインに。

filter() の主なプロパティ一覧

  • ぼかし
    blur(◯px) → 画像や要素をぼかす(例: blur(10px)
  • 明るさ
    brightness(◯) → 明るさを調整(例: brightness(1.5) → 明るく、brightness(0.5) → 暗く)
  • コントラスト
    contrast(◯%) → コントラストを変更(例: contrast(150%) → コントラストを強調)
  • グレースケール
    grayscale(◯%) → 白黒に変換(例: grayscale(100%) → 完全なモノクロ)
  • セピア調
    sepia(◯%) → 画像をセピア色(茶色がかった色合い)に(例: sepia(80%)
  • 彩度(サチュレーション)
    saturate(◯%) → 色の鮮やかさを調整(例: saturate(200%) → 色を2倍に強調)
  • 色相回転
    hue-rotate(◯deg) → 色の相を回転(例: hue-rotate(180deg) → 色を反転)
  • 影を付ける
    drop-shadow(◯px ◯px ◯px ◯色) → 画像に影を付ける(例: drop-shadow(4px 4px 10px rgba(0,0,0,0.5))
  • 反転
    invert(◯%) → 色を反転(例: invert(100%) → ネガポジ反転)
/*filter() は、複数の効果を組み合わせることも可能 です!*/
.image {
  filter: brightness(1.2) contrast(120%) saturate(150%);
}

translate()は、何ができる?

translate() は、要素を X軸(左右)・Y軸(上下)方向に移動させる 関数です。transform プロパティと組み合わせて使用し、要素の位置を変更 することができます。通常の marginposition プロパティと異なり、translate()レイアウトの流れを変えずに 要素を移動できるため、アニメーションの演出やホバーエフェクト に最適です

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

/*マウスオーバー時に要素を移動*/
.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 に変化させることで、ふわっと現れる効果 も追加。
  • ページロード時のエフェクトスクロール時のアニメーション に活用できる。

repeat()は、何ができる?

repeat() は、CSS Grid レイアウトで列(columns)や行(rows)を自動的に繰り返し生成する 関数です。
通常、grid-template-columnsgrid-template-rows で複数の値を個別に指定する必要がありますが、repeat() を使うと シンプルな記述で均等なレイアウトを作成 できます。

例えば、repeat(3, 1fr) を指定すると、3等分のカラム(列)を自動生成 できます。

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つ作成
  • 固定サイズのグリッドレイアウトを構築するときに便利

attr()は、何ができる?

attr() は、HTML要素の属性値を取得し、CSSで動的に表示できる関数 です。通常、CSSは静的なスタイルを適用するために使われますが、attr() を使うと HTML内の属性値を直接CSSで利用できる ため、動的なコンテンツを作成するのに役立ちます。特に、ツールチップの実装フォーム要素の補足説明の表示 などに活用できます。

ツールチップを表示

.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 属性の値を取得し、要素の後ろに表示backgroundborder-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="ここに入力してください">

ダウンロードボタンのファイル名を表示

.download::after {
  content: "ファイル名: " attr(download);
  font-size: 12px;
  color: #666;
}


  • attr(download) を使って、リンクの download 属性に指定されたファイル名を表示 する。

HTML側の記述は、

<a href="document.pdf" class="download" download="マニュアル.pdf">ダウンロード</a>

ユーザーにダウンロードするファイル名を事前に知らせる ことができる。

attr()content プロパティ内でのみ使用可能 であり、widthbackground-color などのプロパティには適用できません。動的なデータ取得が必要な場合は、CSSではなく JavaScript を併用します。

counter()は、何ができる?

counter() は、CSSで連番を自動生成できる関数 です。通常、リストや見出しに番号を付けるには HTMLの <ol>(番号付きリスト) を使用しますが、counter() を使うと CSSだけでリストの番号やステップ表示をカスタマイズ できます。これにより、ナンバリングのデザインを柔軟に変更 したり、見出しやリストを自動で番号付け できるようになります。

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

/* リストの自動ナンバリング*/
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

steps()は、何ができる?

steps() は、アニメーションを滑らかにせず、指定したステップ数で段階的に動かす 関数です。
通常、easelinear などの animation-timing-function を使うと、アニメーションがスムーズに進行しますが、steps() を使うと 途中で止まるようなカクカクした動き を実現できます。例えば、スプライトアニメーション(コマ送りアニメ)や、テキストのタイピングエフェクトを作る際に役立ちます。

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

.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%;
  }
}
  • .typingwidth0 から 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と組み合わせると、より柔軟なカウントアップアニメーションを作成可能

conic-gradient()は、何ができる?

conic-gradient() は、円形グラデーションを作成できる関数 です。
通常の linear-gradient()(直線的なグラデーション)や radial-gradient()(放射状のグラデーション)とは異なり、conic-gradient()中心から扇状に広がる色の変化 を作ることができます。特に 円グラフ、ドーナツグラフ、カラーホイール などをCSSだけで作成するのに便利です。

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

.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だけでシンプルな円グラフを作成できる

rotate()は、何ができる?

rotate() は、要素を回転させる 関数です。
transform プロパティと組み合わせることで、2Dや3Dの回転アニメーションを作成 できます。回転の単位は deg(度数)を使い、時計回り(正の値)や反時計回り(負の値)の回転 を指定できます。
ホバーエフェクトやアニメーションに活用することで、動きのあるデザイン を実現できます。

ホバー時に回転

.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 を指定することで、スピナーのように無限に回転 させることができる。
  • ローディングアニメーションに最適

perspective()は、何ができる?

perspective() は、要素に3Dの奥行きを設定する 関数です。通常、CSSの transformrotateX()rotateY() を使って回転させると、2Dのまま回転するため、リアルな立体感が出ません
perspective() を適用すると、要素に遠近感を与え、3Dのような効果 を表現できます。

perspective() の値(px 単位)は 視点からの距離 を示し、値が小さいほど奥行きが強調され、大きいほど遠くから見ているような効果になります。

要素を3D回転させる

.scene {
  perspective: 500px;
}

.card {
  transform: rotateY(30deg);
}

  • .sceneperspective: 500px; を設定し、要素に奥行きを与える
  • .cardrotateY(30deg) を適用し、Y軸方向に30度回転 させる。
  • 3Dカードのようなデザインを実現 できる。

ホバー時に3D反転

.scene {
  perspective: 800px;
}

.card {
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.card:hover {
  transform: rotateY(180deg);
}

  • perspective(800px)奥行きを確保
  • transform-style: preserve-3d; を追加すると、要素の子要素も3D変換の影響を受ける
  • ホバー時に rotateY(180deg)裏面が見えるように反転
  • カードフリップアニメーションなどに使える
よかったらシェアしてね!
  • URLをコピーしました!
目次