初心者向け！知っておくと超便利で頻出するCSS４選

CSSのプロパティなどの使い方ってものすごく多くて一気に全部勉強するのには無理がありますよね。

中にはほとんど使わないものもありますし。ただ知らなかっただけで知ることによって頻繁に使うようになる便利なCSSもあるわけです。ですのでこの記事では、初心者向けに“これを知っていたら便利でよく使うようになりまっせ”的なCSSを４つご紹介します。

値を計算式で出力できるcalc関数

widthやpaddingなどで指定するpx値に、calc関数を使うと計算式を使うことができるようになります。計算式としては、足し算、引き算、掛け算、割り算が使えますが、これがとても便利です。

用途としては様々ありますが、WebサイトをコーディングしているとCSSで要素の横幅を計算できたらいいなと思うことがよくありますよね。例えば左右にボックスをわけて、左側のボックスを固定幅にして、右側のボックスを画面幅に応じて自由に伸縮したい場合があります。

このような時にcalc関数の出番です。例えば左側の固定したいボックスをwidth:200px;として、右側を自由に変えるためには、右側のボックスに次のようなCSSを記述します。

width:calc(100% – 200px);

計算式の通りで、親要素の100%幅から200pxを差し引いた値が右側のwidthに指定されます。簡単に図説すると下図のようになります。

px計算が楽に！paddingやborderをwidthの内側に作るbox-sizing

box-sizingプロパティにborder-boxを設定しておくと、widthにpaddingやborderを含まないようにすることができます。

例えばbox-sizingプロパティに何も設定せず、

width:200px;
height:200px;
padding:30px;

とするとボックス全体の幅がpaddingを含む260pxになります。

box-sizingの初期値はcontent-boxなので、この場合、box-sizing:content-box;が上記には適用されていますが、

box-sizing:content-box;はwidthで指定した幅の外側にpaddingやborderを作ります。（例ではborderを入れていません）

しかしこのようにしていると、ボックス全体の幅を知りたいときに、paddingやborderとwidthの値を計算してボックス全体の幅を考えなければなりません。複数のボックスを特定の幅に横並びで並べたい時など、１つのボックス全体幅を考える時にわざわざpaddingとborderをいくつに設定しているか考慮する必要があって面倒です。

ところが、border-box:box-sizing;を使うと非常に便利になります。

border-box:box-sizing;
width:200px;
height:200px;
padding:30px;

このようにするとボックス全体の幅がpaddingを含んでもwidthで指定した200pxのままになります。

box-sizingにbox-sizingを設定すると、widthで指定した幅の内側にpaddingやborderを作ります。（例ではborderを入れていません）

例ではpaddingについて出しましたが、borderも同じ話で、width:100px;にborder:10px;とするとbox-sizingを何も指定しないとボックス全体の幅が120px（左右にborderがつくため）になりますが、box-sizing:border-box;を指定していると、ボックス全体の幅は100pxになり、内側にborderがつきます。つまりテキストなどのコンテンツが入るスペースは80pxの幅になるということですね。

擬似クラスでn番目の要素だけに特定のCSSを付与

擬似クラスを活用してn番目の要素限定でCSSを調整することができます。例えばulのliを使った場合、liがずらっと並びますよね。liの一番最初だけ、最後だけ、n番目の要素だけ、のように指定してCSSを適用します。他にも偶数、奇数番目の場合、後ろから何番目、など色々あります。

一番最初の要素だけに適用する:first-child

前提として以下のようなHTMLがあったとします。

一番最初の要素、つまりTOPの部分だけにCSSを適用したい場合は、

li:first-child{
〜〜〜〜〜
}

とします。

一番最後の要素だけに適用する:last-child

li:last-child{
〜〜〜〜〜
}

n番目の要素だけに適用する:nth-child(n)

例えば2番目のliに対して適用するのであれば下記です。

li:nth-child(2){
〜〜〜〜〜
}

偶数要素だけに適用する:nth-child(even)

li:nth-child(even){
〜〜〜〜〜
}

奇数要素だけに適用する:nth-child(odd)

li:nth-child(odd){
〜〜〜〜〜
}

倍数要素だけに適用する:nth-child(Xn)

例えば2の倍数なら下記です。

li:nth-child(2n){
〜〜〜〜〜
}

他にも計算式を入れたり、後ろから何番目かを指定するなど、たくさんの使い方があります。

実際の使い方例

例えばスマホのハンバーガーメニューで縦にメニューを並べたりする時に次のような記述をすることがあると思います。

１つ１つのメニュー（li）の下に下線を引きたい場合、ul li{border-bottom:1px dotted #aaa;}などのように指定しますよね。ただ、この場合、一番最後のliに下線を引きたくないケースも出てきます。

その場合に下記のようにして一番最後の要素だけにborder-bottom:none;を指定します。

ul li:last-child{
border-bottom:1px dotted #aaa;
}

:nth-child(n) と :nth-of-type(n) の違い

実は:nth-child(n) 以外に :nth-of-type(n)というのもあります。この違いだけ簡単に説明をします。

• :nth-of-type(n) → n番目のその要素に対して適用
• :nth-child(n) → 要素の種類に関わらずn番目に適用

実際に例を出して解説します。下のようなHTMLがあったとします。

div.contentの中にpタグとdivタグが混じっていますよね。

cssをそれぞれ適用するとどうなるかを解説します。

p:nth-child(3)

下記のようにCSSを記述すると、要素に関係なく3番目のpに対して赤色を設定するのですが、3番目はdivなので、CSSは何も適用されません。

div.content p:nth-child(3){
    color: red;
}

p:nth-child(4)

下記のようにCSSを記述すると、要素に関係なく4番目のpに対して赤色を設定しますので、4番目にあるp要素「それではまた」が赤色になります。

div.content p:nth-child(4){
    color: red;
}

p:nth-of-type(3)

下記のようにCSSを記述すると、3番目の“その種類の要素”に対して赤色を設定しますので、つまり３番目のpタグ「それではまた」が赤色になります。

div.content p:nth-of-type(3){
    color: red;
}

max-widthで画像がはみ出ないようにする

画像を置く時に、画像を適切なサイズで表示させたいけど、画面幅を縮小した時に画像がはみ出るのはNGというケースはよくあります。対処法は簡単で次のように記述します。

img{
max-width:100%;
height:auto;
}

max-widthは最大幅を決めることができるプロパティです。もちろん100%でなくても、pxで指定することもできますので、指定サイズ以上の幅に広げたくない場合に使える便利なプロパティです。

他にもmin-widthもあって、max-widthと逆の概念で、最低でも200px確保したい場合は、min-width:200px;のように記述します。

何か工夫はできないか？そんな視点でCSSプロパティを学ぼう

CSSを学ぶ時は、もっと楽にできないか？何かあるはずだろう！そんな視点で学んで見て下さい。人が作ったWebサイトのソースコードを見るのもすごく勉強になりますし、「CSS 便利」などで検索すると色んなまとめ記事も出てきますので、それらを見るだけでもとても勉強になります。