かなり前に、スマホ版の関連ニュース一覧の表示をスマートニュース（SmartNews）風にしたいな〜と思い、Flexboxを使って実装してみました。その当時はちょうどFlexboxを覚えたばかりで、個数や画面幅が変わっても柔軟に対応できるのを知って大変感動したのを覚えています。

というわけで、今回はそのとき感じた「知ってよかった！」の気持ちを振り返りながら実装方法をメモしておこうと思います。

最近、会社のサイトをリニューアルする機会があったんですが、サムネイルのサイズがみんなバラバラ！ってことがあったんですよね。今まではそれを横幅だけ揃えて高さはバラバラなまま表示してたりして、なんだか統一感のないデザインだったんですが、そんな悩みを解決してくれるcssを覚えたので、メモとして書き残しておきます！

画像の可変幅にも対応できているので、レスポンシブWebデザインにも使えますよ！

ぼかした画像を背面全体に敷くデザインを、Photoshopを使わずCSSで実装するための備忘録です。

CSSフィルターでブラー(blur)エフェクト使うと、背景画像を敷いた要素だけでなく中身の要素にまでエフェクトがかかってしまうので、背面要素のみにブラーエフェクトを加えて画像をぼかす方法をご紹介します！

先日、会社で口コミやレビューなどのレーティング評価の星(★)を実装する機会があったのでメモします。画像を使わずCSSのみで表現できるのでカスタマイズしやすく、便利だと思います！