※この記事は8年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
どうもエナジードリンク飲みすぎで、
寿命が縮まってるんじゃないか疑惑のみやびです。
さて、さっそく表記をやっていこうか。
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はマジで要習得やな。
コメントする