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

CSSのさまざまなメディアタイプ

CSSメディアタイプは、ドキュメントがレンダリングされるデバイスタイプであり、すべてのメディアタイプに対して特定のスタイルを定義できます。

以下は、CSS3およびメディアクエリ4のメディアタイプです-

Sr.No 値と説明
1 すべて
スタイルシートはすべてのメディアタイプのデバイスに適用されます
2 印刷
スタイルシートはプリンターに適用されます
3 画面
スタイルシートは、コンピューターの画面、タブレット、スマートフォンなどに適用されます。
4 スピーチ
スタイルシートは、ページを大声で「読み取る」スクリーンリーダーに適用されます

注 -いくつかのメディアタイプ（聴覚、点字、エンボス、ハンドヘルド、プロジェクション、ttv、tvなど）は、メディアクエリ4で非推奨になっているため、使用しないでください。聴覚タイプは音声メディアタイプに置き換えられました。

画面と印刷メディアの種類のスタイリングの例を見てみましょう-

HTMLドキュメント

例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body>
<div></div>
</body>
</html>

CSSドキュメント（screen.css）

div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid blueviolet;
   box-shadow: 22px 12px 3px 3px lightblue;
   position: absolute;
   left: 30%;
   top: 20px;
}
CSS document (print.css):
div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid #dc3545;
   box-shadow: 22px 12px 3px 3px #dc3545;
   position: absolute;
   left: 30%;
   top: 20px;
}

出力

ドキュメントが画面のメディアタイプに表示されている場合-

CSSのさまざまなメディアタイプ

ドキュメントが印刷メディアタイプで表示される場合-

CSSのさまざまなメディアタイプ

画面と印刷メディアの種類をスタイリングする別の例を見てみましょう-

HTMLドキュメント

例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url(screen.css) screen;
@import url(print.css) print;
</style>
</head>
<body>
<p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p>
<p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p>
<p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p>
</body>
</html>

CSSドキュメント（screen.css）

p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}
CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }

出力

ドキュメントが画面のメディアタイプに表示されている場合-

CSSのさまざまなメディアタイプ

ドキュメントが印刷メディアタイプで表示される場合-

CSSのさまざまなメディアタイプ


  1. CSSを使用したリンクのさまざまな状態のスタイリング

    CSS疑似セレクター、つまり：active、：hover、：link、：visitedを使用して、リンクのさまざまな状態のスタイルを設定できます。適切な機能のために、これらのセレクターの順序は次のように指定されます：-：link、：visited、：hover、：active。 構文 CSSのtext-indentプロパティの構文は次のとおりです- a:(pseudo-selector) {    /*declarations*/ } 例 次の例は、リンクのさまざまな状態のスタイルを示しています- <!DOCTYPE html> <html> &l

  2. CSSメディアタイプとクエリを理解する

    CSSメディアタイプとクエリは、ユーザーがデバイスの一般的なタイプ（画面、印刷など）またはその特性（画面解像度、ビューポートの寸法など）に従って特定のスタイルを定義するのに役立ちます。 構文 メディアクエリの構文は次のとおりです- @media not | only mediatype and (expressions) {    CSS-Code; }のみ ここで、メディアクエリは-の場合に適用されます mediatypeは、ドキュメントがレンダリングされるデバイスタイプと一致します。 not / only演算子が定義されていない場合、メディアクエリはすべてのメ