• コーディング ファクトリーHOME
  • Coding Methodology
  • 第93回 cssのcalc()ファンクションで要素の幅を設定する

コーディングメソドロジー

第93回 cssのcalc()ファンクションで要素の幅を設定する

css でwidth の値を設定するときに「px」や「%」のような単位を使用することが多いですが、CSS3 の便利な機能「calc()」を使用すると、計算式で値を設定することができます。今回は、よくあるカラムレイアウトを、calc() ファンクションを用いて実装する方法を紹介します。

100% を等分にする

ウインドウサイズにあわせて可変するリキッドレイアウトでは、% でwidth を指定することがあります。しかし、100% を3 等分したい場合(図1)には、1 カラムあたりの幅は33.3...% のように割り切れない値となってしまいます。そんな時は、1カラムの幅を「width: calc(100% / 3);」と書くことで均等に3等分することができます。(CSSの設定①

HTMLの設定

CSSの設定 ①

%で指定したカラム間にpx で余白を設定する

カラムの幅を%で指定し、且つカラム間の余白を固定にしたい場合、%指定の要素とpx指定の要素を並べて配置すると、ウインドウ サイズによってレイアウトが崩れてしまったり、不要な余白が発生してしまいます。図2のような間隔でカラムを配置する場合は、CSSの設定②のように記述することで、10pxの間隔で均等な3カラムを配置することができます。

CSSの設定 ②

CSSの設定 ③

対応ブラウザについて

2016年9月時点での主な対応ブラウザは、chrome、firefox、Safari最新、Edge、IE9以降、iOS7以降、Android4.4以降からサポートしています。iOS6はベンダープレフィックス(-webkit-)が必要です。IE8やAndroid4.3の対応が必要な場合は、widthを併記することでフォールバックできます。(CSSの設定③

width以外にも「長さ」「角度」「時間」などの整数値を用いる場所に使用可能な、calc()ファンクション。是非活用してみてください。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム