CSSでFizzBuzzの解答集に載ってしまったので……
id:mon_tinian さんより
- どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院）
- 【解答集できました】どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題） - mon_sat at Co-Edo（半年前の自分への教科書 / 別院）
CSSでFizzBuzzはやったことなかったので、いろいろ勉強になりました。
そして、解答集の方に私のはてブ（以下ツイートしたの）が載ってしまったのです。
:nth-child(15n)を使わずに::before,::afterで実装する方法を考えたけどfont-sizeで文字消してる関係でリストのマーカーがうまく表示されずに妥協 / “どうしてwebデザイナーに・・・CSSが書けな…” http://t.co/3KdA5wFStO
— ながたには静かに暮らしたい (@Nagatani) 2014, 2月 8font-size: 0;を使い、かつリストマーカーを消さない方法の妥協案として、:nth-child(15n)を使って書いた方法が以下のとおりです。
解答集には載っていないので、こっちで書いておきます。
追記： 2014-02-18 18:19
よくよく考えたら、CSSが冗長だったので、最適化しました。
追記ここまで。
display: list-item;を使って、::beforeの擬似要素をリストアイテムとして表示させています。
:nth-child(15n)を使わずに書いた方法だと解答集のとおりなので割愛。
で、いろいろ考えてもやっぱりCSSでHTMLの要素の中身を書き換えるのはなんかアレなので、数字をHTMLに書かず、CSSに全部やらせてみたのが以下の方法。
<li></li>を100個書くのめんどかったのでJavaScriptで書いてます。
