{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/post/fizzbuzz-with-css-and-scss/",
    "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"4bc4af40-9e30-5a03-b1db-ad44ad19b7d5","excerpt":"完全にネタ記事です。 某合宿キャンプの選考にてFizzBuzzが出題されたそうなので、 CSSと、CSSメタ言語のSassでやってみました。 FizzBuzzとは FizzBuzzとは、プログラマーの小手調べだったり、お遊びだったりします。 1から100までの数をプリントするプログラムを書け。 ただし…","html":"<p>完全にネタ記事です。<br>\n某合宿キャンプの選考にてFizzBuzzが出題されたそうなので、<br>\nCSSと、CSSメタ言語のSassでやってみました。</p>\n<!--more-->\n<h2 id=\"fizzbuzzとは\" style=\"position:relative;\"><a href=\"#fizzbuzz%E3%81%A8%E3%81%AF\" aria-label=\"fizzbuzzとは permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>FizzBuzzとは</h2>\n<p>FizzBuzzとは、プログラマーの小手調べだったり、お遊びだったりします。</p>\n<blockquote>\n<p><q>1から100までの数をプリントするプログラムを書け。<br /> ただし3の倍数のときは数の代わりに「Fizz」と、5の倍数のときは「Buzz」とプリントし、3と5両方の倍数の場合には「FizzBuzz」とプリントすること。 <a href=\"http://d.hatena.ne.jp/keyword/Fizz%2DBuzz%CC%E4%C2%EA\">Fizz-Buzz問題とは – はてなキーワード</a></q></p>\n</blockquote>\n<h2 id=\"cssのfizzbuzz\" style=\"position:relative;\"><a href=\"#css%E3%81%AEfizzbuzz\" aria-label=\"cssのfizzbuzz permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>CSSのFizzBuzz</h2>\n<h3 id=\"サンプル\" style=\"position:relative;\"><a href=\"#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB\" aria-label=\"サンプル permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>サンプル</h3>\n<p>実行結果は<a href=\"http://closet.leko.jp/2013/fizzbuzz/css.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">こちら</a>から確認できます。</p>\n<h3 id=\"コード\" style=\"position:relative;\"><a href=\"#%E3%82%B3%E3%83%BC%E3%83%89\" aria-label=\"コード permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>コード</h3>\n<h3 id=\"コードの説明\" style=\"position:relative;\"><a href=\"#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%AA%AC%E6%98%8E\" aria-label=\"コードの説明 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>コードの説明</h3>\n<p>普通にCSSを書くより汎用性があるかなと判断してmixin化してあります。<br>\nフォントサイズを引数にとることができ、デフォルトは18pxです。</p>\n<p>CSS版では、CSS3のnth-childという擬似クラスを利用しています。</p>\n<p><code>nth-child(3n)</code>と書くことで、<br>\nはじめに登場する要素から数えて３つおきにスタイルを適用します。 nを付けることがポイントです。</p>\n<p>これさえ分かれば、<br>\n3n、5n、15nと書けば良いように思えますが、冗長だと思います。</p>\n<p>15の倍数は必ず3と5の倍数なので、<br>\n3nに<code>:before</code>、5nに<code>:after</code>を使うことで、 15nの時にFizzとBuzzを合体させることができます。</p>\n<p>僕のFizzBuzzは、CSS3でないと実現出来ません。</p>\n<p>有限数ならハードコーディングすればCSS2でも行けますが、<br>\n無限長のFizzBuzzがCSS2でも実現可能ならぜひ教えてください。</p>\n<h2 id=\"sassのfizzbuzz\" style=\"position:relative;\"><a href=\"#sass%E3%81%AEfizzbuzz\" aria-label=\"sassのfizzbuzz permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>SassのFizzBuzz</h2>\n<h3 id=\"サンプル-1\" style=\"position:relative;\"><a href=\"#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB-1\" aria-label=\"サンプル 1 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>サンプル</h3>\n<p>実行結果は<a href=\"http://closet.leko.jp/2013/fizzbuzz/sass.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">こちら</a>から見ることができます。</p>\n<h3 id=\"コード-1\" style=\"position:relative;\"><a href=\"#%E3%82%B3%E3%83%BC%E3%83%89-1\" aria-label=\"コード 1 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>コード</h3>\n<h3 id=\"コードの説明-1\" style=\"position:relative;\"><a href=\"#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%AA%AC%E6%98%8E-1\" aria-label=\"コードの説明 1 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>コードの説明</h3>\n<p>こちらはループや条件分岐などの制御構造が扱えるので、<br>\n$contという空文字列を定義して結果を次々に入れていくだけです。</p>\n<p><code>$i % 3 == 0</code>や、<code>$i % 5 == 0</code><br>\nとベーシックな方法でやってもいいのですが、 Sassにおけるリストを使ってみたかったのでそちらでやってみました。</p>\n<p><strong>Sassのリストは添字が1から始まる</strong>ことさえ気をつけていれば、 1~15までのFizzBuzzを用意して、あとはループを回すだけです。</p>\n<h2 id=\"剰余算を使わないsassのfizzbuzz\" style=\"position:relative;\"><a href=\"#%E5%89%B0%E4%BD%99%E7%AE%97%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84sass%E3%81%AEfizzbuzz\" aria-label=\"剰余算を使わないsassのfizzbuzz permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>剰余算を使わないSassのFizzBuzz</h2>\n<p>CSSでのFizzBuzzはそもそも演算を行なっていないので除外します。<br>\nSassのほうで、先ほどの例ですと剰余算を使ってしまっていますね。</p>\n<p>配列でFizzBuzzを回す概念が出来ていれば、 剰余算はただの簡易化に過ぎないのですが、<br>\nコード内に％があるのは負けです。</p>\n<p>冗長だけど、剰余算を使わないFizzBuzzもSassで書いてみました。 あまりスマートではないですが、、書けました。</p>\n<h3 id=\"コード-2\" style=\"position:relative;\"><a href=\"#%E3%82%B3%E3%83%BC%E3%83%89-2\" aria-label=\"コード 2 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>コード</h3>\n<h2 id=\"まとめ\" style=\"position:relative;\"><a href=\"#%E3%81%BE%E3%81%A8%E3%82%81\" aria-label=\"まとめ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>まとめ</h2>\n<p>如何でしたでしょうか？ CSSでも以外とやれるもんだなぁと思いました。</p>\n<p>nth-childをあまり有効活用できていないので、<br>\nこれからはもっと使えそうなタイミングを探してみようと思います。</p>\n<p>Sassの@**はもはやプログラミング言語のそれ並なので、<br>\nmixinも、より効率よく、シンプルに書けそうです。</p>\n<h2 id=\"関連リンク\" style=\"position:relative;\"><a href=\"#%E9%96%A2%E9%80%A3%E3%83%AA%E3%83%B3%E3%82%AF\" aria-label=\"関連リンク permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>関連リンク</h2>\n<p><a href=\"http://thesassway.com/intermediate/if-for-each-while#while\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Sass control directives: @if, @for, @each and @while – Intermediate</a></p>","timeToRead":4,"frontmatter":{"title":"CSSとSassでFizzBuzzしてみた","tags":["CSS","fizzbuzz","SASS"],"date":"June 25, 2013","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='143'%20viewBox='0%200%20400%20143'%20preserveAspectRatio='none'%3e%3cpath%20d='M314%207l-6%202h-3c-1%200-9%203-8%204l3-1h6v2h-3l-3%202-1%201c2-1%205%201%204%202h-2c-1-1-2-1-4%201-3%203-3%204%201%204%203%201%204%200%205-2s5-4%208-3l2-1-5-1-4%201%202-2%206-2%203-1h-8l2-2c5-5%2017-3%2020%203h3c0-1-8-7-11-7h-7m-21%209c-5%207-8%2015-8%2021l1%207%201%201h-1c-2-2-2-2-3%200-2%203-3%209-1%2010l1%204c-1%205-4%2011-4%208l-1-2c-1%200-2-1-1-2%200-2%201-2%201-1%202%202%203%201%203-3v-3l-3%203-3%206c1%202%200%203-1%203-2-1-2%201%200%202l1%204%201%202%202%202c1%202%201%202%201%200l2-4v-5l1-3v3c0%204%200%204%203%204%201%200%202%200%201-1-1%200-2-1-2-3-1-4%201-16%202-17s7%201%207%203l1%203-2%202v1l2%201h-3l-3%201%202%202c2%200%203%200%204%205v4l-4-1c-3%200-3%200%201%202v1c-2%201-2%201%201%201%205-1%205-1%200%202-7%203-7%206-4%2011l5%209c2%204%202%203%201-1v-2l3%204c0%203%200%204-3%207s-4%204-3%206c0%204-1%204-4%201s-5-3-3%200c3%202%2010%206%2011%205l-1-2-1-1-1-3-1-2c1%201%202-1%204-2%203-4%204-8%202-12-1-2-1-2%201-1s2%202%202%207v26h44l43%201V95h-34l-35-1%204-9%202%202%204%201c2%200%202%200-2-3-5-2-5-2-8%204l-2%203c-1-1-1-1-1%201l-2%202c-1%200-2-1-2-3s0-2%202-2c1%201%202%200%202-1l1-1v-4c-2-4-2-4%201-5l5-5%203-3%202%202%201%204c0%203%201%202%203%200%201-2%201-2%203-1l4%202c2%200%204%201%204%203h-2l-1%201c-2-1-1%201%201%202h6l1%201%201-3h-2l-1-2-2-2-2-1c-3%200-7-2-10-6-4-5-5-9-5-17v-7l-1%206v11c1%205%200%207-7%2012-6%205-9%204-15-3-5-7-8-12-9-18%200-3%200-4%201-3l7-2c0-2-4-5-6-5l-3-1c-1-7-1-9%202-9l1-1c0-2-4-1-7%201-2%201-2%201-2-1l5-4c3-1%204-2%203-3l-5%201c-3%203-3%201%201-3%203-3%204-6%202-4-2%201-1-1%202-5l1-3-3%203m-66%2039c-4%200-4%201-2%2016l2%209%204%202c4%201%2012%201%2014-1%202-1%205-24%204-25s-18-2-22-1M76%2059c-2%202-1%202%202%201%207-3%208%203%202%2010-6%205-6%206%202%206l6-1c0-2-1-2-4-2h-4l3-4c4-4%205-8%202-10-2-2-7-2-9%200m54-1c-6%200-7%200-7%202s1%202%205%201l11%202-8%201c-8%200-9%200-9%202-1%202%200%202%208%202s8%200%207%202c-1%204-2%205-7%205-3%200-5-1-5-2-2-3-5-2-5%201%200%204%2011%206%2018%203%202-2%203-3%204-9l2-9c0-1-4-2-14-1m54%205c-5%208-5%208%201%208%205%200%205%200%205%203l2%202%201-2c0-2%201-3%202-3v-2h-1l-1-6c0-8-2-8-9%200m45%202c0%204%201%205%203%205%208%200%208%200%208%202%200%203-6%203-7%201-1-3-3-2-3%200%200%203%204%205%209%204%203%200%204-1%204-4%202-7%202-7-5-7l-6-1c0-2%201-2%206-2l6-1c0-2-2-2-8-2h-7v5m63%2015c-4%202-4%206%201%2011%206%205%2011%206%2013%201l1-2v2c0%204%202%204%202%200%200-3%200-3-2-3-2%201-3-1%200-2v-4l-2%202c-1%202-2%201-5-2-3-4-4-4-8-3m20%2024c-2%200-4%204-2%207l5%203c6%201%207%205%202%205-3%200-6-2-6-4l-1-1-1%203c0%203%200%204%205%204%2011%200%2013-8%203-11-5-1-7-3-3-4%202-1%205%201%206%203%202%202%203%201%203-2%200-2-1-3-3-3h-8m15%206c-3%202-3%203%200%203l2-1c-1-2%200-2%201-2%203%200%202%203-2%204-2%202-3%202-3%204%201%204%2012%204%2013%200%200-1%200-2-1-1%200%203-2%201-1-2%201-5-5-8-9-5'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.783333333333333,"src":"/static/94059cfcd5135ca2a0d35c2856e2b0ff/f32f2/featured-image.jpg","srcSet":"/static/94059cfcd5135ca2a0d35c2856e2b0ff/466a3/featured-image.jpg 334w,\n/static/94059cfcd5135ca2a0d35c2856e2b0ff/f32f2/featured-image.jpg 569w","srcWebp":"/static/94059cfcd5135ca2a0d35c2856e2b0ff/3d427/featured-image.webp","srcSetWebp":"/static/94059cfcd5135ca2a0d35c2856e2b0ff/cd98f/featured-image.webp 334w,\n/static/94059cfcd5135ca2a0d35c2856e2b0ff/3d427/featured-image.webp 569w","sizes":"(max-width: 569px) 100vw, 569px"}}}}}},"pageContext":{"slug":"/fizzbuzz-with-css-and-scss/","previous":{"fields":{"slug":"/aoj-0104-magical-tiles/"},"frontmatter":{"title":"[AOJ] 0104 Magical Tiles","tags":["AOJ","C++"]}},"next":{"fields":{"slug":"/introduction-of-emmet/"},"frontmatter":{"title":"Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫","tags":["CSS","Emmet","HTML"]}}}},
    "staticQueryHashes": ["2585454260","2954598359"]}