今日は、HTML5、CSSについて書きたいと思います。
昨日、苦労して見つけ出したので、苦労を無駄にしないためにも。
参考書は電子書籍Koboの
『HTML5 レベル1 これ1冊で一発クリア テキスト＆問題集』 著者：吉川 徹／窪田 則子／秋葉 秀樹／白石 俊平
です。
昨日、苦労して見つけ出したので、苦労を無駄にしないためにも。
参考書は電子書籍Koboの
『HTML5 レベル1 これ1冊で一発クリア テキスト＆問題集』 著者：吉川 徹／窪田 則子／秋葉 秀樹／白石 俊平
です。
- 【お買い物マラソンで使える・500円クーポン配布中！】HTML5レベル1／吉川徹／窪田則子／秋...
- ￥3,672
- 楽天
こちらの書籍は、「HTML5プロフェッショナル認定試験学習書」「LPI-Japan HTML5認定教材」なのだそうです。よくわかりませんが、興味ある方は、検索してみてください。
こちらの本の263ページにある《counter-increment》について
div.counter p{
counter-increment: mycount00;/*←こちらの「mycount00」は好きな文字列で構いません。*/
/*もしかしたら全角日本語↑でも作動するかもしれませんが自己責任で*/
} - div.counter p::before {
content:counter(mycount00) " つ目 ";
margin-right: 1em;
} - div.counter p:nth-child(3n+1) {
counter-reset: mycount00;
background-color: #efefef;
}
本に書いてあるものを少し改良してみました。判りますか？
これは、divの中の子要素ｐに何つ目のｐ要素なのかを表示し、
4つ目のｐ要素でカウンターをリセットするコードです。
-----[ちょい脱線]--------------------------------------------------------------------
ちなみに nth-child に似たような
nth-of-type
があります。これは、指定した要素のみをカウントします。
nth-child
は、すべての子要素をカウントします。しかし、作用するのは、指定した要素のみです。
ゆえにｐ要素以外の行には「○つ目」という表示はされません。
難しいですねぇ。頭、こんがらがっちゃいます（笑）
------[Eo脱線]--------------------------------------------------------------------
まず、先頭にdivを書き加えました。これによりdivの子要素のみをカウントすることができます。
しかし、divタグに直接クラスを書き込めば、先頭のdivは書く必要はありませんね(;´･ω･)
今、気づきました( ´∀｀ )
・・・・さぁ、次行きましょう。そして最も注目すべきなのが、ここ
nth-child(3n+1)
なぜ、このように表記したかわかりますか？？
もしも・・・
nth-child(4)
と表記した場合、カウンターは『１回しかリセットしてくれない』んです！！
後に続く数字は永遠に増え続けてしまうんですねぇ。
素人なのですが、おそらく数値に「ｎ」を付けることで、きちんと戻ってプログラムが考えてくれる？？のだと思います。
どうですか？ためになりましたでしょうか？ではでは！