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だけではなく「回転」などの使い方も出来ます!参考にどうぞ /

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