【解答集できました】どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題）

このエントリーをはてなブックマークに追加
  • 技術系の記事でも、ややふざけ気味のものについては、はてなブログで書くという習慣がついてきました。 （今回はマジメにいきますよ）

というわけで前回の記事「どうしてwebデザイナーに・・・CSSが書けないのか？（またはCSSでFizzBuzz問題）」がおかげさまで好評で、いくつか反響もいただいているので、そちらをご紹介していきたいと思います。

もしCSSを書くのが好きな方で上記の記事を未読の方は、先に問題を解いてみてくださいね。

いただいた解答例

はてぶやtwitterで解答をいただいたものについて紹介していきますね。

捕捉できていない人がもしいたらごめんなさいー

あとわたし別にCSSが得意というわけではありませんので、CSSてきなツッコミについてはお腹いっぱいですのでご容赦ください。 nth-child()なんて実際に使ったことなんて無いし

瞬希 (id:syunki-gt) さん

「CSSでFizzBuzz問題」への回答案 - 灰色の棚

まずはすぐに解答記事を書いてくれた瞬希 (id:syunki-gt)さんです。

もし、載せたらまずいという時は、ご連絡ください。撤去します。 コードを載せることに問題は発生しにくいかなと思ったけど、ちょっと不安なので。

という気遣いもいただきました。 が、こんなネタ記事に気遣いは不要です

このCSS FizzBuzz問題のポイントは概ね以下の点でしょう。

  1. どのようにして3(5)の倍数および15の倍数の書かれた要素を指定するか
  2. どのようにして Fizz / Buzz および FizzBuzz を書き出すか
  3. どのようにしてあらかじめ書かれている邪魔な数字を消し、そしてそれに対する影響をどう回避するか

1については li:nth-child を使用するか li:nth-of-type を使用するかのどちらかでしょう。 nth-of-typeって知りませんでしたけどね

2についても :before / :after 擬似要素と content プロパティを指定して書きだすというのが常套手段と思われます。 それ以外の方法はあるんでしょうかね？？

その他の点に注目して各解答を見て勉強していきたいと思います。 実際のコードは記事の方でご確認ください。

瞬希 (id:syunki-gt)さんの記事の解答例の場合、それぞれ以下のように対応していますね

  1. nth-child
  2. :after 擬似要素と content プロパティ
  3. visibility: hidden;

visibility: hidden; にするとリストの•が消えてしまうため、display: list-item; position: absolute; top: 0; として回避しています。 （なお ul#main li {position: relative;} がないと、Fizz / Buzz に置き換わる行の前に空行が書かれるようです）

わたしが試した方法は末尾に記載しますが、リストマークを表示できないため、このやり方のほうが良いですね！ いきなり100点満点の解答がでてとてもびっくりです。

JF(id:jeffreyfrancesco) さん

はてぶコメントより

:nth-child()、::before(afterでもいいけど)、position、background-colorくらいでいけた / 最初から数字入ってない方がもっと楽にできそうだ / やり直したら:nth-child()、::before、display、overflow、heightでもう少しスマートにいけた

わたし、自分で「はてブのコメントで使用する技術要素を書いて」と言っておきながら、プロパティだけを見てもどうやって実装したのか分かりませんでした （´・ω・｀）

li {list-style-type: none;} で良い場合は、以下でいけるようです。

li:nth-child(3n), li:nth-child(5n) {
    height: 1em;
    overflow: hidden;
}
li:nth-child(3n):before, li:nth-child(5n):before {
    display: list-item;
}

もしくは後述するsmzkさんのfizz_buzz.htmlと同様の実装かもしれません。

ながたに(id:Nagatani)さん

:nth-child(15n)を使わずに::before,::afterで実装する方法を考えたけどfont-sizeで文字消してる関係でリストのマーカーがうまく表示されずに妥協

これは完全にわたしの解答例と一緒ですね。（後述）

ちょっと違っていたようです。（CSSでFizzBuzzの解答集に載ってしまったので…… - 水に溶けるドキュメント）

もともとFizzBuzzって15の倍数の判定をどうするかで2つの解答があると思っていまして

  • 単純な if 文でやるばあい15の倍数を先に判定する
  • 3の倍数と5の倍数のみ判定し、15の倍数のときは両者を利用する（文字列結合等）

という感じです。

なるべくなら後者でやりたいというのが人情というものではありませんか？（個人の感想です）

というわけでわたしもこの実装です。 が、この場合どうしてもリストマークが消えてしまいます。 どなたか消えない方法をご存じの方はぜひ。

