CSS translateY()の基本と使い方、垂直移動をマスター
translateY() の基本構文と引数
translateY() は CSS の transform プロパティで使用する関数の一つだ。指定した値の分だけ要素を垂直方向に移動させる。正の値なら下へ、負の値なら上へ動く。
構文の基本
構文は極めてシンプルだ。
transform: translateY(値);値には長さ（px, em, rem など）またはパーセンテージを指定できる。パーセンテージは要素自身の高さを基準とする。例えば高さ 100px の要素に translateY(50%) を指定すると、50px 下に移動する。
なお、親要素の高さや余白には一切影響しない。あくまで視覚的な位置だけが変わる点が重要な特徴だ。
length と percentage の使い分け
length（px, rem など）は固定量の移動が必要な場合に使う。一方、percentage は要素のサイズに応じて相対的に位置を変えたいときに便利だ。たとえば、高さが可変するコンテナ内で要素を半分だけ上にずらすには translateY(-50%) と書く。この手法はモーダルやツールチップの中央揃えでもよく使われる。
アニメーションへの応用、カードのスライドイン
translateY() は CSS アニメーションやトランジションと組み合わせることで、自然な動きを生み出せる。特に「下からスライドイン」「フェードインしながら上昇」といった演出に適している。
カードの表示アニメーション
たとえば、ダッシュボードに統計カードを並べる場合を考えてみよう。初期状態では各カードを少し下にずらし、透明度を 0 にしておく。ページが読み込まれたタイミングやスクロールに合わせて translateY(0) かつ opacity: 1 へトランジションさせる。
.stat-card {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease-in, transform 0.8s ease-in;
}
.dashboard.active .stat-card {
opacity: 1;
transform: translateY(0);
}この変化が実際は 0.8 秒かけて連続的に行われる。ユーザーは要素が「下から浮き上がってくる」ように感じる。
ホバー時のマイクロインタラクション
表示されたカードにマウスを重ねたとき、ほんの少し上へ移動させる演出もよく使われる。translateY() に負の値を指定すれば良い。
.dashboard.active .stat-card:hover {
transform: translateY(-8px);
}このわずかな動きが、クリック可能な要素であることを直感的に伝える。影（box-shadow）の変化と組み合わせると、よりリッチな表現になる。
フォームラベルの移動アニメーション
translateY() は UI コンポーネントの動きを設計する上でも重宝する。代表例が、入力フィールドのラベルがフォーカス時に上へ移動する「フローティングラベル」パターンだ。
ラベルの初期配置
まず、label 要素を input フィールドの内側に絶対配置で重ねる。ポインターイベントを無効化しておけば、ラベルをクリックしても input にフォーカスが当たる。
label {
position: absolute;
left: 15px;
top: 15px;
pointer-events: none;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}フォーカス時の移動
input にフォーカスが当たったとき、もしくはプレースホルダーが表示されていない（入力済み）ときに、ラベルを translateY(-32px) で上へ移動させる。同時に少し縮小すると、より洗練された動きになる。
input:focus ~ label,
input:not(:placeholder-shown) ~ label {
transform: translateY(-32px) scale(0.8);
color: #6200ee;
font-weight: bold;
}このアニメーションは実際には約 0.25 秒でスムーズに行われる。ラベルが単に上に動くだけでなく、縮小と色の変化が加わることで、UI に統一感が生まれる。
translateY() の特性、他の要素に影響しない
transform 系の関数全般に言えることだが、translateY() はドキュメントフローを一切変更しない。つまり、要素を移動させても周囲の要素は元の位置を保ったままになる。
ドキュメントフローへの影響
例えば、3つのブロックが縦に並んでいるとする。中央のブロックに translateY(40px) を適用しても、上下のブロックはピクリとも動かない。あくまで中央のブロックの「描画位置」だけが変わる。
margin との違い
似たような位置調整として margin-top がある。しかし margin は要素自体の「占有領域」を変化させるため、後続の要素が押し出される。レイアウト全体に影響を与えたくない場合、translateY() のほうが安全だ。
/* 非推奨: レイアウトシフトを起こす */
.element {
margin-top: 30px;
}
/* 推奨: 描画位置だけを変える */
.element {
transform: translateY(30px);
}また、translateY() は GPU による合成処理が行われるため、アニメーションのパフォーマンス面でも優れる。リフローやリペイントが発生しないからだ。頻繁に動かす要素には積極的に使いたい。
ポインター擬似クラスでの問題と解決策
translateY() を :hover に直接指定すると、意図しないちらつきを起こすことがある。CSS-Tricks の記事でも指摘されている点だ。
ちらつきが起きる仕組み
ホバー時に要素を大きく移動させると、マウスカーソルが要素から外れてしまう。すると :hover 状態が解除されて要素が元の位置に戻り、再びカーソルが要素に重なってまた移動する……という無限ループが発生する。
親要素で包む解決策
最も簡単な対策は、移動させたい要素を親コンテナでラップし、:hover 擬似クラスを親に適用することだ。これでホバー領域が親のサイズで固定され、子要素がどこに移動してもカーソルが外れにくくなる。
.card-container:hover .card {
transform: translateY(-12px);
}この書き方は、ホバーでカードが浮き上がる演出など、あらゆる translateY() アニメーションに応用できる。親要素のサイズに余裕を持たせておけば、より大きな変位にも対応可能だ。
この記事のポイント
- translateY() は要素を垂直方向に移動させる。正の値で下、負の値で上。
- パーセンテージ指定は要素自身の高さが基準。中央配置などに便利。
- アニメーションでは opacity と組み合わせ、スライドインに使える。
- フォームラベルの浮上アニメーションは translateY(-32px) と scale(0.8) で実装。
- ドキュメントフローを壊さないため、margin よりパフォーマンスが良い。
- :hover のちらつきは親要素に擬似クラスを付ければ解消する。
・ 複数業界における17年間のデジタルビジネス開発経験
・ ウェブサイト開発のためのHTML、PHP、CSS、JavaScript等の実用的知識
・ 15ヶ国語対応の多言語SaaSの開発経験
・ 17年間にも及ぶ、Eコマース長期運営経験
・ 幅広い業界でのSEO最適化の豊富な経験