CSS基礎編 vol.4 | Webデザイナーを目指す人のブログ

擬似クラス

先日擬似クラスについて書きましたが、まだまだ種類があるので、
今日はある子要素のうち特定の順番にあるものを指定する擬似クラスについて書いていきます。
ここでは下のhtmlを利用して説明していきます。

<html>
  <header>
  </header>
  <body>
    <ul>
      <li>1番目</li>
      <li class="target">2番目</li>
      <li>3番目</li>
      <li>4番目</li>
      <li>5番目</li>
    </ul>
    <ul>
      <li>リスト</li>
    </ul>
  </body>
</html>

:first-child

:first-childでは一番最初に出てきた要素のみを指定することができます。

li:first-child {
color:red;
}

とすると

1番目
2番目
3番目
4番目
5番目

リスト

となります。

:last-child

:last-childでは先ほどと逆で一番最後に出てきた要素のみを指定することができます。

li:last-child {
color:red;
}

とすると

1番目
2番目
3番目
4番目
5番目

リスト

となります。

:nth-child()

:nth-child()では()の中にいれた数字が示す要素のみを指定することができます。
例えば3番目だけを指定したいときは

li:nth-child(3) {
color:red;
}

とすると

1番目
2番目
3番目
4番目
5番目

リスト

となります。
()に入る値は数字の他に
奇数番目を指定するodd
偶数番目を指定するeven
3n+1などの自然数
を入れることが出来ます。

なお、:nth-last-child()にすることで最後から数えてx番目の子要素を指定することが出来ます。

また、これまであげた例は子要素が全て隣接している必要がありましたが、
:nth-of-childを使うことで他の要素が途中にあったとしてもx番目のli要素を選択することが出来ます。

:only-child

:only-childでは子要素一つだけの時に適用されます。

li:only-child {
color:red;
}

とすると

1番目
2番目
3番目
4番目
5番目

リスト

となります。

border-radius

border-radiusを使うことでこのように四角いボックスや画像の角を丸くすることができます。

border-radius:20px;　としたときのボックス

単位はpxやem、％が使えて、border-radius:50%;　にすると丸くすることもできます。

これを画像に応用することも可能です。

こういう画像があったとき

img { 
border-radius: 50%;
width:100px;
height:100px;
}

と指定すると

このようになります。

background-size

background-sizeを用いることで背景の大きさを指定することができます。

　　html
 <div class="box"></div>

 css
 .box {
  background:url('http://tvit.main.jp/blog/wp-content/uploads/2017/05/9869260ce6920c13c2fc78ef2adee9d0_s-300x200.jpg') no-repeat #68b59d;
  width:100%;
  height:200px;"
 }

というhtmlとcssを用意しました。このように表示されます。

background-sizeはpxや％で設定していきます。
１つの値を指定すれば横幅の指定、２つの値を指定すれば横幅と縦幅の指定になります。

 .box {
  background-size:100%;
 }

これは横幅を100%ということになり、

このように表示されます。

 .box {
  background-size:50% 100%;
 }

この場合は横幅が半分、縦幅が100%となり、

このように表示されます。

また、background-sizeはpxと%の他にもcoverとcontainという値が用意されています。

cover

coverを使うと画像の縦横比を保ちつつ、背景領域全体に画像を表示されます。
ただ、縦横比を保つ関係で画像全体が表示されない場合もあるので注意が必要です。

 .box {
  background-size:cover;
 }

contain

containを使うと画像の縦横比を保ちつつ、必ず画像の全体が表示されるようになります。

 .box {
  background-size:contain;
  height: 100px;
 }

画像の位置を調整するのはbackground-positionで可能です。

以上、擬似クラスとborder-radius、background-sizeについてのまとめでした。