
今回は、要素を移動させるtranslate
についてです。
ハンバーガーメニューではじめて見ると思うのですが、よく分からずに使ってる方もいるかもしれません。
そんなわけで、どんな仕組みで動いてるのかを解説していきます。
【参考記事】ハンバーガーメニューを0から作る|コピペなし
translate
要素を移動させるtranslateは、transformプロパティの値の1つです。


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からコードを書けるようになりたい、ちょいと奇特な方がいらしたらご覧ください。いと奇特な方がいらしたらご覧ください。