別院)この広告は、90日以上更新していないブログに表示しています。2014-02-18【解答集できました】どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題)技術系の記事でも、ややふざけ気味のものについては、はてなブログで書くという習慣がついてきました。(今回はマジメにいきますよ)というわけで前回の記事「どうしてwebデザイナーに・・・CSSが書けないのか?(またはCSSでFizzBuzz問題)」がおかげさまで好評で、いくつか反響もいただいているので、そちらをご紹介していきたいと思います。CSSを書くのが好きな方で上記の記事を未読の方は、先に問題を解いてみてくださいね。いただいた解答例はてぶやtwitterで解答をいただいたものについて紹介していきますね。捕捉できていない人がもしいたらごめんなさいーあとわたし別にCSSが得意というわけではありませんので、CSSてきなツッコミについてはお腹いっぱいですのでご容赦ください。(id:syunki-gt)さんです。載せたらまずいという時は、ご連絡ください。コードを載せることに問題は発生しにくいかなと思ったけど、ちょっと不安なので。いう気遣いもいただきました。FizzBuzz問題のポイントは概ね以下の点でしょう。使用するかのどちらかでしょう。プロパティを指定して書きだすというのが常套手段と思われます。それ以外の方法はあるんでしょうかね??その他の点に注目して各解答を見て勉強していきたいと思います。実際のコードは記事の方でご確認ください。100点満点の解答がでてとてもびっくりです。良い場合は、以下でいけるようです。list-item;}もしくは後述するsmzkさんのfizz_buzz.htmlと同様の実装かもしれません。がたに(id:Nagatani)さん:nth-child(15n)を使わずに::before,::afterで実装する方法を考えたけどfont-sizeで文字消してる関係でリストのマーカーがうまく表示されずに妥協これは完全にわたしの解答例と一緒ですね。(後述)ちょっと違っていたようです。文でやるばあい15の倍数を先に判定する3の倍数と5の倍数のみ判定し、15の倍数のときは両者を利用する(文字列結合等)という感じです。後者でやりたいというのが人情というものではありませんか?(個人の感想です)というわけでわたしもこの実装です。この場合どうしてもリストマークが消えてしまいます。どなたか消えない方法をご存じの方はぜひ。コルクことkoluku。koluku°これSEO的に悪いんだよぁ...まぁCSSで書き換える時点でSEOに悪いですが。ことで、はい、そうですね。FizzもBuzzも現時点ではどの検索エンジンも捕捉しないでしょうねw面白いのは、数字の消し方ですね。組み合わせて背景色で消しています。こんな消し方思いつきませんでした。MasablogなんとSass使って解いてくれた方も!おー。こんなに本格的に書いたことなかったので、使ってみたくなってきました。CSSてきには基本的な実装で、visibilityで表示を制御していますね。Noda(github:sys9kdr)さんfizz_buzz.htmlつづいてgistをforkしていただいたsys9kdrさんです。いうことで、CSS3の擬似要素の記述法で記述されていますね。smzkさんfizz_buzz.htmlこちらもgistをforkしてくれました。することでリストマークが消えないように工夫されていますね。知らなかったのですが、応用的な使い方すぎて知っていてもこういう使い方に気づかなかったと思います。追記Re:どうしてwebデザイナーに・・・CSSが書けないのか?gistで解答していただきました。3,5とかよりも、数字を隠してFizzBuzzを表示させるほうがよっぽどたいへんwですよねー。