こんにちは！
今回はCSSのcalcが便利だったことについてまとめます。
やりたいこと
- 画像のように、メインのコンテナからは離れた場所にボタンなどのサイドバーを設置したい
今回の方法
- 今回は
position: absoluteで指定することにした - ただ、
leftで位置を指定すると、画面幅を広げた時にcontainerとsidebarの位置が広がってしまう - sidebarはcontainerから一定の位置に固定したかったので、次のような位置指定をした
right: calc(50% + 500px + 30px)
何を指定したか
- 最初の50%は画面幅の50%
- 次の500pxはcontainerの横幅1000pxの半分
- 最後の30pxはcontainerとside barの間に開けたい距離
calcの効果
- calcを使うと、このように計算した結果を値として指定できて便利
おわりに
今回はCSSのcalcが便利だったことについてまとめました。自分で考えた方法なので、こういったケースでもっといいやり方などあればぜひ教えてください。
88/100
