CSS3、calcのTips的な

※この記事は7年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうもエナジードリンク飲みすぎで、
寿命が縮まってるんじゃないか疑惑のみやびです。

さて、さっそく表記をやっていこうか。
CSS3で超便利なファンクションがある。
calc()というもの。

こいつが便利も便利、超便利で、下手したらjsいらなくなるんじゃね？レベル。

なんと、CSSの値に、四則計算を入れれるってやつなのだ。
とまぁ、二年前から紹介記事出てるから、知ってる人多いと思うけどね・・・。

例えば、よくやりたいのが、100%に対して、npxだけマイナスしたい！
なんて時。
従来ならjsでやってたでしょう。
それがCSSだけでできちゃうって話。

.testClass {
  width: calc(100% - 200px);
}

ってやると、100%幅 - 200pxの横幅を指定できるってわけ。
こいつは便利だ。
そしてうれしいことに、IE9以上が対応してること。
今の時代ならもう使うことになんの抵抗もない。

まぁ、知ってる人多いと思うからね、
二つくらいチップスをやろうかと思う。

・ボックスの縦位置真ん中に画像
※画像の大きさは、一定ではないとする

<p class="centerImage">
  <a href="test/"><img src="test_image.jpg" width="300" height="150" alt="Test image"></a>
</p>

.centerImage {
  background-color: #CCC;
  padding: 320px 0 0;
  position: relative;
  text-align: center;
  width: 320px;
}
.centerImage > a {
  display: block;
  height: calc(100% - 20px);
  left: 10px;
  position: absolute;
  top: 10px;
  width: calc(100% - 19px);
}
.centerImage > a:after,
.centerImage > a > img { vertical-align: middle;}
.centerImage > a > img {
  height: auto;
  max-height: 100%;
  max-width: calc(100% - 1px);
  width: auto;
}
.centerImage > a:after {
  content: '';
  display: inline-block;
  height: 100%;
  width: 1px;
}

after疑似要素もうまく使ってやってます。
display: teble-cellを使う方法もあるが、
そっちより、こっちのが俄然安定する。
また、画像大きさが固定なら、もっと単純にできるしね。
top: calc(50% - 25px)とかでできちゃいます。

・高さいっぱいいっぱいにブロック
※固定ヘッダーとかがあるパターン

<header>ヘッダー的な内容<header>
<div id="pageBody">
  <div id="container">
    <aside>
      <nav>
        リンクとか
      </nav>
    </aside>
    <section>
      内容とか
    </section>
  </div>
</div>

header {
  height: 50px;
  position: fixed;
  width: 100%;
}
#pageBody {
  box-sizing: border-box;
  height: 100%;
  padding: 50px 0 0;
  width: 100%;
}
#container {
  height: calc(100% - 50px);
  position: relative;
}
#container > aside {
  background-color: #CCC;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}
#container > section {
  background-color: #CCC;
  margin: 0 0 0 200px;
  height: 100%;
}

calcを使って、100%からheaderの高さ分を削ってるわけだ。
これを使えば、今まで難しかった、左右のブロックの高さを揃えてるかつ、ページいっぱいいっぱいの高さのブロックなんかが、
CSSだけでできる。

便利な時代になったもんや。
transitionとかもあるし、あまりJS使う機会もなくなるかもしらん勢い。

CSS3はマジで要習得やな。