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

Presented by Nishishi via Movable Type. Last Updated: 2017/06/21. 12:24:50.

偶数番目・奇数番目とか「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は書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

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