CSS transform translateの使い方・要素の移動

CSS

【CSS transform:translate()の使い方】xy軸上の移動方法

2022年7月19日

今回は要素をxy軸上で移動させることができるCSS関数、translate()の使い方を紹介します。

translateが使えるようになると、要素の位置調整ができたり、簡単にアニメーションを実装したりすることができ非常に便利です。

translateを使って要素の大きさの半分を左上方向に戻す

 

 

 

transformで利用するtranslate関数

translateはtransformプロパティの値として使用する関数の一つで、要素を水平方向や垂直方向に移動することができます。

■(参考)translateを使用してホバー時に要素を動かしている例

translateを使用してホバー時に要素を動かしている例

また引数を2つ取ることができ、1つ目の引数にはx軸方向の移動距離, 2つ目の引数にはy軸方向の移動距離を指定します。

translate関数では第一引数に「x軸方向の距離」、第二引数に「y軸方向の距離」を指定する

translateで設定する距離の単位には絶対値(px)や相対値(%など)が使用可能です。

「%」は自分自身の要素の横幅・高さを基準として相対値になります。

 

(参考)transformプロパティで指定できる関数一覧

なお今回の記事では、translate関数の使い方のみを解説しますが、transformプロパティではtranslate()以外にも使用できる関数が複数存在します。

以下にtransformプロパティで指定できる関数をまとめました。興味がある方は、他の関数の使い方も調べてみて下さい。

■(参考)transformプロパティで指定できる関数まとめ

translate() 要素を移動させることができる関数
rotate() 要素を回転させることができる関数
scale() 要素を伸縮させることができる関数
skew() 要素を歪ませることができる関数
これらの関数が使用できるようになると、より複雑なアニメーションの実装もできるようになります。

 

 

translateを使って要素を移動させる方法

それではtranslate関数の概要が分かったところで、ここからは基本的なtranslate()の使い方を紹介していきます。

translate関数を使って要素を水平方向や垂直方向に移動させたい場合は、前述したようにtranslate()の第一引数には「x軸方向の距離」、第二引数には「y軸方向の距離」を指定してあげればOKです。(下の例では、ホバー時にtransform: translate();を使用して要素を移動させています。)

translate関数では第一引数に「x軸方向の距離」、第二引数に「y軸方向の距離」を指定する

 transform: translate(50px, 50px);の使用デモ

これで水平方向は左から右へ、垂直方向は上から下へ要素が移動されるようになりました。

なお、translateの値には負の値も使用することが可能で、以下のようにtranslateの引数を負の値に変更してあげると逆方向に要素を移動させることも可能。

 transform: translate(-50px, -50px);の使用デモ

また、要素をx軸・y軸のどちらかのみに移動させたい場合はtranslateX()、translateY()関数なども使用できます。

translate() 要素をx軸、y軸方向上で移動させることができる関数

引数を2つもつ。(例) translate(50px, 50px)

translateX() 要素をx軸方向上で移動させることができる関数

引数を1つもつ。(例) translateX(50px)

translateY() 要素をy軸方向上で移動させることができる関数

引数を1つもつ。(例) translateY(50px)

(補足)translateZ()

要素をz軸方向上で移動させることができる関数

(※)利用シーンは限られるためここでは解説を割愛します。

(補足)translate3d()

要素をx軸、y軸、z軸方向上で移動させることができる関数

(※)利用シーンは限られるためここでは解説を割愛します。

 

 

translateを使って要素を縦横中央寄せにする方法

translateは、positionと組み合わせて、要素を縦横中央寄せにする際にもよく使用されます。

こでは少し応用的な使い方として、translate()を使って要素を縦横中央寄せにする方法を紹介します。

なお、解説用に以下のHTML・CSSコードを準備したので、「text-wrap」というクラス名が付いたdivタグを縦横中央寄せにしていきましょう。

translateを使って要素を縦横中央寄せにする方法の解説用コード

■tanslateを使って要素を縦横中央寄せにする方法

  • positionを使って中央寄せする要素の左上の点を上から50%、左から50%の位置に移動する
  • translateを使って要素の大きさの半分を左上方向に戻す

 

(STEP. 1) positionで要素を上から50%、左から50%の位置に設定する

まず、positionで要素を上から50%、左から50%の位置に設定します。

中央寄せする要素の左上の点を上から50%、左から50%の位置に移動する

これにはpositionプロパティを使用して以下のように記述してあげればOKです。

中央寄せする要素を移動することができた

これで親要素(クラス名「main-visual」)を基準に子要素(クラス名「text-wrap」)の配置を指定できるようになり、子要素の左上の点がちょうど中央に来るように配置することができました。

ただし、要素の左上が中央に来ている状態で、要素そのものは真ん中には位置していません。

なおpositionの使い方が分からない方は、以下の記事にて詳しく解説しているのでこちらもご覧下さい。

 

(STEP. 2) translateを使って要素の大きさの半分を左上方向に戻す

要素の始点(左上の点)がちょうど中央に来るように配置しましたが、要素そのものは真ん中には位置しないため、これを次はtranslateを使って要素の大きさの半分を左上方向に戻します。

positionで中央に配置した要素の始点を水平方向・垂直方向に対して自身の要素の大きさの半分の長さだけ戻してあげたい場合は、translateX()の引数に「-50%」、translateY()の引数に「-50%」を指定してあげればOKです。
translateを使って要素の大きさの半分を左上方向に戻す

要素を縦横中央寄せにすることができた

これで要素を縦横中央寄せにすることができました。

なお、この方法だと後に要素の横幅や高さが変わった場合でも常に要素を縦横中央寄せにすることが可能です。

便利でよく使われる使い方なので、覚えておきましょう
 

 

まとめ

まとめです。今回は要素を水平方向・垂直方向で移動させることができるtransform:translate()の使い方を紹介しました。

translate関数では第一引数に「x軸方向の距離」、第二引数に「y軸方向の距離」を指定する

translate() 要素をx軸、y軸方向上で移動させることができる関数

引数を2つもつ。(例) translate(50px, 50px)

translateX() 要素をx軸方向上で移動させることができる関数

引数を1つもつ。(例) translateX(50px)

translateY() 要素をy軸方向上で移動させることができる関数

引数を1つもつ。(例) translateY(50px)

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 


 
「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

 

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS