にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2015/09/22. 13:19:32.

偶数番目・奇数番目とか「n番目」に限定して装飾するCSS

CSS3で偶数行・奇数行など「n番目」を限定装飾する(@All About ホームページ作成)でかい表とか、長いリストを掲載するときには、1行おきに背景色を変化させると見やすいんですよね。1行おきに、うっすらと灰色の背景色を加えておくだけでも、見やすさが全然違います。
というわけで、ウェブ上に表を掲載するときには、ぜひとも加えておきたい装飾です。

CSS3で新しく追加された『nth-child 疑似クラス』をサポートしているブラウザなら、HTML側にまったく手を加えることなく、スタイルシートだけでそんな装飾が実現できます。
IE9を含め、モダンブラウザの最新版ならどれもサポートしております。

この nth-child疑似クラス というのが、なかなか高機能で、数式っぽい表現を使って装飾対象を限定できます。

  • 偶数行だけを装飾 → nth-child( 2n )
  • 奇数行だけを装飾 → nth-child( 2n+1 )

とか、

  • 先頭から3つだけを装飾 → nth-child( -n+3 )
  • 先頭から4番目以降を装飾 → nth-child( n+4 )

とか。いろいろできて面白いです。
そんな、装飾対象を位置や順序で限定できる nth-child疑似クラスの解説記事をAll Aboutで公開しましたです。

偶数行・奇数行など「n番目」に限定して装飾するCSS(@All About ホームページ作成)

「nth-child」疑似クラスの「nth」って何の略だろうかと思ったら、W3Cサイトに『the n-th child of its parent』って書いてありました。
略じゃなくて、「 n番目 」という意味の英語表現なんですね。
辞書で調べたところ、ハイフンなしの「nth」で「n番目」と載っておりました。
「~番目」を表す「th」に、変数「n」をくっつけて、「 n-th 」となるらしいです。
英語では、そういう表現になるんですねえ。

「nth」で辞書を引くと、「n番目の, n倍の, n次の」と意味が載っていました。
英語で普通に使われる表現なんですね。
「n-th」とも書くと紹介している辞書もありましたが、複数の辞書で項目名は「nth」だったので、ハイフンはない方が普通なのかな。

日本語の場合、別に「n番目」でなくても、「x番目」とか「y番目」とか言っても意味は通じると思うんですが、英語では「nth」と書くしかないのでしょうかね……?
と思ったら、

そこは別にi-thでもいいけど、nは(natural) numberの略として自然数が入ることを示唆して使われるのが普通だからかな。

という返信を頂きました。
なるへそ。

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。

保存しますか?



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※投稿内容は、実際にページ上に掲載される前に、管理者によって確認される設定にしている場合があります。その場合は、投稿後にその旨が表示されます。たいてい1~2日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

トラックバック

このエントリーへのトラックバックURLを表示するにはここをクリック
※スパム防止のため、トラックバックURLは別ウインドウで表示します。(JavaScriptが有効でないと表示されません。)

--- 当サイト内を検索 ---