どうも、7noteです。今回はposition: absolute;で要素を上下左右中央に配置するお話。
「あー、お腹すいたなぁ。」
「チキンラーメンでも食べるか（深夜2時）。」
「じょぼぼぼぼ・・・（お湯を注ぐ）」
「・・・あっ、卵落とすの忘れてた！」
「この真ん中のポケットに卵を・・・・しまった！！」
失敗例
「あーーー・・・」
みんなはこうならないために、上下左右中央に卵を配置できるようposition: absolute;をマスターしよう！
材料はこちら(1人前)
| ファイル | CSSプロパティ | 意味 |
|---|---|---|
| index.html | ||
| style.css | position: 〜〜〜〜; transform:translate(); | 配置方法を指定 表示位置をズラす |
| egg.png | たまごの画像 | |
| chickenramen.png | ラーメンの画像 |
作り方
- index.htmlにラーメンの画像と卵の画像を用意。
- style.cssで、卵の画像をラーメンの画像の上に重ねる。
- style.cssで、上下左右中央に卵の画像を配置して出来上がり。
1.index.htmlにラーメンの画像と卵の画像を用意
index.html
<divclass="donburi"><imgsrc="chickenramen.png"alt="チキンラーメン"><imgsrc="egg.png"alt="卵"class="egg"></div>2.style.cssで、卵の画像をラーメンの画像の上に重ねる。
style.css
.donburi{width:624px;/*ラーメンの画像の横幅と同じサイズを指定*/position:relative;/* .donburiの左上を基準点（0,0）と設定 */}.donburi.egg{position:absolute;/* 親要素の基準点（今回だと.donburi）を基準と認識させる */top:0;/*基準点からの位置を上から0pxの位置に指定*/left:0;/*基準点からの位置を左から0pxの位置に指定*/}3. style.cssで、上下左右中央に卵の画像を配置して出来上がり。
style.css
.donburi{width:624px;position:relative;}.donburi.egg{position:absolute;/*--以下の値を変更--*/top:50%;/*基準点からの位置を上から５０%の位置に指定*/left:50%;/*基準点からの位置を左から５０%の位置に指定*//*--以下のプロパティを追記--*/transform:translate(-50%,-50%);/*卵の画像の縦横の長さを100%とした時、-50%分、つまり画像の幅や高さの半分マイナス方向に表示位置をズラす*/}＼完成／
解説・作り方のコツ
- [transform: translate(-50%,-50%);]を書いている理由は、[top: 50%; left: 50%;]だけだとど真ん中にこないから。もしtransformがないと、ど真ん中にくるのは卵の画像の左上角が、ラーメン画像のど真ん中に来てしまう。だから卵の画像の真ん中がラーメンの画像の真ん中にくるようにするためかいています！
- [position: absolute;]を指定しているとき、上下左右中央の指定は親要素の大きさからみて中央にくるので、 今回は[.donburi]にラーメンの画像と同じサイズの624pxをwidthに当てています。
まとめ
チキンラーメンは美味しい。
素材データ配布
真似して作りたい人はこの画像をダウンロードして使ってね！
おそまつ！
（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）