Semantic UIでPC、タブレット、モバイルそれぞれのときのみ表示したい場合

2022年4月3日2022年8月18日

今回はSemantic UIでPC、タブレット、モバイルそれぞれのときのみ要素を表示したい場合どのようにすれば良いのかについてご紹介いたします。

Semantic UIでPC、タブレット、モバイルそれぞれのときのみ表示したい場合

結論を言ってしまうと、下記の公式ドキュメントの最後に記載があります。
https://semantic-ui.com/collections/grid.html#/overview

PCのみ表示させたい要素であれば「computer only」や「large screen only」、タブレットのみ表示させたい要素であれば「tablet only」、スマホなどモバイルのみで表示させたい要素であれば「mobile only」などをclassとして指定してあげれば、表題の内容を実現できます。

終わりに

今回はSemantic UIでPC、タブレット、モバイルそれぞれのときのみ要素を表示したい場合どのようにすれば良いのかについてご紹介いたしました。

なお、Semantic UIは長年整備されておらず、2022年現在はSemantic UIからforkされたFomantic-UIのみ整備されております。
現在Semantic UIを利用している方は、Fomantic-UIを使うことを検討してみてください。