Memorandum お米の国でちょっと頑張っているフロントエンドデザイナの備忘録。 2020-01-12T08:02:09Z https://lojica.dev/blog/feed/atom/ WordPress lojica <![CDATA[Twitterの検索で画像と動画だけをフィルタしたい時]]> https://lojica.dev/blog/?p=28 2020-01-12T08:02:09Z 2020-01-12T03:00:50Z 考えてみれば「まぁ…そうだよね」ってなるのですが、こうやって書けば 画像と動画だけをフィルタできます。

filter:images OR filter:videos

その他にリプライや引用を除外したい時はfilterにハイフンをつけて上げると良いです。

-filter:replies -filter:quote
]]>
lojica <![CDATA[FizzBuzzをSCSSで書いてみた。]]> https://lojica.dev/blog/?p=9 2019-09-29T07:32:03Z 2019-03-13T03:00:07Z なぜそんなことをしたのか…

とある界隈でFizzBuzzで盛り上がっている時に「CSSでも出来るのでは?」と思い立ったので5分くらいでやってみた。
(CSSでFizzBuzzをやった後にググって答え合わせをしてたら、自分と同じ回答が見つからなかったので公開してみた。)

やってみた

See the Pen
FizzBazz in SCSS
by べじ (@wtnb_j)
on CodePen.

SCSSの部分

ol {
  list-style: none;
  li {
    counter-increment: FizzBuzz;
    &:before {
      content: counter(FizzBuzz);
    }
    // 5の倍数のbeforeを空に
    &:nth-child(5n):before {
      content: '';
    }
    // 5の倍数のafterにBuzzを
    &:nth-child(5n):after {
      content: 'Buzz';
      color: blue;
    }
    // 3の倍数のbeforeにFizzを
    &:nth-child(3n):before {
      content: 'Fizz';
      color: red;
    }
  } 
}

解説

先にBuzzの処理を書いた理由

After属性のcontentに’Buzz’を書くため、Beforeは空にする必要があった。
そして空処理をFizzより先に書いてしまうと、FizzBuzzの時にBuzzだけになってしまう。

あとがき(余談)

:nth-child(15n)だけは使ったら負けだと思った。

]]>
0