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(〜)】は、機種サイズによる条件分けをする。
この小説をお気に入り追加 (しおり)
登録すれば後で更新された順に見れます 141人がお気に入り
お気に入り作者に追加
この作品を見ている人にオススメ
この作品を見ている人にオススメ
「オリジナル」関連の作品
違反報告 - ルール違反の作品はココから報告感想を書こう！(携帯番号など、個人情報等の書き込みを行った場合は法律により処罰の対象になります)
くるみ(プロフ) - 十六夜シロさん» 分かりにくくてすみません。タイトルの右に出るNowのことです。 (10月9日 10時) (
レス) id: dd662f3c96 (このIDを非表示/違反報告)
十六夜シロ(プロフ) - くるみさん» Nowとはどこのことでしょうか？新しく話を投稿したときタイトルの右に出るNewのことか、それとも別の場所のことでしょうか？ (10月9日 9時) (レス) id: e7a8daffa1 (このIDを非表示/違反報告)
くるみ(プロフ) - 質問です。Nowの文字色を変えたいんですけど、どうやったら変えれますか？ (10月4日 12時) (レス) @page28 id: dd662f3c96 (このIDを非表示/違反報告)
菊花s(プロフ) - すみません、質問させていただきます。関連作品やコメント欄の、上段と下段の間(1mmの隙間、このデザインでは濃い水色の部分)の色の変え方を知りたいです。お願いします。 (2022年12月4日 16時) (レス) id: c37532ea08 (このIDを非表示/違反報告)
コハク(プロフ) - 口座を作ってくださり、ありがとうございます！この講座で勉強中です。 (2022年12月4日 15時) (レス) id: 9ac8670e3b (このIDを非表示/違反報告)
作品は全て携帯でも見れます
同じような小説を簡単に作れます → 作成
この小説のブログパーツ
