【CSS Modules】translateX()関数の使い方
translateX()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
translateX()関数は、CSSにおいて要素を水平方向（X軸方向）に移動させる（平行移動させる）関数です。
この関数は、Webページ上の要素の視覚的な位置を、元の場所から左右にずらすために使用されます。translateX()関数は、CSSのtransformプロパティの値として設定され、要素に2次元の変形を適用する役割を担います。
引数として、移動させたい距離を示す値を一つ指定します。この値には、ピクセル（px）、em、remといった長さの単位、または要素自身の幅に対するパーセンテージ（%）を使用することができます。例えば、transform: translateX(100px);と記述すると、対象の要素は現在の位置から右へ100ピクセル移動します。また、transform: translateX(-50%);と記述した場合は、要素自身の幅の50%分だけ左へ移動します。正の値を指定すると要素は右方向に、負の値を指定すると左方向に移動します。
translateX()関数は、特にアニメーションやインタラクティブなUIコンポーネントの作成において、要素の位置を効率的に制御するために頻繁に用いられます。要素の垂直方向（Y軸方向）の移動にはtranslateX()と対になるtranslateY()関数が、X軸とY軸の両方向への移動にはtranslate()関数が存在します。これらの関数を組み合わせることで、Webページのレイアウトやユーザー体験を向上させる多様な視覚効果を実現することが可能です。
公式リファレンス: translateX()
構文(syntax)
1transform: translateX(value);
引数(parameters)
<length-percentage>
- <length-percentage>: 要素を水平方向に移動させる距離を指定します。ピクセル値（例:
10px）または親要素に対するパーセンテージ（例:50%）で指定できます。
戻り値(return)
戻り値なし
戻り値はありません