CSSのリスト（ul,li）は、基本的にWebデザインで箇条書きといった表現をする場合に使用します。
しかし、そのデザイン・装飾はCSSはもちろん、疑似要素・疑似クラスを利用することでさらに柔軟に表現することができます。
それは、例えばボックスをリスト化して横に並べたり、要素の順番を指定して装飾する…なんてことも可能です。
では、今回はそんなCSSのリストを利用したデザインの便利な方法を簡単にまとめてみたいと思います。
この辺は使い方が色々とありますからね、個人的にコーディングでよく使うものや特に便利に使っているものを中心にご紹介してきたいと思います。
疑似クラス
リンクの装飾をする:hoverなんかが昔から馴染みのある疑似クラスのひとつです。
そして、他にも様々な疑似クラスが用意されていますが、私が特に便利に使っているリストの何番目の要素…といった感じで要素を指定して装飾することなんかもきるんですねー！
例えばこのように記述してみると…
<style>
ul.test li:first-child {background:#ccc;}/*最初の要素*/
ul.test li:nth-child(2) {color:#f00;}/*2番目の要素*/
ul.test li:nth-child(odd) {font-weight:bold;}/*奇数の要素*/
</style>
<ul class="test">
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
</ul>
このように表示されます。
- 1番目の要素
- 2番目の要素
- 3番目の要素
最初のリストは奇数のスタイルも適応されていることがわかりますね。
これらの疑似クラスをうまく利用することで動的とまではいきませんが、簡単にリストなどの偶数や奇数の要素や、最初や最後、または何番目…といった指定までも行うことができます。
そのため、ひとつひとつにクラスを付与して装飾する必要がなくなり、その結果htmlをシンプルに保つことができます。（これは私もよく使います。）
クラス指定していないのに擬似的にスタイルを適応させることができる…といったところでしょうか？
では、私がよく使う疑似クラスについてご紹介します。
:first-child :last-child
li:first-child {margin-top:0;}
これはよく使いますね。最初の子要素、または最後の子要素にスタイルを指定する疑似クラスです。これを利用することで、リストに設定したマージンを最初の要素だけ異なる設定にしたり…といった使い方ができます。
別にクラス名を付与して、スタイルを設定することなく装飾することができます。
また、後程ご紹介する疑似要素なんかも一緒に使うことでさらに幅広いデザインが簡単に表現することが可能となります。
:nth-child(n)
li:nth-child(4) {background:#ccc;}
この疑似クラスでは、(n)のところにスタイルを適応させたい子要素が現れる数字を入力して設定します。
これによって、上記の例だと…4番目のリストに異なる背景色を指定する、という指定ができるというものです。
他にも「:nth-child(even)」と指定することで偶数要素を指定したり、「:nth-child(odd)」で奇数要素を指定することも可能です。※（2n）や(2n+1)といった書き方でも偶数・奇数を指定できます。
また、(n+4)という書き方の場合は、4番目以降の要素にスタイルを適応させるという指定となります。これは個人的にはあまり使わないので、こんなこともできるということだけ覚えておきましょう。
さらに、これはリスト以外にも子要素にCSSを適応させることができるため、divボックス自体を指定してスタイルを装飾することも可能です。
これを利用すると、横並びにしたボックスの一番右の崩れてしまう原因となるマージンを0にするスタイルを適応させるといったことも簡単にできちゃいますね！
:nth-child(n)の注意点
この疑似クラスを使用する際の注意点としては、つい最近私もやってしまったんですが。。指定したい要素が現れる前に、見出しといった他の要素があると正しくスタイルが効きません。
下記のように<div class=”test”>の中で2番目に現れるdiv要素に適応させるために:nth-child(2)と指定してもこの場合、効きません。それは種類に関係なく要素を数えてしまうからです。（この場合、h4の要素も含めて数えてしまうため、最初のdivに適応されます。）
<div class="test"> <h4>要素の見出し</h4> <div>要素</div> <div>要素</div> </div>
このような場合は、さらに要素の種類を指定することができる:nth-of-type(n)を使用して設定しましょう。
先ほどご紹介した:first-childの場合は、:first-of-typeで要素の種類まで指定することができます。これで思い通りの場所にスタイルを適応させることができます。
数える要素の間に他の要素がある場合は、別の指定が必要だということを覚えておくと便利です。
これを使いこなすとhtmlではリストですが、見た目はボックスで組んでるように見せることもできるので、非常に便利に管理・表現することができます。
ぜひ、覚えておきましょう。
疑似要素
続いて疑似要素についての便利な指定方法です。
リストにはよくリストマークを付けて表現することが多いと思いますが、リストにスタイルを利用して「fontawesome」のようなWebフォントを適応させることも便利に使う方法のひとつですね！
そんな場合は、この:beforeで要素の前に表示させる指定や:afterで要素の後に表示させることができる疑似要素を利用します。
こちらは、先ほどのようにクラスを指定していないのにスタイルを適応させるという意味とは若干異なり、要素の前や後ろにアイコンなどの要素を配置する…といったところでしょう。
:before :after
この疑似要素はリストに限った装飾ではありませんが、引用の「“”」を表示させたり、divボックスの前後に透過のPNGを配置するといったグリッドレスなデザインにも柔軟に対応させることができます。（positionを利用することで配置する場所はpx単位で指定できます。）
また、ボーダーの特徴を生かして以下のような三角形を画像なしで表現することもできちゃうんですねー！便利！
スマホ対応は今や必須ですからね！こういった表現はどんどん活用していきたいところです。
まとめ
いかがでしたか？全てdivボックスで組むとhtmlがごちゃごちゃしてしまうデザインもたまにありますので、そういった場合はリストで組んで、今回のように疑似クラスなどを工夫して表現することで極力シンプルに作ることができます。
この辺りを理解しておけば、Webデザインを考える際に組む時のことまでを考えてレイアウトを考えるので、結果組みやすくシンプルにまとめることができるようになります。
ということを繰り返していくとデザインを見ただけで、どう組んだら効率的なのか頭の中で設計することもできるようになります。
ぜひぜひ参考にしてみてくださいね！
