最後の仕上げに、CSS講座

S-15.機種による条件分け ページ23

.


【画像1/リンク】

【画像2/リンク】

画像の素材はpixabay様より。

全然大きさが違いますよね。
画像1は大きめで、画像2は何これ小っさぐらいの差がついています。

読者が使っている機種のサイズによって条件分けができるセレクターです。
画像サイズ以外でも、CSSでできることなら何でも条件分けできます。

▶ソース【𝕤𝕠𝕦𝕣𝕔𝕖】
/*読者の画面が〇〇pxまでのときに適応される条件*/
@media(max-width:サイズ/px){
/*ソース*/
}
/*読者の画面が〇〇pxより大きいときに適応される条件*/
@media(min-width:サイズ/px){
/*ソース*/
}

ただし、注意点があります。
例を挙げます。

悪い例
@media(min-width:〇〇px){
background-color:#000}

いい例
@media(min-width:〇〇px){
body{background-color:#000}
}

違い、分かりますかね。
悪い例は@media(〜)をただのセレクター扱いにしてソースを書いています。
これでは反応しません。

ですから、いい例のように @media(〜){}の間にセレクター プロパティ 値を全部入れる必要があります。
@media(〜){ }を枠だと思って、その中に普通にソースを書いていく感じだとでも言えば伝わるでしょうか?
【画像3/リンク】


とりあえず、@media(〜){ }の中にはセレクター プロパティ 値が1つずつ以上あって、最後は }}が2つ重なればOK。


▶日本でのシェア率が高いpx
1920×1080
1366×768
375×667
414×896
(768×1024)
セレクターに使うpxは、ここら辺を目安にしてどうぞ〜。

▶まとめ【𝕤𝕦𝕞𝕞𝕒𝕣𝕪】
【@media(〜)】は、機種サイズによる条件分けをする。

P-7.文章選択中→←P-6.影応用

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す