クラス名で切り替え！3つのブレイクポイントを指定してレスポンシブ対応

パソコン・タブレット・スマートフォンなど様々な端末が使用されるため、レスポンシブ対応は必須ですよね。

今回はクラス名で3つのブレイクポイントを指定するメディアクエリの記述方法を、紹介していきます。

とりとん

これはパソコンサイズのときだけ表示してー・・
これはスマートフォンで見たときだけ表示させたい・・

というときに便利です！

参考として、画面の解像度で画像を切り替えるというデモを作成してみました。

DEMO

▼ 画面幅を変えてみてください！

とりとん

早速コードを確認してみよう！

コード

<img class="pc" src="【画像のパス】.jpg">
<img class="tab" src="【画像のパス】.jpg">
<img class="sp" src="【画像のパス】.jpg">

3つの画像にそれぞれ「pc・tab・sp」というクラス名を記述します。

@media screen and (min-width: 1025px){
.tab,.sp{display:none;}
}
@media screen and (min-width: 751px) and (max-width: 1024px){
.pc,.sp{display:none;}
}
@media screen and (max-width: 750px){ 
.pc,.tab{display:none;}
}

構成は単純で、例えば「pc」というクラスがついている場合は「tab・sp」を「display:none;」で消すという感じ。

今回はimgタグですが、divタグにクラスを付与したらdivで囲まれたブロック要素ごとに切り替えることが可能です。

WordPressでの実装方法

WordPressのカスタマイズ方法として、既存のHTMLにCSSを追加・修正する手順を書いてみました！

CSSやclassについての簡単な説明から便利なデベロッパーツールの使い方など・・

初心者向けに書いたのでよかったら参考にしてみて下さい⬇️

【CSS】知識ゼロでもわかる！WordPressでCSSを追加・修正する方法

とりとん CSSって何？ CSSは簡単にいうと、webページのレイアウトや色などスタイルのことだよ！ HTMLで組んでいる要素にCSSを付けることでいろんなスタ...

toriton.link

簡単なのでぜひやってみてください〜

最後まで読んでいただきありがとうございました！