【html css】calc関数 早く使うべきだった 灯台下暗し
ブログのある記事が目に止まりました。
calc関数に関する記事で
「カラムを３等分する時にはwidth:33.33%;を使いますよね、」
って話だったんで、そうですが何か？って読み進めると
「width:calc(100% / 3);がわかりやすいよね。」
って記事でした。
当たり前すぎる設定。 calc関数で四則演算できるのも分かってた。
でも、使ってませんでしたwidth:calc(100% / 3);。
なぜ俺はcalcを使って100%を３で割ろうとしなかったのか…。 33.33%を九九みたいに、ににんがしぃ〜的に３等分＝33.33で覚えてしまったからなのか…。
悔しいです。
なぜ、思い付かなかったのか自問自答
まさに晴天の霹靂。
これを思いつかなかった理由もなんと無く分かる気がします。
calc使いはじた時、サポートブラウザがそんなに多くなかったと記憶しています。
それとベンダープレフィクスも忘れずにというのもありまして、calcを使うのに一手間かけてブラウザ周りも考えながら適用させていました。
そしてよく使う３等分が33.33、6等分が16.66と覚えやすい数値だったというのもありました。
ですが３等分が100% / 3、6等分が100% / 6の方がもっと覚えやすいということを気付かなかったのか。
現在のcalc関数をサポートしているブラウザをチェックしてみます。
ブラウザシェアも調べてみました。
ということで現在のブラウザシェアを考えると心置きなくcalc関数が使えそうです。
とりあえず作ってみました。
See the Pen
Sample of calc function by tatsuya☆ラボラトリ【 tatsuya-lab.com 】 (@labtatsuya)
on CodePen.
まず、下記HTMLを用意します。
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>calc function</title>
</head>
<body>
<article>
<section>
<figure>
<img src="https://tatsuya-lab.com/wp-content/uploads/2020/03/kasturi-roy-iV24JKvs9P0-unsplash.jpg" alt="">
</figure>
<h1>見出し</h1>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</section>
<section>
<figure>
<img src="https://tatsuya-lab.com/wp-content/uploads/2020/03/joanna-kosinska-7ACuHoezUYk-unsplash.jpg" alt="">
</figure>
<h1>見出し</h1>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</section>
<section>
<figure>
<img src="https://tatsuya-lab.com/wp-content/uploads/2020/03/address-book-2246432_1280.jpg" alt="">
</figure>
<h1>見出し</h1>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</section>
<section>
<figure>
<img src="https://tatsuya-lab.com/wp-content/uploads/2020/03/kasturi-roy-iV24JKvs9P0-unsplash.jpg" alt="">
</figure>
<h1>見出し</h1>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</section>
<section>
<figure>
<img src="https://tatsuya-lab.com/wp-content/uploads/2020/03/joanna-kosinska-7ACuHoezUYk-unsplash.jpg" alt="">
</figure>
<h1>見出し</h1>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</section>
<section>
<figure>
<img src="https://tatsuya-lab.com/wp-content/uploads/2020/03/address-book-2246432_1280.jpg" alt="">
</figure>
<h1>見出し</h1>
<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>
</section>
</article>
</body>
</html>
このHTMLの<section>を全幅、２等分、３等分をcalcを使って作ってみました。
CSS
*{
margin: 0;
padding: 0;
font-feature-settings: "palt";
box-sizing: border-box;
}
body,html{
width: 100%;
height: 100%;
}
body{
font-family: sans-serif;
font-size: 14px;
line-height: 175%;
}
img{
width: 100%;
height: auto;
}
article{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
section{
margin-bottom: 50px;
}
section:first-of-type{
width: 100%;
}
section:nth-of-type(n+2):nth-of-type(-n+3){
width: calc(100% / 2 - 20px);
}
section:nth-of-type(n+4){
width: calc(100% / 3 - 20px);
}
最初の<section>を全幅
section:first-of-type{
width: 100%;
}２番目、３番目の<section>を２等分
section:nth-of-type(n+2):nth-of-type(-n+3){
width: calc(100% / 2 - 20px);
}4番目以降の<section>を３等分
section:nth-of-type(n+4){
width: calc(100% / 3 - 20px);
}
あらためて分かり易いですね。
注意するのが四則演算の – と + の両サイドは半角スペースを忘れずに。
このスペースが無いと四則演算として認識しない様です。