【CSS】scaleとは？transformとの違いやhoverで効かない原因

CSSのscaleは、要素の見た目を拡大・縮小するための指定です。多くの場合、transform: scale()として使います。しかし、scale(1.1)を書いたのに周囲の要素が動かない、画像がはみ出る、拡大の基準位置が思った場所と違うなど、悩むことはありませんか？

この記事では、scaleの基本、画像hoverの実装例、scaleX・scaleYの違い、効かない原因、実務での注意点まで解説します。

CSSのscaleとは？

scaleとは、要素を拡大・縮小するためのCSSです。

.box {
  transform: scale(1.2);
}

この例では、要素が1.2倍に拡大されます。

1より大きいと拡大、1より小さいと縮小

scale()の値は、倍率として考えるとわかりやすいです。

指定	見た目	意味
scale(1)	等倍	変化なし
scale(1.1)	少し拡大	110%
scale(0.8)	縮小	80%

scaleは「倍率」で指定します。scale(1.1)なら110%、scale(0.8)なら80%の大きさです。

scaleは見た目を拡大・縮小するだけで、通常のレイアウト上のサイズは変わりません。

scale()・scaleX()・scaleY()の違い

scaleには、全体を拡大する書き方と、横方向・縦方向だけを変える書き方があります。

書き方	意味	例
scale()	縦横をまとめて拡大・縮小	scale(1.1)
scaleX()	横方向だけ拡大・縮小	scaleX(1.2)
scaleY()	縦方向だけ拡大・縮小	scaleY(0.8)

縦横を同時に指定する

scale()は、値を2つ書くこともできます。

.box {
  transform: scale(1.2, 0.8);
}

この場合、横方向は1.2倍、縦方向は0.8倍になります。

縦横の比率を変えると画像や文字が不自然に伸びて見えることがあります。画像の拡大では基本的にscale(1.1)のように縦横同じ倍率を使いましょう。

補足：現在はtransformなしでもscaleプロパティが使える

以前は、要素を拡大・縮小する場合、transform: scale()と書くのが一般的でした。

現在は、CSS Transforms Level 2の個別変形プロパティとして、scaleプロパティも使えます。

.card:hover {
  transform: scale(1.08);
}

.card:hover {
  scale: 1.08;
}

新しいscaleプロパティは、拡大縮小だけを個別に指定できるため、translateやrotateと分けて管理しやすいのがメリットです。

transform: scale()とscaleプロパティの違い

書き方	特徴	向いている場面
transform: scale()	移動・回転・拡大などを1つのtransformにまとめる	古いコードとの互換性を重視する場合
scale	拡大縮小だけを個別に指定できる	translateやrotateと分けて管理したい場合

たとえば、移動と拡大を別々に管理したい場合は、次のように書けます。

.card {
  transition: translate 0.3s ease, scale 0.3s ease;
}

.card:hover {
  translate: 0 -6px;
  scale: 1.05;
}

従来のtransformでは、複数の変形を1行にまとめる必要がありました。

.card:hover {
  transform: translateY(-6px) scale(1.05);
}

既存サイトや古いブラウザ対応を重視する場合は、まだtransform: scale()で書かれているコードも多いです。新規実装では対応環境を確認しながらscaleプロパティも選択肢に入れましょう。

hoverで画像を拡大する実装例

scaleは、画像hoverの演出でよく使われます。

<a class="image-card" href="#">
  <img src="sample.jpg" alt="講座のサムネイル">
</a>

.image-card {
  display: block;
  overflow: hidden;
}

.image-card img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}

.image-card:hover img {
  transform: scale(1.08);
}

このコードでは、画像にマウスを乗せると、画像だけが少し拡大します。

画像をhoverで拡大するときは、親要素にoverflow: hidden;を指定して、はみ出しを隠すのが実務の定番です。

transform-originで拡大の基準位置を変える

scaleは、初期状態では要素の中心を基準に拡大・縮小されます。

基準位置を変えたい場合は、transform-originを使います。

.box {
  transform-origin: left top;
  transform: scale(1.2);
}

この例では、左上を基準に拡大されます。

