CSSの calc() ファンクションを使って長さを計算しサイズ指定する方法
CSSで長さを計算できるcalc()ファンクションというのはご存じですか? ここのところ流行りのレスポンシブデザインもそうですが、コンテンツの幅をフレキシブルに対応させたいという場合に、とても役立つファンクションです。 今回はこのcalc()ファンクションの使い方や、ブラウザのサポート状況をご紹介したいと思います。 親要素の幅を超えないようにする calc()ファンクションにはいろいろな使い方があるんですが、代表的なところで言えば画像などのコンテンツ幅が親要素の幅を超えないようにするという使い方。 通常、コンテンツ幅をフレキシブルに対応させるだけなら、CSSのmax-widthプロパティに対して100%と値を指定すりゃいいわけです。 しかし、ここにpaddingやborderといったプロパティを与えた途端に、親要素の幅をサラリと超えてきやがります。子の成長が著しい。 paddingを与えた
A Creative Grid System With Sass and calc() — SitePoint
Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do with a couple of Sass variables and the calc() function from CSS. There are probably still quite a couple of flaws and edge cases that are not handled
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
