Jul. 28th,2021
＃
“@media”ルール
“@media”ルールはスタイル・ルールなどのCSSルールが適用されるメディアやデバイスを限定する条件付グループ・ルールです。
“@media”ルールはスタイルシートの一部を内包することができ、メディア・クエリで指定した特定の条件でだけ適用されるように設定することができます。
＃
“@media”ルールの構文
“@media”ルールは“@media”に続く、メディア・クエリ・リストとスタイルシート(“<stylesheet>”)を含む“{”と“}”で囲まれたブロックからなります。
@media 〚メディア・クエリ・リスト〛 {
〚スタイルシート〛
}
“@media”ルールにはスタイルシートの最上位の階層で使用することが認められているスタイル・ルールや@ルールはほとんど含めることができますが、“@charset”ルールと“@import”ルール、“@namespace”ルールのような他の@ルールよりも前に配置しなければならない@ルールは中に含むことができません。
“@media”ルールの外側にあるルールはすべてのデバイスに適用されます。また、“@media”ルールの中に“@media”ルールを配置した場合は内側の“@media”ルールに内包されたルールは両方の“@media”ルールの条件をどちらも満たした場合にだけ適用されます。
メディア・クエリ・リストが空文字列である場合にはスタイルシートはすべてのデバイスに適用されます。
@media {
〚スタイルシート〛
}
＃
使用例
p.sample {
padding: 10px;
border-radius: 10px;
font-size: 1.5em;
}
@media all and (max-width: 640px) {
p.sample {
background-color: #00a497; /*■*/
text-decoration: underline dotted;
}
}
@media all and (min-width: 640px) and (max-width: 960px) {
p.sample {
background-color: #e198b4; /*■*/
text-decoration: underline dotted;
}
}
@media all and (min-width: 960px) {
p.sample {
background-color: #fabf14; /*■*/
text-decoration: underline dashed;
}
}
<p class="sample">
猫は、上のかぎり黒くて、ことはみな白き。
</p>
猫は、上のかぎり黒くて、ことはみな白き。
＃
