拡大表示 デザイン見本
CSSの transform: scale() を使い、要素をホバーやクリックで拡大表示する実装デモです。ホバーで拡大（CSS のみ）・クリックで即座に拡大・クリックでフワッと拡大（transition） の3パターンを収録。コピーしてすぐに使えるHTML・CSS・JSのコードを掲載しています。
① ホバーで拡大 — :hover と transform: scale を組み合わせるだけで JavaScript は不要
transform-origin: top left scale: 2
<div class="zoom-box">Hover me</div>.zoom-box {
width: 100px;
height: 100px;
background-color: #3b82f6;
transform-origin: top left;
cursor: zoom-in;
}
.zoom-box:hover {
transform: scale(2);
}transform: scale(x, y) は要素を指定した倍率に拡大・縮小します。縦横等倍で拡大するなら scale(2) のように値を1つだけ指定できます。transform-origin は変形の起点を指定するプロパティで、デフォルトは center（要素の中心）です。top left（左上）を指定すると左上を固定したまま右と下方向へ広がり、center では要素の中心から四方へ広がります。ホバーでの拡大は :hover 疑似クラスに transform を指定するだけで実現でき、JavaScriptは不要です。
② クリックで即座に拡大 — クリックで .scale クラスを着脱してトグル
クリック（タップ）するとトグルします
<div class="zoom-box">Click me</div>.zoom-box {
width: 100px;
height: 100px;
background-color: #22c55e;
transform-origin: top left;
cursor: zoom-in;
}
.zoom-box.scale {
transform: scale(2, 2);
cursor: zoom-out;
}var box = document.querySelector('.zoom-box');
box.addEventListener('click', function() {
if (box.className.indexOf('scale') !== -1) {
box.className = 'zoom-box';
} else {
box.className = 'zoom-box scale';
}
});JavaScript でクリックイベントを検知し、.scale クラスの有無をチェックして付け外しします。CSS で .zoom-box.scale に transform: scale() を定義しておくことで、クラスの着脱だけで拡大・縮小が切り替わります。cursor: zoom-in と cursor: zoom-out を状態に応じて切り替えると、クリック前後でカーソルの形（虫眼鏡）が変わるため、ユーザーに操作のヒントを与えられます。
③ クリックでフワッと拡大 — transition: transform を追記してアニメーション化
transition: 0.3s
<div class="zoom-box">Click me</div>.zoom-box {
width: 100px;
height: 100px;
background-color: #f59e0b;
transform-origin: top left;
transition: transform 0.3s;
cursor: zoom-in;
}
.zoom-box.scale {
transform: scale(2, 2);
cursor: zoom-out;
}var box = document.querySelector('.zoom-box');
box.addEventListener('click', function() {
if (box.className.indexOf('scale') !== -1) {
box.className = 'zoom-box';
} else {
box.className = 'zoom-box scale';
}
});transition: transform 0.3s を追記するだけで、transform プロパティが変化するとき指定した時間をかけてアニメーションします。値が小さいほどキビキビとした動きに、大きいほどゆっくりとした動きになります。記述する場所は変形前の元の要素（.zoom-box）で、変形後（.zoom-box.scale）に記述してしまうと、拡大時はアニメーションされますが縮小時は即座に戻ってしまいます。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
