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

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

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

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

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

html/css初心者の人はこちらもどうぞ↓↓

【html/css初心者】仕事へ就く前にサーバーを経験すべき理由

htm/cssを勉強中の方へ。この記事では、サイト制作を始めた人がサーバーを借りてファイルをアップする経験を早く積んだ方がいい理由を解説していきます。

yoncoichi.com

translate

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

要素・プロパティ・値

transformの4つの値

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

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

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

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

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

要素を移動させる

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

例えば、こんなコード。

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

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

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

.ho {
  transform: translateX(10px);
}

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

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

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

.ho {
  transform: translateY(20px);
}

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

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

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

.ho {
  transform: translateY(-20px);
}

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

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

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

こんなふうに。

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

.ho {
  transform: translate(10px,5px); /* 横、縦 *
}

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

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

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

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

.ho {
  position: relative;
  left: 10px;
  top: 5px;
}

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

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

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

チェックが入ったら

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

<input type="checkbox" id="nav01">
<p>ほぼほぼ</p>

input:checked + p {
  transform: translateX(100px);
}

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

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

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

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

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

input:checked + pの解説

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

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

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

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

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

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

× input :checked
× input: checked

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

マウスが乗ったら

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

<a href="#">ほぼほぼ</a>

a {
  display: block;
}
a:hover {
  transform: translateX(100px);
}

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

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

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

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

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

参考サイト

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

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

• translate()｜MDN Web Docs
• translate()「CSS 変換モジュール レベル 1」｜W3C

どちらも翻訳ありです。

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

まとめ

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

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

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

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

【css】ハンバーガーメニューをコピペなしで０から作る

コピペせずに、ハンバーガーメニューを自力で作れるようになりたい方に向けて、解説しています。htmlのレイアウトの組み方から、inputやcheckedの使い方まで、しつこいくらいに説明しています。

yoncoichi.com

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