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

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

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

とりとん
とりとん

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

というときに便利です!

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

  pc{1025px~}

  tab{751px~1024px}

  sp{~750px}

DEMO

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

とりとん
とりとん

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

コード

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

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

CSS
@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」というクラスがついている場合は「tabsp」を「display:none;」で消すという感じ。

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

WordPressでの実装方法

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

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

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

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

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

トップへ戻る
タイトルとURLをコピーしました