CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの@mediaAt-rules

CSS @mediaルールは、単一のスタイルシートでさまざまなメディアタイプ（印刷、画面、すべてなど）にさまざまなスタイルを指定するために使用されます。通常、その後にメディアタイプのコンマ区切りリストと、ターゲットメディアのスタイルルールを含むCSS宣言ブロックが続きます。

構文

以下は構文です-

@media not | only mediatype and (expressions) {
   CSS-Code;
}
のみ

例

CSS@mediaルールの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
   box-sizing: border-box;
}
.col {
   float: left;
   width: 20%;
   padding: 40px;
}
body {
   background-color: lemonchiffon;
   margin: 20px;
}
@media screen and (max-width: 850px) {
   .col {
      width: 50%;
   }
   body {
      background-color: mediumseagreen;
   }
}
@media screen and (max-width: 550px) {
   .col {
      width: 100%;
   }
   body {
      background-color: powderblue;
   }
}
</style>
</head>
<body>
<div class="row">
<div class="col" style="background-color:#373;"> </div>
<div class="col" style="background-color:#363;"> </div>
<div class="col" style="background-color:#353;"> </div>
<div class="col" style="background-color:#343;"> </div>
<div class="col" style="background-color:#333;"> </div>
</div>
</body>
</html>

出力

これにより、次の出力が生成されます-

画面サイズが850pxを超える場合-

CSSの@mediaAt-rules

画面サイズが550pxから850pxの間の場合-

CSSの@mediaAt-rules

画面サイズが550px未満の場合-

CSSの@mediaAt-rules

例

CSS@mediaルールの別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 0 3px black;
   padding: 20px;
   background-origin: border-box;
}
@media screen and (max-width: 900px) {
   p{
      background: url("https://www.tutorialspoint.com/swing/images/swing.jpg");
      color: #c303c3;
   }
}
@media screen and (max-width: 500px) {
   p {
      color: black;
      background: url("https://www.tutorialspoint.com/cplusplus/images/cplusplus.jpg");
   }
}
</style>
</head>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. </p>
</body>
</html>

出力

これにより、次の出力が生成されます-

画面サイズが500pxを超える場合-

CSSの@mediaAt-rules

画面サイズが500px未満の場合-

CSSの@mediaAt-rules


  1. CSSの@importAt-rules

    CSS @importルールは、インポートされたスタイルシートのURLの後にメディアタイプを指定することにより、特定のターゲットメディアのスタイル情報を設定するために使用されます。 構文 以下は構文です- @import url（ /*ファイルパス*/）mediatypes {CSS-Code;} CSSの@importルールの例を見てみましょう： HTMLドキュメント 例 @import url（screen.css）screen; @import url（print.css）print; Vivamus commodo、dolor eu porttitor sag

  2. CSSの::最初の行の疑似要素

    このCSS疑似要素は、要素のコンテンツの最初の行を選択します。ただし、テキストを含む幅が固定されていない場合、ウィンドウサイズに応じて行の長さが変わる可能性があります。 CSSの例を見てみましょう::最初の行の疑似要素- 例 <!DOCTYPE html> <html> <head> <style> p::first-line {    background-color: lightgreen;    color: white; } </style> </head> <bod