menu
menu

キーワード検索

 

前月(5月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 4 - ) 【Mac】MacにInkscapeをインストール
  5. ( 9 ↑) 【jQuery】jQueryでドロップダウンメニュー
  6. (10 ↑) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6 ↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( - ↑) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. ( 7 ↓) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( 5 ↓) 【HTML5】スマホサイトの作成・基本編
このエントリーをはてなブックマークに追加

【ブログ】CSS3のcalc()関数なら割り切れない数値でも本当にピッタリになるの⁉️

【ブログ】CSS3のcalc()関数なら割り切れない数値でも本当にピッタリになるの⁉️

こんにちは(・∀・)

まだ6月なのにもう夏みたいですね。

我が家では暑さに耐えられず扇風機を出しました('~`;)

前回【CSS】CSSで関数が使えるって知ってました⁉でCSSでcalc()関数が使えることをご紹介しましたが、実践で使用したことがなかったのと、割り切れない数値でも本当にピッタリになるのか気になったのでちょっと実験してみました。

親要素.container-1 525px、子要素.box x 5個

分かりやすいよう親要素の背景に色をつけています。

container-1
box
box
box
box
box

 


.container-1 .box {
  width: calc(525px / 5);
}

親要素の横幅は525pxなのでこの場合子要素の横幅は105pxということになり、子要素の値の合計は親要素とピッタリ合っているということになります。

今度は親要素の横幅を5で割り切れない数値にしてみます。

親要素.container-2 526px、子要素.box x 5個
container-2
box
box
box
box
box

 


.container-2 .box {
  width: calc(526px / 5);
}

おや⁉️

Chromeで動作確認すると最後の子要素の後に隙間ができてます(;゚Д゚)

他のブラウザでも見てみます...

IE、Edge、Safari、Firefoxもピッタリと親要素の大きさに合っていました。

が、

これはWindows、Mac共にChromeだけ他のブラウザと動きが違うようです。

試しにもう一つ。

親要素.container-3 527px、子要素.box x 5個
container-3
box
box
box
box
box

 


.container-3 .box {
  width: calc(527px / 5);
}

今度はChromeでもピッタリ表示されています。

他のブラウザで見てもピッタリ表示されています。

ではさらにもう一つ。

親要素.container-4 528px、子要素.box x 5個
container-4
box
box
box
box
box

 


.container-4 .box {
  width: calc(528px / 5);
}

またChromeだけ最後の子要素の後に隙間ができてますね。

もちろん他のブラウザではピッタリと親要素の大きさに合っていました。

なんだかよくわかりませんがChromeでcalc()関数を使うと他のブラウザと見え方が違うことがあるみたいです。


最初の目的、割り切れない数値でも本当にピッタリになるの⁉️...、とは若干違いますがなんだか嫌な現象を見つけてしまいました('~`;)

calc()関数を使う場合、IEとEdgeだけ気をつけていれば良いのかと思ってましたが、1pxのズレも許されないようなコーディングの場合はChromeでも注意が必要なようです。

  • calc()関数 CSS3
このエントリーをはてなブックマークに追加