CSSのtranslate()メソッドでX軸・Y軸方向に要素を移動する方法

CSSで要素をX軸（横方向）とY軸（縦方向）に沿って移動させたい場合は、transformプロパティとtranslate(x, y)メソッドを組み合わせて使用します。この記事では、translate()メソッドの基本的な構文と具体的な使い方を解説します。

translate()メソッドの基本構文

translate()メソッドは以下のように記述します。

translate(x, y)

それぞれの引数の意味は次のとおりです。

• x：移動ベクトルのX座標を表す長さの値。正の値で右方向、負の値で左方向に移動します。
• y：移動ベクトルのY座標（縦方向）を表す長さの値。正の値で下方向、負の値で上方向に移動します。

なお、yの値を省略した場合は0として扱われ、X軸方向のみの移動となります。単位にはpxや%などが利用できます。

translate()メソッドの使用例

次の例では、オレンジ色の正方形の要素に対して、.transクラスを適用すると黒色に変わり、X軸方向に20px移動します。

div {
    width: 50px;
    height: 50px;
    background-color: orange;
}
.trans {
    transform: translate(20px);
    background-color: black;
}

X軸とY軸の両方に同時に移動させたい場合は、2つの引数を指定します。例えば、右に20px・下に30px移動するには次のように書きます。

.trans {
    transform: translate(20px, 30px);
}

まとめ

translate(x, y)を使えば、レイアウトに影響を与えることなく要素を自由に移動できます。ホバー時のアニメーションやモーダル表示など、さまざまな場面で活用できる便利なメソッドなので、ぜひ覚えておきましょう。