【CSS】ブレイクポイントの指定方法
2023.07.20 Posted by Coding_team
こんにちは、今回はCSSのブレイクポイントの指定方法を見直したいと思います。
従来の書き方ではブレイクポイントを指定する際、min-width、max-widthを用いた少し分かりずらい記述になっていました。
ですがIEなどを考慮しなくて良くなった現状、使えるようになった新たな記法があります。
その記法では比較演算子を用いた直感的な書き方が出来るようになり、視覚的にもわかりやすくなります。
では従来の書き方と比較して、紹介していきたいと思います。
まず最初に、対応ブラウザは以下になるので一読しときましょう。
→Can I use…(Media Queries: Range Syntax)
3つのブレイクポイントのパターンを従来の方法、新しい方法の両方で記述してみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/* パターン1 */ @media (max-width: 768px) {/* 従来の方法 */ #block01 { background: #dcdcdc; } } @media screen and (width <= 768px) {/* 新しい方法 */ #block01 { background: #dcdcdc; } } /* パターン2 */ @media (min-width: 769px) {/* 従来の方法 */ #block02 { background: #dcdcdc; } } @media screen and (768px < width) {/* 新しい方法 */ #block02 { background: #dcdcdc; } } /* パターン3 */ @media (min-width: 769px) and (max-width: 1200px) {/* 従来の方法 */ #block03 { background: #dcdcdc; } } @media screen and (768px < width <= 1200px) {/* 新しい方法 */ #block03 { background: #dcdcdc; } } |
widthが画面幅となり、このように比較演算子で簡単に書けるようになりました。非常に見やすいですね。
極々少数ですが、どうしても古く対応してない環境も考慮したいという場合は従来の方法で対応してあげましょう。
上記のパターンのDEMOも用意してあるのでそちらもご確認くださいませ。
→DEMO
以上クリエイターブログでした。
関連記事こちらの記事も合わせてどうぞ。
ノーコードツールとは?Web制作の新常識と活用事例について徹底解説!
2024.08.23
2022.07.28
Webサイト更新時に修正が反映されない時は?キャッシュ削除での解決方法
2022.05.19