PC / SP 表示切替ユーティリティ
`<div class="pc-only">` `<div class="sp-only">` の最小 CSS。breakpoint 720px で切替。
解説
PC のときだけ見せたい要素と、スマートフォンのときだけ見せたい要素を、クラスを付けるだけで出し分けできる最小のユーティリティ CSS です。pc-only は通常表示で、画面幅が720px以下になると display: none で隠れます。逆に sp-only は最初は隠れていて、720px以下で表示に切り替わります。メディアクエリ一つで両者の表示と非表示を入れ替える、シンプルで読みやすい設計です。
使うと便利な場面
- PC では横並びのメニュー、スマホではハンバーガーボタン、と出し分けたいとき
- 長い説明文を PC だけ表示し、スマホでは短縮版に差し替えたいとき
- 画像のサイズ違いを端末ごとに切り替えたいとき
切り替わる幅は max-width の値（例では720px）を変えるだけで調整できます。注意点として、これは見た目を隠すだけで、隠れた要素も HTML には存在し読み込まれます。重い画像を両方置くと両方ダウンロードされるため、通信量を抑えたい場合は picture 要素などで本当に必要なものだけ読み込む方法と使い分けてください。読み上げ環境でも両方が読まれる点にも留意します。
使用例・適したシーン
- コードブロック
- 電話番号・住所コピー
- クーポンコードの配布
よくある質問
切り替わる画面幅は変更できますか？
できます。メディアクエリの max-width に指定した720pxの値を、目的のブレークポイントに書き換えるだけです。タブレットを含めたい場合などに合わせて調整してください。
隠した要素は読み込まれないのですか？
読み込まれます。display で見た目を隠しているだけで、HTML 上には存在しデータも取得されます。通信量を本当に減らしたい画像などは、picture 要素で必要なものだけ読み込む方法が適しています。