要素の位置移動（CSS:translate）

CSS
HTML/CSS

この記事にはプロモーションが含まれています。

投稿：2021・07・19

更新：2022・12・21

要素の移動は基本的に、positionプロパティで行うのが一般的で、調整もしやすいかと思います。
positionプロパティであれば単に移動させるだけでなく、親要素やビューポートを基準とした位置調整なども行うことができるからです。

ですが、positionプロパティは細かい指定が可能である反面、「ボタンをクリックした時にちょっと動くようにするだけ」など、大した移動ではなく細かい指定も必要ないような場合には、少しだけ面倒くさいとも言えます。

具体的には以下のようなボタンです。（クリックすると、ボタンが押されたように少し移動します）

クリックすると動くボタン

▲のサンプルの移動は今回紹介する、transformプロパティを使っています、

もちろんpositionプロパティを使っても実装できますが、positionプロパティだと少しだけCSSの行数が増えてしまうので、できればtransformプロパティの方がおすすめです。

というわけで今回は、transform: translate()の基本的な使い方について解説していきます。

– 目次 –

▼translate( )の基本
translate( )の基本
縦方向に移動させる

▼translate( )の応用
translate( )で動くボタン
ど真ん中に配置する技

▼動画解説は下のサムネイルから（YouTubeに飛びます）

translate( )の基本

translate（トランスレート）は、transformプロパティの値の１つです。

transformプロパティの値はたくさんあるのですが、ここではtranslate( )に的を絞って説明していきます。

translate( )の（）（マルカッコ）には、要素をどれだけ動かすかの数値（と単位）を記入します。

２まで数値を指定することができ、１つ目がX軸（右方向）の移動、２つ目がY軸（下方向）の移動の指定になります。
また、負の数値を指定することもでき、その場合は正の数値の逆方向（X軸方向では左、Y軸方向では上）に移動することになります。

数値を１つだけしか指定しなかった場合、横方向にも縦方向にも同じだけ移動する…のではなく、横方向のみの移動になります。

２つ以上数値を指定できる場合で１つしか指定しなかった場合、同じ数値が他の指定値にも適用されることの方が多いのですが、translate( )はそうではないということは重要なポイントです。

それでは、表示結果とサンプルコードを確認していきましょう。

transform: translate(40px)
→に40px移動する

transform: translate(-15px)
←に15px移動する

    <div class="outer_box">
      <div class="inner_box">
        transform: translate(40px)<br>→に40px移動する
      </div>
    </div>

      .outer_box {
        background-color: lightblue;
        width: 100%;
        max-width: 600px;
        height: 200px;
        box-shadow: 3px 3px grey;
        margin: 2rem auto;
      }
      .inner_box {
        background-color: lightgreen;
        width: 150px;
        height: 100px;
        border: solid;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(40px);
      }


    <div class="outer_box">
      <div class="inner_box">
        transform: translate(-15px)<br>←に15px移動する
      </div>
    </div>

      .outer_box {
        background-color: lightblue;
        width: 100%;
        max-width: 600px;
        height: 200px;
        box-shadow: 3px 3px grey;
        margin: 2rem auto;
      }
      .inner_box {
        background-color: lightgreen;
        width: 150px;
        height: 100px;
        border: solid;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(-15px);
      }

ちなみに、transform: translate(40px)としなければ、緑色の部分が移動しないので、▼のようになります。

transform: translate( )の設定なし

▲を見たらわかるように、移動前の基準の位置は本来その要素が存在するはずの位置（position: relative;と同じ）になっています。

positionプロパティのabsoluteのように、親要素に対する絶対位置指定…親要素の右（right）からとか、下（bottom）からとか、そういった位置の指定はできません。
なので、絶対位置指定が必要な場合はtransform: translate( );ではなく、最初からpositionプロパティを使った方が早いです。

positionプロパティを使った移動と、translate( )を使った移動。この２つに厳密な使い分けのルールがあるわけではありませんが、Web制作初心者のための目安としては、以下のように決めておくと分かりやすいかと思います。

＊positionプロパティとtranslate( )＊
１positionプロパティ
絶対位置やビューポート（viewport）に対する固定的な位置指定が必要な場合、z-indexの指定など、細かい位置や重なりの調整が必要な場合に適用

２translate( )
要素のちょっとした移動、マウスオーバーやクリック時の移動アニメーションなどに適用

