SemanticUIでイマドキの横スクロールを実現する

SemanticUIが好きでずっと使っています。

特にCard componentは使い勝手がよく、しょっちゅうお世話になるのですが、これをイマドキの横スクロールで使いたい。

というわけで数行のCSS魔改造で実現してみるという小ネタです。

完成品はこちら

CodePENに上げてるのでよければ見てみてください。

See the Pen Horizontal Scrollable Cards with Semantic UI by o_tomomichi (@tomomichi) on CodePen.

やってること

デフォルトのCards componentに、独自のscrollingクラスをつけています。
HTML側でいじってるのはこれだけ。

あとはスマホサイズのときのみscrolling内のcardが横スクロールするよう、CSSを上書きしています。
元のCSSがflexを設定してるので、no-wrapにしてる感じです。

まとめ

という感じでイマドキの横スクロールUIができました。

これが本当に使いやすいかどうかは議論の余地ありですが、個人的にはけっこう好きです。
（あんまり数が多いと絶対見ないので、多くても5〜6個くらいまでが使いどころじゃないかと）

SemanticUI、とてもよいのでよければ使ってみてください。
おしまい。