みつきの備忘録

CSSのtransform: translate()の違いを理解しよう – 50%移動の使い分け

執筆者:

みつき

カテゴリ:

Web開発において、要素の位置調整は頻繁に行う作業の一つです。特に中央寄せは多くの場面で必要となりますが、transform: translate()の使い方によって結果が大きく変わります。

今回は、transform: translate(-50%, -50%);、transform: translate(-50%);、そしてtransform: translateX(-50%);の違いについて詳しく解説します。

基本的な違い

transform: translate(-50%, -50%);

  • X軸（水平方向）：-50%移動
  • Y軸（垂直方向）：-50%移動
  • 効果：要素を左に50%、上に50%移動

transform: translate(-50%);

  • X軸（水平方向）：-50%移動
  • Y軸（垂直方向）：移動なし（0%）
  • 効果：要素を左に50%のみ移動

transform: translateX(-50%);

  • X軸（水平方向）：-50%移動
  • Y軸（垂直方向）：移動なし
  • 効果：要素を左に50%のみ移動

translate(-50%)とtranslateX(-50%)の関係

実は、translate(-50%)とtranslateX(-50%)は全く同じ結果になります。

/* これらは同じ効果 */
.method1 { transform: translate(-50%); }
.method2 { transform: translateX(-50%); }

違いは記述の意図の明確性にあります：

  • translate(-50%)：汎用的な書き方
  • translateX(-50%)：X軸のみの移動であることを明示

実際の使用例

完全な中央寄せ

.center-both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

この方法は、要素を画面の完全な中央に配置したい場合に使用します。モーダルウィンドウやローディング画面などでよく見られるパターンです。

水平方向のみの中央寄せ（2つの書き方）

/* 方法1: translate()を使用 */
.center-horizontal-1 {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

/* 方法2: translateX()を使用 */
.center-horizontal-2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

どちらも同じ効果ですが、translateX()を使うことで「X軸のみの移動」という意図が明確になります。

どちらを使うべき？

translate(-50%)を選ぶ場合

  • 汎用性重視：後でY軸の移動も追加する可能性がある
  • シンプルさ重視：短く書きたい
  • 既存コードとの統一：プロジェクト内で統一されている

translateX(-50%)を選ぶ場合

  • 明確性重視：X軸のみの移動であることを明示したい
  • 保守性重視：他の開発者が見たときに意図が分かりやすい
  • 複数軸の操作：X、Y軸を個別に制御したい場合
/* 個別制御の例 */
.element {
  transform: translateX(-50%) translateY(20px) rotate(45deg);
}

まとめ

効果の違い：

  • translate(-50%, -50%)：完全な中央寄せが必要な場合
  • translate(-50%)：水平方向のみの中央寄せが必要な場合
  • translateX(-50%)：水平方向のみの中央寄せ（意図が明確）

translate(-50%)とtranslateX(-50%)の使い分け：

  • 機能的には同じだが、コードの意図を明確にするならtranslateX()
  • プロジェクトの統一性やチームの方針に合わせて選択

適切な使い分けにより、より柔軟で効率的なレイアウトを実現できます。特にレスポンシブデザインにおいて、この技術は非常に有用です。

投稿をさらに読み込む