また、positionプロパティとtranslate( )を組み合わせる場合もあり得るので、どちらかに限定しないといけないということはありません。

誤解を怖れずに言えば、実現させたいデザインにできれば、CSSの調整方法は何でもOKです。

POINT!

・translate( )のカッコの中に、要素を移動させたい距離を数値＋単位で指定する！
・要素の移動前の基準位置は、本来その要素が存在するはずの位置！
・細かい位置調整が必要な場合はpositionプロパティ、ちょっとした移動の場合はtranslate( )など、使い分けることも可能！（絶対ではない）

縦方向に移動させる

前章では要素をX軸（横方向）に移動させましたが、translate( )のカッコに２つ目の数値を指定することで縦方向に移動させることも可能です。

注意点は、１つ目の数値（X軸方向への移動）の指定の後、 , （カンマ）で区切って２つ目の数値（Y軸方向への移動）を指定するという点です。（カンマがないとCSSが効きません）

それでは、注意点に注目しながら表示結果とサンプルコードを確認していきましょう。

transform: translate(40px,20px)
→に40px、↓に20px移動する

    <div class="outer_box">
      <div class="inner_box">
        transform: translate(40px,20px)<br>→に40px、↓に20px移動する
      </div>
    </div>

      .outer_box {
        background-color: lightblue;
        width: 100%;
        max-width: 600px;
        height: 200px;
        box-shadow: 3px 3px grey;
        margin: 2rem auto;
      }
      .inner_box {
        background-color: lightgreen;
        width: 150px;
        height: 100px;
        border: solid;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(40px,20px);
      }

また、これまでのサンプルでは数値＋ px （ピクセル） を使用していましたが、 ％（パーセント）を使った指定も可能です。レスポンシブデザインを意識した位置指定に便利です。

transform: translate(40%,20%)
→に40%、↓に20%移動する

また、縦方向にのみ移動させたい場合は、１つ目の値（X軸方向）を０（ゼロ）にするとできます。

transform: translate(0,20px)
→には動かず、↓に20px移動する

「えぇ～！？でもわざわざ０（ゼロ）を指定するのは面倒くさくない！？」…という方は、translateY( )を使いましょう。

