一度知ったら使わずにはいられない、cssの小技3選

今日は珍しくお仕事の話でも。
私の主なお仕事は、webサイトのデザインとコーディング。
基本的にデザインをするときは、コーディングのやりやすさも意識しながらデザインをしているのでそれほど問題は起こりません。
ただ稀に、デザインにこだわりすぎたあまり、こんな困ったことが。

・コーディングに時間がかかりすぎる・・・
・デザインを実現するために複雑なソースコードになってしまった・・・
・複雑なソースコードになった結果、一部のブラウザでレイアウトが崩れた・・・

特に最近はレスポンシブ案件が増えてきて、複雑になりやすく、また問題も起こりやすいです。
ということで今日は、少しでも効率よくシンプルに書くための、神ってる！css小技をご紹介！！

とても専門的なお話ですので、コーダーさん以外の方は回れ右されることをおすすめします。

１：calc()

width（幅）をパーセント指定する時にとても重宝する、calc()！
calc()は計算を可能にするもので、レスポンシブ案件で使わない日はありません！
widthを100%表示にした時、padding（余白）を設定していて画面からはみ出した！という経験、コーダーさんなら誰しも一度はされているはず。
以前はpadding分を考慮してwidthを98%くらいにしてみたり、padding用にブロックを追加してみたりといったこともありましたが、calc()を使えばその必要はありません。
100%からpadding分を引いた値を指定することができるのです。

.sample1-1{
     width: calc(100% - 20px);
     padding: 0 10px;
}

他にも、横並びに3つのブロックを配置したいとき、以前ならwidthを33%に指定して、1%余るの気持ち悪い！と思っていましたが、そんなことももうありません。
100%を3等分した値を指定したらいいのです。

.sample1-2{
     display: inline-block;
     width: calc(100% / 3);
}

計算は、足し算、引き算、掛け算、割り算が可能。

足し算　+
引き算　-
掛け算　*
割り算　/

width以外でも使えます！
こちらのサイトでご紹介されている、フォントサイズでの使い方は目からウロコでした！

２：flexbox

小技紹介ブログでは紹介しきれない要素が詰まっているのがflexbox。
むしろ大技と言っていい勢いなので今回はさわりだけのご紹介。
flexboxはフレキシブルなボックス、つまり柔軟な箱、ということなんですけども、とにかくブロックを横並びにしたいときに便利です。
横並びをさせるには、floatを使ったり、display:inline-block;、display:table;にするなど方法がいくつかありますが、私が思うflexboxの利点として、「折り返すかどうかの指定ができ、かつ、ブロックの高さが揃えられる」ということにあると思います。
floatとdisplay:inline-block;では、はみ出す分は折り返しとなり、また高さも決め打ちしないと揃いません。
display: table;は高さは揃いますが、折り返すことができません。
このちょっと融通が効かないところを柔軟に対応してくれるのがflexboxのいいところではないかと思います。

横並びをするだけなら、こう。

<ul class="sample2">
     <li>メニュー１</li>
     <li>メニュー２</li>
</ul>

.sample2{
     display: flex;
}

親要素にdisplay:flex;を設定するだけ。
デフォルトでは折り返さないので、もし折り返しさせる場合はこう。

.sample2{
     display: flex;
     flex-wrap: wrap;
}

シンプルですね！
ただし、先ほど大技と言ったようにflexboxは柔軟にいろんなことができます。
横並びに限らず縦並び、HTMLをいじらずに要素の順番の並び替え、親要素に対して等間隔にぴっちりはまるよう設定もでき、場合によっては逆に複雑になってしまうこともあるので、注意が必要です。

こちらのサイトでとても詳しく解説されています！

３：vw、vh

知っておいて損はないのが、vw、vh。
これは、ブラウザのビューポートに基づく単位のことです。
webサイトでサイズを指定する場合は、ピクセルやパーセントで指定することが多いですが、ブラウザのサイズを基として指定したい場合に使います。
ちなみに、vmin、vmaxという単位もありますが、今回は割愛。

ブラウザのサイズいっぱいに指定したい場合はこう。

.sample3-1{
     width: 100vw;
     height: 100vh;
}

高さだけブラウザの半分のサイズにしたい場合はこう。

.sample3-2{
     width: 100vw;
     height: 50vh;
}

パーセント指定とそんなに変わらないのでは・・・とも思いますが、スクロールバーが入るか入らないかの違いがあります。
vw、vhだと、ブラウザの画面サイズなので、スクロールバー込みのサイズとなります。

使い所としては、スクロールしても固定で画面サイズいっぱいに背景画像を表示したい時に重宝しました。

こちらのサイトでは実例をふまえてご紹介されています！

意図せずどれも幅と高さの話になってしまいましたが、いかがでしたでしょうか。
少しでもコーディングの効率化につながれば幸いです！