PCやスマホなど画面の大きさごとに細かく改行を変えたい・・・
表示される画像もレスポンシブ対応したい・・・
分かります。私も同じでした。
スクールで学び、そこから私なりにアレンジした使い方をご紹介します。
pc-hidden, sp-hiddenを使い分ける
実はあっけないものではありますが、CSSに以下のコードを書き込むだけです。
事前準備として、↓のコードをCSSに書き込んでおいてください！
【スマホの場合（CSS画面）】
.pc-hidden{ display: block;}
.sp-hidden{ display: none;}【PCの場合（CSS画面）】
.pc-hidden{ display: none;}
.sp-hidden{ display: block;}この２つのコードを書くことでレスポンシブ対応ができます。
使い方として一例では以下のような使い方ができます。
①改行位置をPCとスマホで変えたいとき
➁画像をPC用とスマホ用で変えたいとき
①改行位置をPCとスマホで変えたいとき
例えば↓の文章で、
スマホ画面のとき
「・・・ここに文章が入ります。
ここに文章が入ります。ここに文章が入ります。・・・」
としたいけど、PC画面のときは
「・・・ここに文章が入ります。ここに文章が入ります。ここに
文章が入ります。・・・」
と改行位置を変えたいとき、HTMLのコード上では↓のように改行をすると簡単に改行位置を変えられます。
<p>・・・ここに文章が入ります。<br class="pc-hidden">ここに文章が入ります。ここに<br class="sp-hidden">文章が入ります。・・・</p>こうすることで、スマホの画面の時は”pc-hidden”とクラス名をつけたbrタグが有効になり、
反対にPC画面の時はbrタグが無効になります。
（”sp-hidden”のときは逆にスマホ画面の時は無効、PC画面の時にbrタグが有効になります。）
➁画像をPC用とスマホ用で変えたいとき
またこれを応用して画像の切り替えもできるようになります。
HTMLに直接 media=”(min-width: 768px)” などと記入して切り替える方法などがありますが、
imgタグを2つ用意して、それぞれPCのときとスマホの時で出力したい画像をセット、クラス名の最後に先ほどのクラス名を付け加えるだけでレスポンシブ対応が可能になります。
私の場合は以下のような使い方をしていました。
<img src="./img/pc-img.png" class="card-img-pc sp-hidden">
<img src="./img/sp-img.png" class="card-img-sp pc-hidden">こうすると、写真などの画像サイズを調整しながら、PC画面用、スマホ画面用にそれぞれ準備した画像の切り替えができます。
個人的にはこれが自分のやり方にあっていることと、他にもレスポンシブ対応をさせたいタグが出てきたときにそのまま転用できるので、CSSのコードが増えなくて分かりやすくなることからよく使うやり方です。
サイト設計や依頼主のご要望に合わせて是非活用してみてください！！
