レスポンシブ時にサイドバーの横幅を固定したままにする方法

レスポンシブ時にサイドバーの横幅を固定したままにする方法

スポンサーリンク

スポンサーリンク

レスポンシブサイトを構築する際に、とても相性の良いCSS関数であるcalcの、最もオーソドックスな活用方法を紹介します。

webサイトの全体像を2カラム以上にしたい場合で、サイドバーの横幅(width)を固定したままでレスポンシブ化させる方法を例に説明していきます。

デモは以下からご確認ください。

デモ

レスポンシブ時にサイドバーの横幅を固定したままにする方法

冒頭でも書いた通り、CSSのcalcを利用します。

デモ画面と同様、コンテンツ全体の横幅を1000px、メインコンテンツ部分の横幅を最大670pxとし、サイドバーの横幅を330pxに固定すると仮定した場合のHTMLとCSSの記述例です。

HTML

CSS

解説としては、メインコンテンツとなるCSSのmax-widthに、calcを指定するだけです。

上記CSSの8と9行目に記載しているcalc(100% – 330px)の部分により、横幅が常時100%からサイドバーの横幅330px分を引いた値にて表示されるようにしています。

サイドバーの横幅を500pxにしたい場合は、330pxの箇所を500pxに変更すると同時に、サイドバーのmin-widthも同じく500pxにするだけで実装が可能です。

まとめ

今回の記事では、サイドバーの横幅を固定したままでのレスポンシブ化を紹介しました。

それとは逆に、メインコンテンツ部分を固定したままにするレスポンシブについても、もちろんCSSのcalcを利用することで実装が可能です。

calcには他にも様々な活用方法がありますので、今後も紹介していきたいと思います。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク