読者です 読者をやめる 読者になる 読者になる

水に溶けるドキュメント

水に溶けるってことはつまりそういうこと

CSSでFizzBuzzの解答集に載ってしまったので……

id:mon_tinian さんより

CSSFizzBuzzはやったことなかったので、いろいろ勉強になりました。

そして、解答集の方に私のはてブ(以下ツイートしたの)が載ってしまったのです。

font-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で書いてます。