CSSのtranslate()関数とは？要素を移動させる方法を実例付きで解説

CSSのtranslate()関数は、要素を水平方向・垂直方向に移動（再配置）するために使用される変換関数です。transformプロパティと組み合わせて使うことで、HTML要素を元の位置から任意の距離だけずらして表示できます。

translate()関数の基本構文

transform: translate(x軸の移動量, y軸の移動量);

第1引数が水平方向（X軸）、第2引数が垂直方向（Y軸）の移動量を表します。値にはpxなどの絶対単位や、%（要素自身のサイズに対する割合）を指定できます。第2引数を省略した場合は、Y方向の移動量は0として扱われます。

サンプルコード1：画像を右に50px移動する

まずは基本的な例を見てみましょう。以下のコードでは、画像をX方向に50px移動させています。

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
.translate_img {
    transform: translate(50px, 0);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p id="demo1">Excel vlookup</p>
<p id="demo2">Excel filters</p>
<h4>Learn Excel</h4>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/42/images/course_42_image.png"
alt="MS Excel">
</body>
</html>

出力結果

このコードを実行すると、MS Excelのコース画像が通常の位置より50px右側に表示されます。translate(50px, 0)と指定しているため、垂直方向にはまったく移動しません。

サンプルコード2：パーセンテージで移動位置を指定する

次に、移動量にパーセンテージを使用した例を紹介します。

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
    transform: translate(100px, 50%);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>

出力結果

この例では、MongoDBのコース画像がX方向に100px、Y方向に「画像の高さの50%」分だけ下へ移動して表示されます。パーセンテージ指定は、親要素ではなくその要素自身の幅・高さを基準とする点に注意してください。

translate()関数のポイントまとめ

要素のレイアウトには影響を与えず、見た目上の位置だけが移動します（周囲の要素は動きません）。
負の値を指定すれば、左方向・上方向への移動も可能です。
単一軸のみ移動したい場合は、translateX()やtranslateY()を使うとコードがより明確になります。
transitionプロパティと組み合わせると、スムーズな移動アニメーションを簡単に実装できます。

translate()関数は、ホバー時のエフェクトやモーダル表示、ツールチップの位置調整など、実務でも頻繁に活用される重要なCSS機能です。ぜひ実際のプロジェクトでも試してみてください。

CSSの絶対配置（position: absolute）とは？基準となる祖先要素と使い方を実例で解説

CSS3のcolumn-ruleプロパティで段組みの罫線を設定する方法

CSSを使用した背景色の設定方法をわかりやすく解説
CSSで背景色を設定するには、background-colorプロパティを使用します。このプロパティは、要素の背景に任意の色を指定できるため、Webページのデザインにおいて非常に重要な役割を果たします。 background-colorプロパティで指定できる値 background-colorプロパティには、主に以下のような形式で色を指定できます。カラーキーワード（例：red、blue、orange） HEX値（例：#ff0000） RGB値（例：rgb(255, 0, 0)） HSL値（例：hsl(0, 100%, 50%)）サンプルコード1：特定の要素に背景色を設定するそれでは、
HTMLとCSSの初心者向けガイド
今日、私たちのサイトを支えているさまざまなテクノロジーを見つけることができますが、インターネット全体で最も重要な2つのファイルはHTMLとCSSです。はい、複雑なものが必要な場合は、それに対応するためのテクノロジーもさらに必要になります。ただし、単純な個人用Webページを作成するだけの場合は、HTMLとCSSだけで十分です。基本の紹介これは、HTMLとCSSの初心者向けガイドであり、簡単なサイトをできるだけ早く作成する方法を示しています。結果は必ずしも「標準に準拠」しているとは限りません。さらに微調整して拡張したい場合は、自分で読む必要があります。ただし、これはサイトであり、ほとんどのブ