要素を移動させるtranslate。
※要素 … <div>や<p>などのこと。
このtranslateはハンバーガーメニューではじめて見るかもしれません。
しかし、ハンバーガーメニュー以外での使いどころが分からない。
そんな人もいるはずです。
というわけで、この記事ではtranslateの使い方を解説します。
ご覧ください。
【参考記事】ハンバーガーメニューをコピペなしで0から作る
translateの使い方
translateはtransformプロパティの値の1つです。
transformの4つの値
- 移動(translate)
- 縮尺(scale)
- 回転(rotate)
- 傾斜(skew)
冒頭でも述べたように、translateはハンバーガーメニューで使われます。
ハンバーガーアイコンをクリックして下さい。
すると、ナビメニューが左から現れる。
もう１回押すと、消える。
こんな動きですね。
この時、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下へ移動しました。
さらにもう1例どうぞ。
ここではマイナス値を指定。
<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>.ho {
transform: translateY(-20px);
}ほぼほぼ
ほぼほぼ2
「ほぼほぼ2」が20px上に移動し、「ほぼほぼ」と重なってしまいました。
このように、もとの位置から移動できるのがtranslateです。
微妙に位置を変えるような時に使えますね。
こんなふうに。
translate(10px,5px)は、右に10px・下へ5px移動する指定です。
<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>.ho {
transform: translate(10px,5px); /* 横、縦 *
}ほぼほぼ
ほぼほぼ2
position: relative
脱線しますが、position: relativeでも同じように移動できます。
<p>ほぼほぼ</p>
<p class="ho">ほぼほぼ2</p>.ho {
position: relative;
left: 10px;
top: 5px;
}ほぼほぼ
ほぼほぼ2
「ほぼほぼ2」が移動しました。
ただし、指定する数が3つと多いですね。
translateの方が1つの指定で書けるので、使いやすそう。
【参考記事】『positionの使い方』の「relative」
該当箇所にジャンプします。
チェックが入ったら移動
次のコードは、チェックボックスに☑️が入ったら文字が移動します。
<input type="checkbox" id="nav01">
<p>ほぼほぼ</p>input:checked + p {
transform: translateX(100px);
}ほぼほぼ
※□をクリックしてみてください。
「ほぼほぼ」が移動したと思います。
もう1回クリックすると、はじめの位置へ戻るはずです。
上で紹介したハンバーガーメニューの動きも、これと同じになります。
【参考記事】『ハンバーガーメニューをコピペなしで０から作る』の「checked」
該当箇所にジャンプします。
input:checked + pの解説
下記は<input>がチェックされた時、<p>が右へ100px移動する指定です。
<input type="checkbox" id="nav01">
<p>ほぼほぼ</p>input:checked + p {
transform: translateX(100px);
}「 + 」は、<input>の次に書かれた兄弟要素を指します。
つまり、ここでは<p>。
【参考記事】『子孫要素に限定して指定する』の「隣にある兄弟要素」
該当箇所にジャンプします。
そして、checkedを指定する時には、注意点があります。
input:checkedの「 : 」の前後には、半角でもスペースは入れられません。
× input :checked
× input: checked
どちらも指定が効かなくなるので、気をつけましょう。
補足
translateはインライン要素には効きません。
ですから、<span>などを移動させる時はdisplayの変換が必要です。
display: inline-blockまたはblockと指定しましょう。
【参考記事】『ブロック要素とインライン要素、3つの違い』の「ブロック要素をインライン要素に変換」
該当箇所にジャンプします。
マウスオンで移動
さいごは文字にマウスが乗った時、移動するよう指定します。
<a href="#">ほぼほぼ</a>a {
display: block;
}
a:hover {
transform: translateX(100px);
}※「テキスト」にマウスを乗せてみてください。
hoverしたら、「ほぼほぼ」が移動したはずです。
上のcheckedの時と同じで、a:hoverの「 : 」の前後にはスペースを入れられません。
× a :hover
× a: hover
また、translateはインライン要素には効かないので、<a>にdisplay: blockとしました。
参考サイト
この記事はCSS3をもとに書きました。
CSS3とはcssのルールブックみたいなもので、その最新版です。
どちらも翻訳ありです。
余裕のある人だけご覧ください。
まとめ
今回はtranslateを紹介しました。
ハンバーガーメニューの時に使うのが定番なtranslate。
ですが、要素を少し動かす場合にも使えるので、試してみてください。
ハンバーガーメニューの作り方
ハンバーガーメニューの作り方はこちらからどうぞ。
コピペなしでコードを書けるようになります。
