Title

translateとは

translate とは次の語句からなるCSSの関数です。

translate ※1

読み: トランスレイト
意味: 移動する、移す

translate ※2

読み: トランスレイト
意味: 翻訳、通訳

目次に戻る

translate関数の概要

この関数を使うと、要素の表示されている位置を再配置することができます。

translate関数はCSSのtransformプロパティに属する関数です。 指定したブロックレベル要素の表示位置を水平方向や垂直方向で再配置することができます。

この関数の個別関数として水平軸の再配置を行うためのtranslateX関数と垂直軸の再配置を行うためのtranslateY関数があります。

• translateX(任意の値); 水平方向の再配置を行う
• translateY(任意の値); 垂直方向の再配置を行う

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。 2つの記述例を掲載していますが、2行目は水平方向の指定のみをする場合の書き方となります。 水平方向と垂直方向を同時に指定する場合は、6行目の記述例を参考にしてください。

セレクター{
	transform: translate(tx);
}

セレクター{
	transform: translate(tx,ty);
}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

この関数はブロックレベル要素の表示位置の再配置を行います。 サンプルは親要素のdiv要素に子要素としてp要素を内包しています。この内包されたp要素に関数を適用していきます。

初期値: 0

ここでは初期値と書きますが、再配置しない状態のことであり、つまり要素の表示原点になるものです。 原点とは、要素のボーダーエッジの左上の角の部分になります。

サンプルでは、 div要素の paddingと p要素の margin は、共に「0」になっていますので、div要素のコンテンツボックスの左上にp要素が配置されています。 ここがp要素の表示原点になるということです。

サンプルでは2つのコードが記述してありますが、2行目は引数が1つしか指定してありません。 これは水平方向の再配置のみを指定した形であり、垂直方向も指定する場合には3行目の書き方となります。

p{
	transform: translate(0);
	transform: translate(0,0);
}

目次に戻る

数値: 単位付きの数値で表示の再配置を行う

設定に使用する数値は、絶対値と相対値を使うことができます。 このサンプルでは、水平方向を絶対値で指定し、垂直方向を相対値で指定してみました。

また、ここでは再現していませんが、負の数値を指定することで表示原点よりマイナス方向への再配置も可能です。

p{
	transform: translate(1cm,10px);
}

目次に戻る

補足説明

• ブロックレベル要素に適用可能

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

transform: translate(0,0);

transform: translate(10px,0);

transform: translate(0,10px);

transform: translate(1cm,10px);

transform: translate(-1cm,-10px);

目次に戻る