3月更新・前月(2月)の人気記事トップ10 03/01/2023
- ( 01 – ) 【iPhone / iPad】iPhoneでSuicaをクレジットカード無しで使う方法
- ( 02 – ) 【Mac】MacにGoogle Driveをインストール
- ( 03 – ) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- ( 06 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 05 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 05 ↓) 【Mac】Macのユーザー名とアカウント名を変更する
- ( 07 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 08 – ) 【iPhone iPad】iPhoneやiPadの音量を細かく調整する方法
- (圏外↑) 【Labs】マウスオーバーでボタンの色が変わるロールオーバー
- ( 09 ↓) 【jQuery】入門5. jQueryで日時を表示
【blog】CSS3のcalc()関数なら割り切れない数値でも本当にピッタリになるの⁉️
こんにちは(・∀・)
まだ6月なのにもう夏みたいですね。
我が家では暑さに耐えられず扇風機を出しました('~' ;)
前回【CSS】CSSで関数が使えるって知ってました⁉でCSSでcalc()関数が使えることをご紹介しましたが、実践で使用したことがなかったのと、割り切れない数値でも本当にピッタリになるのか気になったのでちょっと実験してみました。
親要素.container-1 525px、子要素.box x 5個
分かりやすいよう親要素の背景に色をつけています。
.container-1 .box {
width: calc(525px / 5);
}
親要素の横幅は525pxなのでこの場合子要素の横幅は105pxということになり、子要素の値の合計は親要素とピッタリ合っているということになります。
今度は親要素の横幅を5で割ると子要素の横幅の数値に小数点が出るサンプルをいくつか作ってみます。
親要素.container-2 526px、子要素.box x 5個
.container-2 .box {
width: calc(526px / 5);
}
親要素の横幅は526pxなのでこの場合子要素の横幅は105.2pxということになり小数点が出ます。
親要素.container-3 527px、子要素.box x 5個
.container-3 .box {
width: calc(527px / 5);
}
親要素の横幅は527pxなのでこの場合子要素の横幅は105.4pxということになり、前のサンプル同様小数点が出ます。
親要素.container-4 528px、子要素.box x 5個
.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でも注意が必要なようです。