コルクことkoluku。 (id:koluku)さん ※ 2/18 10:53 追記

CSSでFizzBuzzをやってみた - koluku°

これSEO的に悪いんだよぁ…まぁCSSで書き換える時点でSEOに悪いですが。

とのことで、はい、そうですね。 FizzもBuzzも現時点ではどの検索エンジンも捕捉しないでしょうねw

面白いのは、数字の消し方ですね。

position: absolute; に background: #fff; を組み合わせて背景色で消しています。 こんな消し方思いつきませんでした。なるほど。

id:macha-ru さん

【SASS】CSSのfizzbuzz問題をSassで解いてみたよ | Masablog

なんとSass使って解いてくれた方も！

おー。これは勉強になりますね！ こんなに本格的に書いたことなかったので、使ってみたくなってきました。

CSSてきには基本的な実装で、visibilityで表示を制御していますね。

Daiki Noda(github:sys9kdr)さん

fizz_buzz.html

つづいてgistをforkしていただいたsys9kdrさんです。

表示の制御を font-size で行う実装ですね。

::after ということで、CSS3の擬似要素の記述法で記述されていますね。 さすが、ちゃんとしています。

smzkさん

fizz_buzz.html

こちらもgistをforkしてくれました。

上述のJFさんとおなじく display overflow visible での実装ですが、 li { list-style-position: inside; } とすることでリストマークが消えないように工夫されていますね。

そもそも list-style-position を知らなかったのですが、応用的な使い方すぎて知っていてもこういう使い方に気づかなかったと思います。

mogya さん ※ 2/18 11:13 追記

Re:どうしてwebデザイナーに・・・CSSが書けないのか？

gistで解答していただきました。

3,5とかよりも、数字を隠してFizzBuzzを表示させるほうがよっぽどたいへんｗ

ですよねー。知ってましたけど。

FizzやBuzzでリストマークが消えるので ul {list-style-type: none;} が必要っぽいですね。

かなり早く解答していただいたようでありがとうございました！

mon_sat(github:monsat)

最後はわたしの考えた解答例。 これだけみなさんいろんな実装をしていると載せるのが恥ずかしくなってきますが・・・

gist9044288

数字がない場合の実装例

はてぶのコメントで「数字が邪魔」っていう意見が散見され、おや？と思って調べたところ、次のような実装が可能ですね。 ただし空のliタグは数字の個数分必要です。

#main {
    counter-reset: fizzbuzz;                                         
}
#main li {                                                           
    counter-increment: fizzbuzz;                                     
}
#main li::before {                                                   
    content: counter(fizzbuzz);                                      
}
#main li:nth-child(5n)::before {                                     
    content: "";                                                     
}
#main li:nth-child(3n)::before {                                     
    content: "Fizz";                                                 
}
#main li:nth-child(5n)::after {                                      
    content: "Buzz";                                                 
}

content｜CSS2.1 生成内容｜Web制作 W3G

twitterやはてぶでいただいた温かいコメント

数字が邪魔ですみません・・・

ありがとうございます！紹介させていただきました。

/*
HTMLいじっては、いけないので、1から100以外になることはない。
 */

たしかにそうですね・・・

ぜひ当記事もご参考に！

いかがでしたでしょうか？

回答ありがとうございましたー。 ぜひ難しい問題作ってください！

CSSでFizzBuzzすること自体が筋が良くな（略

わたしも消えました・・・

めんどうくさいので、JSに（略

わたしもいろんな実装があるのを知って勉強になりましたので、ぜひこの記事をご参考に！

大好きですw

素晴らしい！

id:burnworks 「IE6対応必須」って一言書くだけで無理ゲーにできるからぜひ（違） （id:mayuki そうですね）

IE6はbefore, after擬似要素対応してないですからねー。

id:mayuki id:burnworks むしろIE6-7はexpressionを使えば最短で書けます。

なるほど。存在すら忘れてましたw

id:asuka0801 css CSSでやりたくねえｗ

ですよねー

id:hadakadenkyu nth-of-type或いはnth-childとcontentでイケるがどうせなら数字もlist-style-type: decimalでやるべき。つか最も古くは2007年のを見つけたが。http://d.hatena.ne.jp/tomoya/20071013/1192308204

ふむふむ。勉強になります。既出なんですねー。

謝辞

みなさんお付き合いいただきありがとうございましたー。

f:id:mon_tinian:20140218092342j:plain