【CSS】transform: translateの使い方！中央寄せの仕組み

CSSで要素を少し動かしたり、画面中央に配置したりするときによく使うのがtransform: translate()です。ただ、初めて見ると「marginで動かすのと何が違うの？」「translate(-50%, -50%)はなぜ中央寄せになるの？」「positionと一緒に使う理由は？」と疑問が出やすい指定でもあります。transform: translateは、要素の見た目の位置をX方向・Y方向に移動させるCSSです。レイアウト上の元のスペースは残したまま、表示位置だけをずらせます。

この記事では、translateの基本、translateX・translateYの使い方、中央寄せの定番コード、効かない原因、実務での注意点まで解説します。

CSSのtransform: translateとは？

transform: translate()とは、要素を現在の位置から横方向・縦方向に移動させるCSSです。

.box {
  transform: translate(20px, 10px);
}

この例では、要素が右へ20px、下へ10px移動します。

translateは見た目だけを移動する

translateの大きな特徴は、通常のレイアウトの流れを変えずに、見た目の位置だけを動かすことです。

たとえば、translateで要素を右に動かしても、その要素が元々あった場所のスペースは残ります。次の要素が詰めて上がるわけではありません。

translateは「配置そのものを作り直す指定」ではなく、「表示位置を後からずらす指定」と考えると理解しやすいです。

translateの基本構文

translateには、次のような書き方があります。

書き方	意味	例
translateX()	横方向だけ移動	translateX(20px)
translateY()	縦方向だけ移動	translateY(-10px)
translate(x, y)	横・縦をまとめて移動	translate(20px, 10px)

translateの1つ目の値は横方向、2つ目の値は縦方向です。順番を逆に覚えると意図しない方向へ動きます。

translateX・translateY・translateの使い方

ここでは、よく使う3つの書き方をコードで見ていきましょう。

横方向に動かす：translateX()

translateX()は、要素を横方向に動かします。

.button:hover {
  transform: translateX(8px);
}

正の値なら右へ、負の値なら左へ移動します。

.prev {
  transform: translateX(-8px);
}

縦方向に動かす：translateY()

translateY()は、要素を縦方向に動かします。

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

この例では、カードにマウスを乗せたときに少し上へ浮いたように見えます。

hover時にtranslateY(-数px)を使うと、カードやボタンがふわっと浮くUIを作れます。

横と縦をまとめて動かす：translate(x, y)

横と縦を同時に指定したい場合は、translate(x, y)を使います。

.badge {
  transform: translate(10px, -10px);
}

この例では、右へ10px、上へ10px移動します。

中央寄せでtranslate(-50%, -50%)を使う理由

transform: translate(-50%, -50%);は、中央配置でよく使われる定番コードです。

<div class="modal">
  <p>画面中央のモーダルです</p>
</div>

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top: 50%; left: 50%;だけでは中央にならない

top: 50%;とleft: 50%;を指定すると、要素の左上の角が画面中央に来ます。

しかし、中央に置きたいのは左上の角ではなく、要素そのものの中心です。そこで、translate(-50%, -50%)を使って、要素自身の幅と高さの半分だけ左上へ戻します。

translate(-50%, -50%)の50%は、親ではなく要素自身のサイズを基準にします。

中央寄せのtranslateは、positionのtop・leftとセットで使われることが多いです。transformだけを書いても、画面中央に配置されるわけではありません。

実務で使える！translateの逆引きコード例

通常のレイアウト調整だけでなく、実務のWeb制作で非常によく使う「translateを使った定番パターン」を2つ紹介します。コピペしてパーツの参考にしてください。

パターン1：画面の真ん中に浮かび上がる「モーダルウィンドウ」

ボタンをクリックしたときなどに、画面の最前面＆中央に表示させるモーダルの実装です。position: fixed; と組み合わせることで、スクロールしても常に画面の中央をキープします。

HTML

<div class="modal-overlay">
  <div class="modal-content">
    <h3>お知らせ</h3>
    <p>ここにモーダルのコンテンツが入ります。要素のサイズが変わっても自動で常に画面の真ん中に配置されます。</p>
    <button class="modal-close">閉じる</button>
  </div>
</div>

CSS

/* 背景の黒いマスク */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
}

/* モーダル本体（ここ中央寄せ） */
.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自身のサイズを元にジャスト中央へ */
  
  width: 90%;
  max-width: 500px;
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

---

パターン2：ハンバーガーメニューの「三本線 ⇄ ✕印」アニメーション

スマホ用のナビゲーションで定番の動きです。3本線のうち、上下の線を translate で中央に移動させてから rotate で回転させることで、綺麗な「✕印」を作ることができます。

HTML

<button class="menu-trigger">
  <span></span>
  <span></span>
  <span></span>
</button>

CSS

/* ボタン全体の枠 */
.menu-trigger {
  position: relative;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}

/* 3本線の共通スタイル */
.menu-trigger span {
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background-color: #333;
  transition: transform 0.3s ease; /* アニメーションを滑らかに */
}

/* 1本目・2本目・3本目の初期位置 */
.menu-trigger span:nth-child(1) { top: 14px; }
.menu-trigger span:nth-child(2) { top: 21px; }
.menu-trigger span:nth-child(3) { top: 28px; }

