CSSの calc() ファンクションを使って長さを計算しサイズ指定する方法

CSSで長さを計算できるcalc()ファンクションというのはご存じですか? ここのところ流行りのレスポンシブデザインもそうですが、コンテンツの幅をフレキシブルに対応させたいという場合に、とても役立つファンクションです。 今回はこのcalc()ファンクションの使い方や、ブラウザのサポート状況をご紹介したいと思います。 親要素の幅を超えないようにする calc()ファンクションにはいろいろな使い方があるんですが、代表的なところで言えば画像などのコンテンツ幅が親要素の幅を超えないようにするという使い方。 通常、コンテンツ幅をフレキシブルに対応させるだけなら、CSSのmax-widthプロパティに対して100%と値を指定すりゃいいわけです。 しかし、ここにpaddingやborderといったプロパティを与えた途端に、親要素の幅をサラリと超えてきやがります。子の成長が著しい。 paddingを与えた

[kihan]

cssのcalc関数、便利そうだね！

[poppun1940]

RSS購読 Feedly 366 users Facebook Twitter tumblr flickr Instagram Linkedin CSSで長さを計算できるcalc()ファンクションというのはご存じですか? ここのところ流行りのレスポンシブデザインもそうですが、コンテンツの幅をフレキシブルに対

[kasumani]

CSSの calc() ファンクションを使って長さを計算しサイズ指定する方法 CSSで長さを計算できるcalc()ファンクションというのはご存じですか? ここのところ流行りのレスポンシブデザインもそうですが、コンテンツの幅をフレキ

[gayou]

calc()知ってる/知らないで、レイアウト作る手間が変わってくる件

[yukki_design]

calc()ファンクション、初めて知った。 ただ例に出てる親のwidthを子が超えちゃう問題はbox-sizing使えば解決するよね。