指定	基準位置	使う場面
center	中央	カードや画像の拡大
left top	左上	メニューの展開、起点を固定した演出
right center	右中央	右側を軸にしたUI

scaleが効かない・おかしく見える原因

scaleが効かない、または意図しない見え方になる場合は、次のポイントを確認しましょう。

原因1：transformが別の指定で上書きされている

transformは1つのプロパティです。複数回書くと、後ろの指定で上書きされます。

.box {
  transform: scale(1.1);
  transform: translateY(-8px);
}

この場合、scale(1.1)は消えて、translateY(-8px)だけが効きます。

.box {
  transform: translateY(-8px) scale(1.1);
}

原因2：拡大した要素がはみ出している

scaleは見た目だけを拡大するため、親要素からはみ出ることがあります。

画像hoverのように枠内で拡大したい場合は、親にoverflow: hidden;を指定します。

.thumb {
  overflow: hidden;
}

.thumb img {
  transition: transform 0.3s ease;
}

.thumb:hover img {
  transform: scale(1.08);
}

原因3：文字をscaleで小さくしすぎている

文字をscale(0.8)などで縮小すると、環境によってぼやけて見えることがあります。文字サイズを調整したい場合は、基本的にはfont-sizeを使う方が自然です。

文字サイズ調整の代わりにscaleを多用すると、読みづらさやレイアウトのズレにつながります。

原因4：インライン要素に指定している（display: block; がない）

hoverでscaleが効かないときに多いのが、aタグやspanタグなどのインライン要素へ直接指定しているケースです。

transformは、すべての要素に同じように効くわけではありません。通常のインライン要素は変形の対象になりにくいため、拡大したい場合はdisplay: inline-block;やdisplay: block;を指定して、箱として扱う必要があります。

<span class="label">NEW</span>

.label:hover {
  transform: scale(1.2);
}

.label {
  display: inline-block;
  transition: transform 0.2s ease;
}

.label:hover {
  transform: scale(1.2);
}

リンク全体をカードのように拡大したい場合は、aタグをdisplay: block;にしておくと扱いやすくなります。

.card-link {
  display: block;
  transition: transform 0.2s ease;
}

.card-link:hover {
  transform: scale(1.03);
}

hoverでscaleが効かない場合は、対象がインライン要素のままになっていないか確認しましょう。display: inline-block;またはdisplay: block;が解決策になります。

aタグやspanタグにscaleを指定するときは、先にdisplayを確認しましょう。見た目の拡大だけでなく、クリック範囲や周囲の余白もあわせて確認すると安全です。

scaleを使うときの実務チェックリスト

確認項目	見るポイント	対策
倍率	大きすぎないか	hover演出は1.03〜1.1程度に抑える
はみ出し	親要素から出ていないか	overflow: hidden;を使う
上書き	transformを複数行で書いていないか	1つのtransformにまとめる
新しい書き方	scaleプロパティを使える環境か	対応環境を見てscale: 1.05;も検討する
表示形式	aタグやspanがinlineのままではないか	display: inline-block;またはblockにする
基準点	どこを基準に拡大したいか	transform-originを指定する
動き	急に変化していないか	transitionを指定する

公式ドキュメントも確認する

scaleやtransformの仕様を正確に確認したい場合は、公式情報も参考になります。

• MDN Web Docs scaleプロパティ
• MDN Web Docs scale()
• MDN Web Docs transform
• MDN Web Docs transform-origin

まとめ：scaleは拡大縮小の見た目演出に使おう

この記事では、CSSのscaleについて解説しました。

scaleは、要素の見た目を拡大・縮小するための指定です。レイアウト上の本来のサイズは変わらない点に注意しましょう。画像hoverやカードの演出では、transitionと組み合わせてtransform: scale(1.05);のように使うと自然です。現在は個別のscaleプロパティも使えるため、translateやrotateと分けて管理したい場合はscale: 1.05;も選択肢になります。

一方で、文字サイズの調整や大きなレイアウト変更には向いていません。また、aタグやspanタグにhoverでscaleを使う場合は、display: inline-block;やdisplay: block;を指定して、変形できる箱として扱いましょう。