今回は、positionプロパティとtransformプロパティを使って要素を上下左右中央寄せする応用のやり方を紹介します。
この方法はWebページにおけるファーストビューなどでよく使用する手法になるので、理屈で理解していきましょう。
positionプロパティ, transformプロパティの使い方を忘れた方は、「CSSのpositionプロパティを学ぼう」「CSSのtransformプロパティで要素を変形させよう」の記事を振り返ってみましょう。
【CSS】position プロパティまとめと効かないときの対処法を解説
上下左右中央寄せのやり方
早速、デモを見てみましょう。
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
positionプロパティとtransformプロパティを理解している方であれば、上記のコードで読み取れるかと思います。
ポイントは以下になります。
positionを指定する
中央寄せにしたい要素にabsoluteを指定し、その基準になる親要素にrelativeを指定します。
今回は中央寄せにしたい「ZeroPlus」というテキストに対してposition: absolute;、その移動の基準になる親要素である、.boxというクラス名がついたdivに対してposition: relative;をそれぞれ指定しました。
transformのtranslateを指定する
中央配置したい要素を上から50％、左から50％移動させた上で、transformプロパティを使用して要素の大きさの半分ずつ位置を戻します。
基準になるdivの上から50％の距離、左からも50％の距離にテキストを移動させます。
しかし、このとき中央寄せしたい要素の左上が起点になるため、これらを指定しただけでは中央からずれてしまいます。
これを修正するために、テキスト要素の横幅半分の大きさ（50％）の分だけ左に戻します（translateX）。さらに、縦幅の半分（50%）分だけ上に戻します（translateY）。
CodePenのデモコードでは、transform: translateX(-50%) translateY(-50%);ではなくて、transform: translate(-50%, -50%);としていますが、実はCodePenのようにtranslate()だけでtranslateX()とtranslateY()の両方をまとめて指定することができます。
したがって、動かしたい要素に、
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}という4行のコードをセットで使用することで、上下左右中央寄せをすることができます。
まとめ
このコードは理屈で理解すると、あらゆる場面で値を変えて使用することができます。
ハンバーガーメニューでも上下左右中央寄せはしないものの、positionとtransformを組み合わせて使用するので、マスターしていきましょう。
一つ、確かな理解を積み上げましたね。
ただ「理解した」と「実務で使える」の間には、もう一段ギャップがあります。なんとなく作れても、実務基準ではコードにムダや間違いがあるとみなされることがあります。自分では気づけない、そのズレをどう埋めるかが次の課題です。
そのギャップを埋める一番早い方法は、実際の案件レベルの制作を、メンターに見てもらいながら進めることです。
ZeroPlus Gateでは、30日間無料で、正しくWebサイトを作る力が身につく実践型の学習環境を提供しています。
- メンターとあなただけの学習ロードマップを作れる
- 現場経験豊富なプロへ回数無制限で質問ができる
- 元ランサーズの技術責任者監修のカリキュラム
このレベルの環境を、入会金も月謝も一切なしで提供しているのはZeroPlus Gateだけです。ただし、参加者の数には制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
登録は30秒、今すぐ次の一歩へ