translateY( ）は、縦方向のみの指定ができるtransformプロパティの値です。

横方向のみの指定ができる、translateX( )もあるのですが、横方向はtranslate( )で数値を１つだけ指定すればOKなので、出番はほとんどないです。

表示結果は同じですが、translateY( )を使ったサンプルも掲載しておきます。

transform: translateY(20px)
↓に20px移動する

    <div class="outer_box">
      <div class="inner_box">
        transform: translateY(20px)<br>↓に20px移動する
      </div>
    </div>

      .outer_box {
        background-color: lightblue;
        width: 100%;
        max-width: 600px;
        height: 200px;
        box-shadow: 3px 3px grey;
        margin: 2rem auto;
      }
      .inner_box {
        background-color: lightgreen;
        width: 150px;
        height: 100px;
        border: solid;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateY(20px);
      }

横方向に動かすことがないとわかりきっている場合は、translateY( )を使った方が少しだけスムーズに設定できます。
が、正直なところ、translate( )で指定するのと作業効率はほとんど変わらないので、どちらでも良いです。

POINT!

・縦方向に移動させたい場合は、translate( )に２つ目の数値を指定する！
・縦方向にのみ移動させたい場合は、１つ目の数値を０にして、２つ目の数値を指定する！
・もしくは、値にtranslateY( )を適用する！

translate( )で動くボタン

translate( )は、positionプロパティと違ってX軸方向とY軸方向の移動を同時に指定できるので、クリックしたらボタンが押されたように移動するアニメーションを作るのにとても便利です。

本記事の冒頭で紹介したサンプルと同じものですが、まずは以下のサンプルをクリックして実際の動きを確認していきましょう。

クリックすると動くボタン

クリックするとボタンが右下に少し移動して、その後元の位置に戻るのが確認できたかと思います。

この動きは、まずtransform: translate(5px,5px);で要素を右下に移動させた後、transformプロパティの値をinitialにして元の位置に戻しています。

top: 5px; left: 5px;…と設定する必要がない分、positionプロパティよりも少し楽に設定することができます。

仕組みがわかったところで、クリックで動くボタンのコードを見ていきましょう。


  HTML

    <p class="sample_translate_bt2">クリックすると動くボタン</p>

  CSS

    .sample_translate_bt2 {
      width: fit-content;
      background-image:linear-gradient(352deg, darkblue 45%, rgb(196, 194, 223));
      color: white;
      border-radius: 8px;
      padding: 10px;
      margin:2rem auto;
      box-shadow:1px 1px 2px 1px rgb(196, 194, 223) inset,2px 2px lightgrey;
      transition: .3s;
      cursor: pointer;
    }

  JavaScript

    <script type="text/javascript" defer>
      {

        const sample_translate_bt2 = document.querySelector('.sample_translate_bt2');

        sample_translate_bt2.addEventListener('click', ()=> {
          sample_translate_bt2.style.transform = 'translate(5px,5px)';
          setTimeout( () => {
            sample_translate_bt2.style.transform = 'initial';
          },200);
        });

      }
    </script>

JavaScriptの部分に、translate( )による動きの指定があるのがわかります。
本記事はあくまでCSSのtranlate( )の解説なのでプログラムに関する詳しい説明は省きますが、JavaScriptの部分を簡単に翻訳すると、

クリックされたらtranslate(5px,5px)の位置に移動して、200ms（ミリ秒）で初期値に戻る…という意味です。

ポイントは、translate(5px,5px);で右下に動かした後、transformプロパティの値を初期値に戻すという点です。
これを忘れてしまうと、ボタンが右下に移動したまま戻らなくなってしまいます。

もちろん、transform: translate(0,0);で元の位置に戻してもOKです。

ちなみに、擬似クラスの:activeを使っても同じようなアニメーションをつけることができますが、:activeだと仕様上、「クリックされている間だけしか動かない」ので、確実にアニメーションを最後まで実行させたい場合、この方法はあまりおすすめしません。

ただし、:activeで動きをつけたものに関しては、元の位置に戻す設定を書かなくてよいというメリットがあります。

参考までに、:activeとtranslate( )で動きをつけたサンプルも置いておきます。JavaScriptで実装したものとの違いを確認してみてください。

クリックすると動くボタン

    <p class="sample_translate_bt3”>クリックすると動くボタン</p>

    .sample_translate_bt3 {
      width: fit-content;
      background-image:linear-gradient(352deg, darkblue 45%, rgb(196, 194, 223));
      color: white;
      border-radius: 8px;
      padding: 10px;
      margin:2rem auto;
      box-shadow:1px 1px 2px 1px rgb(196, 194, 223) inset,2px 2px lightgrey;
      transition: .3s;
      cursor: pointer;
    }
    .sample_translate_bt3:active {
      transform: translate(5px,5px);
    }

translate( )のメリットはなんといってもX軸方向とY軸方向の移動を同時に指定できることなので、動くボタンに限らず要素を横と縦に少しだけ移動させたいという場合に便利なことを覚えておくと良いでしょう。

POINT!

・translate( )はボタンが押された時の移動アニメーションなどに便利！
・アニメーションをつけるときは、元の位置に戻す設定を忘れずに！
・擬似クラスの:activeならば元に戻す設定は必要ないが、クリックされている間だけしか動かない！

ど真ん中に配置する技

positionプロパティとtranslate( )を組み合わせることで、要素を簡単にど真ん中に配置することができます。

設定の手順は以下の通りです。

＊要素をど真ん中に配置する方法＊
１親要素にposition設定
まずは位置の基準となる親要素に対して、position: relative;を設定します。

２ど真ん中に配置したい要素のposition設定
ど真ん中に配置したい要素に、position: absolute;を設定し、親要素に対する絶対位置にします。

３topとleftプロパティで移動させる
２の設定に続けて、top: 50%; left: 50%; と指定し、上と左からの移動位置を設定します。

４translate( )で仕上げ
top: 50%; left: 50%;では、基準位置の上から50%・左から50%移動するだけで、ど真ん中にはなりません。そこで、transform: translate(-50%,-50%);と指定し、ど真ん中に調整します。

それでは、実際の表示結果とコードの紹介です。

ど真ん中に配置される

   <div class="center_relative_box01">
     <div class="center_absolute_box01">
       <p>ど真ん中に配置される</p>
     </div>
   </div>

    .center_relative_box01 {
      width: 100%;
      max-width: 600px;
      height: 200px;
      background-color: aliceblue;
      box-shadow: 3px 3px grey;
      position: relative;
    }
    .center_absolute_box01 {
      width: 150px;
      height: 100px;
      background-color: lightgreen;
      border: solid black;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .center_absolute_box01 p {
      padding: 10px;
    }

バシッとど真ん中に配置することができました。

ちなみに、transform: translate(-50%,-50%);の指定がなく、top: 50%;とleft: 50%;だけであれば▼のようになり、ど真ん中にはなりません。

ど真ん中にはならない

ど真ん中に配置するのはフレックスボックスにすると簡単ですが、そもそもフレックスボックスにしたくない場合もあり得ます。
そんな時は、今回紹介したpositionプロパティとtranslate( )の組み合わせワザが便利です。

おまけとして、フレックスボックスを使ったど真ん中配置のサンプルも置いておきます。

フレックスボックスでど真ん中に配置

   <div class="center_relative_box01">
     <div class="center_absolute_box01">
       <p>フレックスボックスでど真ん中に配置</p>
     </div>
   </div>

    .center_relative_box01 {
      width: 100%;
      max-width: 600px;
      height: 200px;
      background-color: aliceblue;
      box-shadow: 3px 3px grey;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .center_absolute_box01 {
      width: 150px;
      height: 100px;
      background-color: lightgreen;
      border: solid black;
    }
    .center_absolute_box01 p {
      padding: 10px;
    }

コードを見ればわかる通り、フレックスボックスでど真ん中に配置するには、親要素にdisplay: flex; justify-content: center; align-items: center; を指定すればOKです。

子要素にCSSを設定しなくて良い分、positionプロパティ＋translate( )よりも少しだけ楽です。

POINT!

・positionプロパティ＋translate( )でど真ん中に配置することができる！
・ど真ん中への配置は、フレックスボックスでも可能（こっちの方が少し楽）！
・positionプロパティ＋translate( )は、フレックスボックスが使えない、使いたくない時などに便利！

– 関連記事 –

ワンポイントチェック

positionプロパティとtranslate( )で、ど真ん中配置ができることからもわかるように、positionプロパティとtranslate( )は効果が乗算（上乗せ）されます。

片方だけしか効かないとか、効果が上書きされてしまうとか、そういうことはありません。

まずはpositionプロパティ＋left: 20px;で右方向に動かしたものと、translate(20px)で右方向に動かしたものを並べて確認してみましょう。

left: 20px;

translate(20px);

当然ですが、上下とも同じだけ移動していて、全く同じ表示結果になっていますね。

それでは、left: 20px; と、translate(20px);を両方設定したものを見てみましょう。

left: 20px; & translate(20px);

より、右方向に移動した（CSS効果が重ねられた）のがわかりますね。

効果が打ち消されたり、上書きされてしまわないという仕様を利用することで、ど真ん中に配置できるほか、positionプロパティで移動させた要素の位置の微調整として、translate( )を適用させる…といった使い方も可能です。

ただ、適用プロパティが増える分、調整が複雑になるので、positionプロパティとtranslate( )の重ねがけを推奨するわけではありません。

今回の動画で紹介したコード！

今回の解説動画で使用したコードです。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .translate_box {
        width: 80%;
        height: 200px;
        margin: 200px auto;
        background-color: lightblue;
        box-shadow: 5px 5px lightgrey;
      }
      .translate_box div {
        width: fit-content;
        padding: 15px;
        background-color: lightgreen;
        border: solid black;
      }
      .translate1 {
        transform: translate(40px);
      }
      .translate2 {
        transform: translate(40px,80px);
      }
      .translate3 {
        transform: translate(-40%,-30%);
      }
      .position {
        position: relative;
      }
      .translate4 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .btn {
        background-color: darkblue;
        color: white;
        width: fit-content;
        margin: 200px auto;
        padding: 15px;
        border-radius: 10px;
        cursor: pointer;
      }
      .btn:active {
        transform: translate(4px,4px);
      }
    </style>
  </head>
  <body>
    <div class="translate_box">
      <div class="translate1">
          transform: translate(40px);
      </div>
    </div>

    <div class="translate_box">
      <div class="translate2">
          transform: translate(40px,80px);
      </div>
    </div>

    <div class="translate_box">
      <div class="translate3">
          transform: translate(-40%,-30%);
      </div>
    </div>

    <div class="translate_box position">
      <div class="translate4">position: absolute; top: 50%; left: 50%;<br>
          transform: translate(-50%,-50%);
      </div>
    </div>

    <p class="btn">クリックで動くボタン</p>

  </body>
</html>

記事のトップへ戻る