/* ✕印に変化したときの状態（WordPressのJSなどでクラスを付与する想定） */
.menu-trigger.is-active span:nth-child(1) {
  /* 下に7px移動させてから45度回転 */
  transform: translateY(7px) rotate(45deg);
}

.menu-trigger.is-active span:nth-child(2) {
  /* 真ん中の線は透明にして消す */
  opacity: 0;
}

.menu-trigger.is-active span:nth-child(3) {
  /* 上に7px移動させてからマイナス45度回転 */
  transform: translateY(-7px) rotate(-45deg);
}

marginやpositionとの違い

translateは要素を動かせるため、marginやpositionと混同されやすいです。

方法	特徴	向いている場面
margin	周囲の余白を変えて配置を調整する	通常のレイアウト調整
position	基準点から位置を決める	重ねるUI、固定配置
translate	見た目の位置だけを移動する	微調整、アニメーション、中央寄せ補正

通常の余白調整はmarginを使う

セクション同士の間隔や、カードの外側の余白を整える場合は、translateではなくmarginを使うのが自然です。

.section {
  margin-top: 48px;
}

アニメーションや微調整はtranslateが向いている

hoverで少し浮かせる、アイコンを少しずらす、中央配置の補正をするなど、見た目の移動にはtranslateが向いています。

.card {
  transition: transform 0.2s ease;
}

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

translateを大きなレイアウト調整に使いすぎると、見た目と本来の位置がズレて保守しにくくなります。

【補足】最新のCSSでは「transform」なしでも動く！

ここまで transform: translate() という書き方を解説してきましたが、実は近年のモダンブラウザでは、transformを書かずに translate 単体で指定できるプロパティが登場し、すでに実務でも広く使われています。

新しく追加された「translate」プロパティの書き方

/* 従来の書き方（transformプロパティの値として指定） */
.box {
  transform: translate(20px, 10px);
}

/* 現代の書き方（translateプロパティを直接指定） */
.box {
  translate: 20px 10px; /* カンマではなく「スペース」で区切る点に注意 */
}

単独プロパティ（新仕様）を使うメリット

一番のメリットは、「他の変形（回転や拡大縮小）とバッティングして上書きされる問題」を完全に防げる点です。

記事の後半でも解説しますが、従来の transform は1行にまとめて書かないと後から書いた指定に上書きされてしまう問題がありました。しかし、新しい仕様ではそれぞれが独立したプロパティになったため、以下のように別々に指定しても上書きされません。

/* 新しい仕様なら別々に書いてもバッティングしない！ */
.box {
  translate: 50px 10px;
  rotate: 45deg;        /* 回転も独立 */
  scale: 1.2;           /* 拡大も独立 */
}

現在、主要なブラウザ（Chrome, Safari, Edge, Firefoxなど）はすべてこの単独プロパティに対応しています。「とにかくシンプルに要素を動かしたい！」という場合は、この最新の書き方もぜひ取り入れてみてください。

transform: translateが効かない原因と対策

translateが効かないように見える場合は、次の原因を確認しましょう。

原因1：transformが上書きされている

transformは1つのプロパティに複数の変形をまとめて書きます。別の場所でtransformを書き直すと、前の指定は上書きされます。

.box {
  transform: translateX(20px);
  transform: rotate(5deg);
}

この場合、後ろのrotate(5deg)だけが有効になり、translateX(20px)は消えます。

.box {
  transform: translateX(20px) rotate(5deg);
}

原因2：inline要素で見た目の変化が分かりにくい

spanなどのinline要素にtransformを使うと、期待通りに見えない場合があります。動かしたい要素を箱として扱うなら、display: inline-block;を指定すると扱いやすくなります。

.text-icon {
  display: inline-block;
  transform: translateY(-2px);
}

原因3：transitionを書いていないため動きが一瞬

hover時にtranslateが効いているのに、動きが一瞬で分かりにくいことがあります。その場合は、通常時にtransitionを指定します。

.button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
}

hoverアニメーションでは、hover側ではなく通常時の要素にtransitionを書くのが基本です。

実務で使うtranslateのチェックリスト

確認項目	見るポイント	対策
移動方向	XとYの順番を間違えていないか	translate(x, y)で確認する
中央寄せ	top/leftとセットで使っているか	top: 50%; left: 50%;を指定する
上書き	別のtransformで消えていないか	複数の変形を1行にまとめる
inline要素	spanなどに指定していないか	display: inline-block;を検討する
アニメーション	transitionが通常時にあるか	transition: transform .2s;を指定する

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

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

• MDN Web Docs translate()
• MDN Web Docs transform
• MDN Web Docs transition

まとめ：translateは見た目の移動とアニメーションに使おう

この記事では、CSSのtransform: translate()について解説しました。

translateは、要素の元のスペースを残したまま、見た目の位置だけを移動させるCSSです。横方向だけならtranslateX()、縦方向だけならtranslateY()、両方向ならtranslate(x, y)を使います。中央寄せでは、top: 50%; left: 50%;で左上を中央に置き、translate(-50%, -50%)で要素自身の半分だけ戻します。

ただし、大きなレイアウト調整をtranslateだけで行うと、見た目と本来の位置がズレて管理しづらくなります。通常の余白はmargin、重ねる配置はposition、微調整やアニメーションはtranslateというように使い分けましょう。