LINEで現役エンジニアに直接質問してみよう!登録無料

CSS transform:translate()の使い方・書き方!要素を移動させる方法

この記事の概要

transform:translate()とは、とある1つの要素を横方向と縦方向に移動させるプロパティです。主に、javascriptやtransitionを使ったアニメーションを作る時と一緒に使われます。

この記事では、Webプログラマのアキ(@hackablejp )が、HTMLでリンクを作る書き方や方法をと、そのリンクをクリックしやすい(見やすい)ように、デザインをする方法を簡単に紹介します!

transform:translate()とよく似たものに、position:absoluteがあります。が、これらは移動させる起点や幅、高さなどが異なります。 この点の違いや、それぞれの使い方についても確認していきます!

transform:translate()とは?

transform:translate()とは簡単に言うと、要素を基準として場所を移動させるCSSプロパティの1つです。

主に、「今の位置から〇〇px動かしたいんだけどな〜」とか、「マウスカーソルが乗った時、アニメーションで下に◯px動かしたいな」という時に使います。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

transform:translate()の書き方の基本と使用例

まずは、覚えておきたい基本的な設定や書き方について解説していきます。

〇〇 {
    transform: translate(x軸方向の移動量, y軸方向に移動量);
}

実際に.elemに対して、x軸の3px、y軸に10px動かす書き方はこのようになります。

〇〇 {
    transform: translate(3px, 10px);
}

もちろん、pxだけではなく、em%も使用できます。

transform: translate()に対する値の単位
  • px: 画面のピクセル値の大きさで指定
    画面上で見える実際の大きさを指定できます。どのデバイスでも見える実際の長さは同じです。
  • em: 親要素のfont-sizeの倍率で指定
    親要素での文字サイズが基準に大きさが変わります。例えば、親要素のfont-sizeが16pxなら、1em=16pxとなります。
合わせて読みたい

\ transformには、translateだけではなく「回転」などの使い方も出来ます!参考にどうぞ /

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。