今回は、実際にお仕事で関わらせてもらったtredinaで使っているパーツをひとつ紹介します。
ユーザーとサロンがつながる tredina
PC版でアクセスしたときホーム画面で表示されるランキングのパーツ。
スマホでご覧になっている方はすみません、あとでPCで見てください…
9/1現在のtredina（PCブラウザ版）は9位までの表示となっていてスライドしないのですが、これを10位以降も右に並べて隠しておき、スライドで表示させる想定です。
ちょっと悩むポイントは、10位以降は2～9位と同じボックスを並べるので、1位の含まれる領域とは配置が変わってしまうこと。
表示領域ごとに、上段、下段を設定しないといけないということですね。
まずは、codepenでhtmlソースを見てください。
See the Pen ranking-list slider by natsumi (@mayo31) on CodePen.18228
フル表示したい場合はこちら（新規タブで開きます）
ランキングスライダー
このように、idもclassもなにもない空っぽのol>li>aです。
各ボックスの配置は、すべて:nth-childを使って設定しています。
せっかくなので少しソースを触ってみてください。
現状はスライドさせるボタンを21位までの左右1往復分しか設定してないので見れませんが、liは50個あります。
#ranking-slide > :not(a) {
overflow: hidden;
white-space: nowrap;
}
14～17行目が上記のようになっていますが、overflowの値をscrollに変えて確認してもらうと、10位以降が12個ごとのレイアウトになっているのがわかると思います。
CSS側を毎回調整しなくても、何個のリストでも対応できるようになっています。
:nth-child疑似クラスとは
li:first-childならば、そのli要素が兄弟要素の中で1番目の要素だったとき、li:last-childならば、最後の要素だったとき、とわかりやすいですね。
じゃあnthってなによ…(´・ω・｀)
よく数学などで「自然数n」なんていって、そのとき定まっていない「数」を表すのにnを使ったりします。
また、first,second,thirdのあと、4つめ以降はfourth、fifth、と数えていきます。
つまり、10周年！なんてときに「10th」と表記するあれの、数が定まっていない版がnthだ！
と考えれば得心がいきますね。( ﾟдﾟ)ｳﾑ
調べてないけどたぶんnumberのnだと思う。
気になる人はぐぐって私に教えてください。
で、li:nth-child(5)というセレクタなら、「そのliが兄弟要素の中で5番目の要素なとき～」という指定ができるのですが、ここでひと工夫必要になります。
たとえば5番目以降をすべて対象にしたかったら、
li:nth-child(5),
li:nth-child(6),
li:nth-child(7),
li:nth-child(8)…ってやってられないですよね。
コンテンツによっては1000個以上あるようなリストかもしれません。検索結果などの不特定の件数を表示するときは、上限が決まってないわけだから、後ろのほうが足りなくなるかもしれませんね。
そこで使いたいのがこれ。
li:nth-child(n+5) {/* ここにスタイルを記述 */}
インデックスを式にすることで何番目以降～なんていう指定が可能になります。
nは0のときもあるので、0+5=5から始まり、1だったら1+5=6、といった感じで5番目以降が条件に当てはまり続けていくので、たった1セレクタで済んでしまうわけですね～(´∀｀*)ｳﾌﾌ便利
反対に、5番目までとしたかったら、
li:nth-child(-n+5) {/* ここにスタイルを記述 */}
と書けば、負の整数+5、たとえば-1+5=4、-0+5=5、となり、どうがんばっても6以上は条件に当てはまりません。-10+5だったら-5で、そんなインデックスの要素はないのでもちろん何も起きません。
私は数学がとても苦手だったんですが、今ならわかる、わかるぞ…
「倍数」を示す時、なぜ n を使うの？