さて、前回に引き続きプログラミング始めたての方が躓きやすいポイントについて、解説します。
というか、私が４か月学習しているにも関わらず、いまだにあれ、どうだっけと思ってしまうことがあるので、自分の備忘録的に記事にしてみます。
今回は要素の位置を決めるpositionについてです。ではいきましょう！
もくじ
いきなり丸投げ！でもこの記事は本当にわかりやすい！
いきなり丸投げで申し訳ありませんが、私はpositionの基礎をこの記事で学びました。
必ず読んでみてください。
本当はいちから自分で記事を書きたい！でもまだスキルがない！すいません！
↓
そして今回はほとんどこの記事で理解ができると思います。
２点に絞って私がこの記事だけでは躓いたポイントについて紹介します。
要素の中央に文字を重ねて配置
よく使うのがこれですね。
メインビジュアルに写真を使い、その中央に店の名前やキャッチコピーを入れるみたいな。
で上記の記事からだと親要素にposition:relative;を指定し、子要素にposition:absolute;とtop:50%;とleft:50%;を指定すればよいように思います。
でもそれだと微妙にずれるんですよね。
もし、中央に置きたいｐ要素に「くまさんくまさんくまさんくまさん」という文字列が入っていたとすると、左角が中央に来るので、文字列は中央より右下に配置されることになります。
これを解消するにはtransform:translate(-50%,-50%);を指定します。
ｐにtransform:translata(-50%,-50%)を指定すると、x軸方向、y軸方向のそれぞれに指定した要素の半分の長さ移動する感じです。
「くまさんくまさんくまさんくまさん」というpに指定したとすると、ｙ軸方向は「くまさん」の「く」の折れのあたりまで、ｘ軸方向はくまさん×２回分の場所まで移動する、みたいなニュアンスです。
その結果中央に配置できます。ややこいですね。
実際にやってみましょう。下記の演習がわかりやすいです。
https://ninjacode.work/practice/q6.html
position:fixedの時の幅
position:fixed;でヘッダーなどを画面上部に固定する、みたいな使い方をよくしますが、fixedを使う場合、
前回の記事でwidthは指定しなければautoになると書きましたが、親要素にfixedを指定している場合、親要素の幅は子要素の幅で決まることになります。前回の記事のheightに似ているかな。
まとめ 中央配置とfixedはめちゃ一般的だからしっかり覚えておこう
私はまだ案件を受注したこともないような素人なので、実務レベルでどれほど重要かはわかりません。
でも普段ネットサーフィンしていてもメインビジュアルに文字が重なっているものやスクロールしても固定表示されるヘッダーはよく見かけますよね？
これらは基本的なレイアウトだと思うので、必ずマスターしておきましょう！
少しわかりにくかったと思うので、また実際のコードを追記したり、課題みたいなものを掲載したいと考えています。
それでは！
