menu
menu

キーワード検索

 

11月更新・前月(10月)の人気記事トップ10 - 11/10/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【Mac】外付けメディアが取り外せなくなったらSpotlightの除外項目を設定してみる
  5. ( 5 - ) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 7 ↑) 【Mac】Safariでソースコードを見る方法
  7. ( 10 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. (圏外↑) 【Mac】iMovieの保存場所を変更する
  9. ( 4 ↓) 【制作Tips】iPhone画面解像度まとめ
  10. ( 8 ↓) 【制作Tips】画面解像度一覧表
このエントリーをはてなブックマークに追加

【ブログ】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);
}

親要素の横幅は526pxなのでこの場合子要素の横幅は105.2pxということになり小数点が出ます。

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

 


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

親要素の横幅は527pxなのでこの場合子要素の横幅は105.4pxということになり、前のサンプル同様小数点が出ます。

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

 


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

親要素の横幅は528pxなのでこの場合子要素の横幅は105.6pxということになり、前のサンプル同様小数点が出ます。

これら子要素の横幅が小数点になる場合、Chromeで動作確認すると最後の子要素の後にサンプルによっては隙間ができたりできなかったり(;゚Д゚)

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

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

が、

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

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


最初の目的、割り切れない数値でも本当にピッタリになるの⁉️...、ですが、Chromeだとぴったりにはならないことがある、という結果になりました('~`;)

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

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