2019/07/18#css#コーディング今のサイト制作はスマホ対応が当たり前の時代になっています。レスポンシブwebデザインにすることでパソコン・タブレット・スマホなど異なるデバイスでも対応でき、さらに1ファイルで完結できるため、管理や運用が楽にできます。各デバイスを考えると幅指定などの単位がpx(ピクセル)よりも%(パーセント)で指定することが多くなります。pxと%を混合してサイト制作をする場合も出てくるかと思います。最大幅が1000pxでグローバルナビが6個に分ける時に、まず考えるのが1000pxを6分割ですが166.66・・・pxになります。幅を100%にしても16.66・・・%となりどちらも割り切れず隙間ができてしまいます。簡単にキレイに6分割するには下記のcssの記述でキレイなグローバルナビができます。6)の指定により割り切れない数字でも対応ができ、隙間なくキレイにグローバルナビを作ることができます。calc()関数は6分割だけではない上記の応用になりますが、幅を%指定し、何px以外の幅を指定することもできます。left;}上記の様にpx分だけを指定したいときに使う事ができます。式を複雑なものにもできるので一度お試しください。今回、ご紹介しました記事にはfloatを使っていますが、上記では解除を記載していません。実際に使用する場合は、floatの解除を記載する様にしてください。calc()関数に関して、対応していないブラウザ・バージョンがあるので使用後は必ず各対応ブラウザを確認してください。