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

CSSには、デザインやレイアウトを柔軟に調整できる 「関数」 が数多く用意されています。calc()
を使えば 異なる単位を組み合わせた計算 が可能になり、clamp()
を使えば フォントサイズをレスポンシブに調整 できます。
また、conic-gradient()
で 円グラデーション を作成したり、rotate()
で 要素を回転 させるなど、アニメーションやビジュアル効果にも大きく活用できます。ここでは、CSSの代表的な関数15種類を詳しく解説!それぞれの 使い方・サンプルコード・活用例 を紹介しています。よければご参照ください!
calc()は、何ができる?
calc()
は、CSS内で四則演算(+
, -
, *
, /
)を利用し、異なる単位(px
、%
、rem
、vw
など)を組み合わせた計算ができる関数です。通常、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行のコード で「最小値以上・最大値以下で、適切なサイズを維持する」デザインが可能になります。また、フォントサイズ以外にも、ボックスの幅・高さ・余白(margin
、padding
) など、要素のサイズを動的に制御する場面でも活用できます。
.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-width
をmax(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-size
を1.2rem
に設定し、すべてのテキスト要素で統一。--spacing
を16px
に設定し、余白(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"]
を適用すると、ダークモード用の色に変更。body
はvar(--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
プロパティと組み合わせて使用し、要素の位置を変更 することができます。通常の margin
や position
プロパティと異なり、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-columns
や grid-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
属性の値を取得し、要素の後ろに表示。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="ここに入力してください">
ダウンロードボタンのファイル名を表示
.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
プロパティ内でのみ使用可能 であり、width
や background-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()
は、アニメーションを滑らかにせず、指定したステップ数で段階的に動かす 関数です。
通常、ease
や linear
などの 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%; } }
.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と組み合わせると、より柔軟なカウントアップアニメーションを作成可能。
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の transform
で rotateX()
や rotateY()
を使って回転させると、2Dのまま回転するため、リアルな立体感が出ません。perspective()
を適用すると、要素に遠近感を与え、3Dのような効果 を表現できます。
perspective()
の値(px
単位)は 視点からの距離 を示し、値が小さいほど奥行きが強調され、大きいほど遠くから見ているような効果になります。
要素を3D回転させる
.scene { perspective: 500px; } .card { transform: rotateY(30deg); }
.scene
にperspective: 500px;
を設定し、要素に奥行きを与える。.card
にrotateY(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)
で裏面が見えるように反転。 - カードフリップアニメーションなどに使える。