tailwindを使って、スクリーンサイズに応じて文字列の表示の有無を切り替える。
公開日:
まとめ
スマホの画面では表示したくないけど、PCの画面では表示したい文字列がある場合、tailwindを使って、下記のようにすれば良い。
<span class="hidden lg:inline">スマホでは表示しない。PCは表示する文字列</span>hiddenではなく、invisibleを使うと、タグのコンテンツは表示されないが、
タグの領域が表示されてしまう。
例
ここはいつも表示。 これは、スマホでは表示されないけど、PCでは表示される ここもいつも表示
invisibleを使う例
ここはいつも表示。 スマホでは文字列は表示されないが、空欄が残る。 ここもいつも表示
invisibleは、要素を削除するのではなく、要素のサイズは維持したまま、
コンテンツを非表示にする。
いつ使うの？
<a href="tel:000-0000-000">電話</a>のような電話かけるリンクを設置するときに、
スマホでは電話番号を表示しなくてもよいが、PCでは電話番号を表示したい場合に使用した。