float時に横幅が割り切れないときの対処法-webaby【エンジニアお父さんの育児・子育て】

今のサイト制作はスマホ対応が当たり前の時代になっています。
レスポンシブwebデザインにすることでパソコン・タブレット・スマホなど異なるデバイスでも対応でき、さらに1ファイルで完結できるため、管理や運用が楽にできます。

ただ、各デバイスを考えると幅指定などの単位がpx（ピクセル）よりも％（パーセント）で指定することが多くなります。またpxと％を混合してサイト制作をする場合も出てくるかと思います。

そういったときに、pxと％を使ってうまく幅指定をする方法をご紹介いたします！

1. グローバルナビを6分割する方法
2. calc()関数は6分割だけではない
3. 使用するにあたっての注意事項

グローバルナビを6分割する方法

最大幅が1000pxでグローバルナビが6個に分ける時に、まず考えるのが1000pxを6分割ですが166.66・・・pxになります。また、幅を100%にしても16.66・・・％となりどちらも割り切れず隙間ができてしまいます。

簡単にキレイに6分割するには下記のcssの記述でキレイなグローバルナビができます。

9行目のcalc(100% / 6)の指定により割り切れない数字でも対応ができ、隙間なくキレイにグローバルナビを作ることができます。

calc()関数は6分割だけではない

上記の応用になりますが、幅を％指定し、何px以外の幅を指定することもできます。

上記の様にpx分だけを指定したいときに使う事ができます。また、式を複雑なものにもできるので一度お試しください。

使用するにあたっての注意事項

今回、ご紹介しました記事にはfloatを使っていますが、上記では解除を記載していません。ですが、実際に使用する場合は、floatの解除を記載する様にしてください。

calc()関数に関して、対応していないブラウザ・バージョンがあるので使用後は必ず各対応ブラウザを確認してください。