ブログやサイトを作っていると、PC表示とスマホ表示はレスポンシブで切り替えが主流です。要するにスマホ専用ページというものを別に作るわけではなく、画面幅に応じて表示を変えているだけに過ぎません。
そして、記事を書いていると、「続きはこちらをタップ！」「ダウンロードはこちらをクリック」のような書き方が気になってくるケースがあると思います。切り替えなくても意味は通じますし、別にやる必要はありませんが、気になる人は気になると思いますので…。
ということで初心者向けですがこの対処法についてです。
CSSのみで「タップ」と「クリック」を切り替えるだけ
まずはHTMLはこちら。
|
1 |
続きはこちらを<span class="spview">タップ</span><span class="pcview">クリック</span>してください。 |
あとはCSSの@mediaクエリを使い、ブラウザの幅によって切り替えるだけです。今回は960pxをブレイクポイント(切り替え位置)にしていますが、これはサイトに合わせて変更してください。
|
1 2 3 4 5 6 7 8 9 10 |
@media screen and (max-width: 959px) { .pcview { display:none; } } @media screen and (min-width: 960px) { .spview { display:none; } } |
実際の表示がこちら↓
続きはこちらをタップクリックしてください。
ブラウザの幅を変えるとタップとクリックが切り替わっているのが分かるかと思います。Javascriptなどで制御することもできますが、これくらいであればCSSのみで対処してしまう方が楽です。
まとめ
ということで、PC表示とスマホ表示で「クリック」「タップ」の文字列の切り替え方でした。冒頭に述べたように別にこれをしなければいけないということではないですし、現在はアクセスの多くがスマホからということを考えれば、最初から「タップ」と表示しておくだけでもいいかとは思いますが、気になる方には気になると思いますので、こういった方法もありますよーっていう記事でした。
コメント