【html/css/jq】スマホとPCで文章の一部を変更させる方法を知りたいです

cssやjQueryを使って、スマホとPCで文章を使って変更させたいのですがどのようにしたらいいのでしょうか？

◆パソコンでの表示
左の画像をご覧ください

◆スマホでの表示
上の画像をご覧ください

のように変更したいです。
どなたかよろしくお願いします。

No.1 回答者： fujillin 回答日時： 2019/07/16 10:18

こんにちは

方法はいろいろ考えられると思います。
どこがわからないのかがわからないので、以下は、全体的な方法の概要としての回答です。

一番簡単そうなのは、両方のテキストを予め用意しておいて、CSSのメディアクエリを利用して表示/非表示を切り替えて一方のみ表示するようにする方法でしょうか。
同時に、画像とのレイアウトを横並び/縦並びに切り替えれば良さそうですね。
通常、画面サイズで判断していることが多いようです。
https://qiita.com/kazuki1012/items/a285e1022f69e …
https://developer.mozilla.org/ja/docs/Web/CSS/@m …
https://developer.mozilla.org/ja/docs/Web/CSS/Me …

テキストを2種類用意しておかなくとも、ご質問の場合は、違いが最初の一語程度なので、CSSの擬似要素（:before）を用いて、そこの部分だけ書き変えるという方法でも実現できるでしょう。
https://developer.mozilla.org/ja/docs/Web/CSS/:: …


一方で、javascript利用の場合は、画面幅でも判別できますが、ブラウザのuserAgentを利用して判断することが多いのではと思います。
https://qiita.com/sakuraya/items/33f93e19438d069 …
https://developer.mozilla.org/ja/docs/Web/API/Na …

判別さえできれば、あとは上記と同じでレイアウトや文字の表示/非表示を切り替えれば宜しいかと。
CSSをあらかじめ設定しておいて、包含要素のクラスを書き換えるなどで適用を切り替える方法が一番簡単だと思います。
また、スクリプト利用なので、テキストに関しては、テキストそのものを書き換えるという方法でも対応できるでしょう。