【css】要素を移動させるtranslate

【html/css】移動translateについて

今回は、要素を移動させるtranslateについてです。

ハンバーガーメニューではじめて見ると思うのですが、よく分からずに使ってる方もいるかもしれません。

そんなわけで、どんな仕組みで動いてるのかを解説していきます。

【参考記事】ハンバーガーメニューを0から作る|コピペなし

translate

要素を移動させるtranslateは、transformプロパティの値の1つです。

htmlのタグと要素
cssのセレクタ・プロパティ・値

transformの4つの値

  • 移動(translate)
  • 縮尺(scale)
  • 回転(rotate)
  • 傾斜(skew)

冒頭でも述べたように、translateはハンバーガーメニューを作る時、はじめてお目にかかると思います。

こんな感じのですね(下のをクリックしてみてください)。

クリックしたらグレーのが左から現れ、もう1回押すと消えるといったふうな動きになってます。

この時に、translateが使われています。

要素を移動させる

まず、要素にtranslateを指定して動いたか見てみましょうか。

例えば、こんなコード。

<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>

ほぼほぼ

ほぼほぼ2

ここで、translateを使ってみましょう。

<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>
.ho {
  transform: translateX(10px);
}

ほぼほぼ

ほぼほぼ2

「ほぼほぼ2」が右に10px移動しました。

もう1つ見てみましょう。

<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>
.ho {
  transform: translateY(20px);
}

ほぼほぼ

ほぼほぼ2

今度は20px下に移動しました。

マイナス値だってありです。

<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>
.ho {
  transform: translateY(-20px);
}

ほぼほぼ

ほぼほぼ2

「ほぼほぼ2」が20px上に移動して、「ほぼほぼ」と重なってしまいました。

要素にこうやって指定するだけで、もとの位置から移動させれるのがtranslateです。

なので、パディングやマージンを使わないで、微妙に位置を変えるのに使えるかもしれません。

こんなふうに。

<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>
.ho {
  transform: translate(10px,5px); /* 横、縦 *
}

ほぼほぼ

ほぼほぼ2

translate(10px,5px)は、右に10px・下へ5px移動する指定です。

position: relativeでも要素を移動させられる

ちょっと脱線なんですが、position: relativeでも似たようなことができます。

<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>
.ho {
  position: relative;
  left: 10px;
  top: 5px;
}

ほぼほぼ

ほぼほぼ2

position: relativeは、今いる位置から場所を変更できるプロパティです。

くわしくは、【css】positionの使い方の「relative」をご覧ください。該当箇所にジャンプします。

2つとも、邪道な使い方かも…

チェックが入ったら

次のコードは、チェックボックスにチェックが入ったら移動するようにしたものです。

<input type="checkbox" id="nav01">
<p>ほぼほぼ</p>
input:checked + p {
  transform: translateX(100px);
}

ほぼほぼ

※チェックボックスをクリックしてみてください。

「ほぼほぼ」が移動したと思います。

で、もう1回クリックするとはじめの位置に戻ります。

さいしょに紹介したハンバーガーメニューの動きもこれと同じです。

【参考記事】ハンバーガーメニューを0から作るの「checked」

input:checked + pの解説

input:checked + pは、<input>がチェックされた時、<p>が右へ100px移動するという意味です。

「 + 」は、<input>の次に書かれた兄弟要素を指します。

つまり、ここでは<p>。

【参考】子孫要素に限定して指定するの「隣にある兄弟要素」

あっ、ついでにもう1コ注意点です。

input:checkedの「 : 」の前後には、半角であってもスペースは入れないようにしましょう。

× input :checked
× input: checked

どちらも指定が効かなくなるので、お気をつけを。

補足

translateはインライン要素には効かないので、<span>などを移動させたい時はdisplay: inline-blockまたはblockと変換してください。

【参考記事】ブロック要素とインライン要素の違い|「ブロック要素をインライン要素に変換」
クリックすると該当箇所にジャンプします。

マウスが乗ったら

あと、もう1つだけやってみますね。

<a href="#">ほぼほぼ</a>
a {
  display: block;
}
a:hover {
  transform: translateX(100px);
}

※「テキスト」にマウスを乗せてみてください。

hoverしたら、「ほぼほぼ」が移動したはずです。

上のcheckedの時といっしょで、「 : 」の前後にはスペースを入れないようにしましょう。

これも上の補足で述べたように、translateはインライン要素には効かないため、<a>にdisplay: blockとしています。

こんなふうに、クリックやマウスを乗せた時に要素が移動するようtranslateは使われ、動きのあるデザインを実現してくれます。

参考サイト

この記事はCSS3をもとに書きました。

CSS3とは、cssのルールブックみたいなもので、その最新版です。

どちらも翻訳ありです。

余裕のある方は、コソッとご覧ください〜

まとめ

今回は、translateの動きについて見てきました。

ハンバーガーメニューの時だけでなく、ちょっとだけ要素を動かす場合にも使えそうなので、よかったら試してみてください。

ハンバーガーメニューの作り方

こちらは、ハンバーガーメニューの作り方を解説している記事です。

コピペなしで、0からコードを書けるようになりたい、ちょいと奇特な方がいらしたらご覧ください。いと奇特な方がいらしたらご覧ください。

タイトルとURLをコピーしました