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

CSSでメディア依存のスタイルシートを作成する方法

メディア依存スタイルシートとは、基本的なスタイルシートの一種ですが、メディアタイプがドキュメントを表示しているデバイスの種類と一致した場合にのみ、HTMLドキュメントへ適用されるという特徴を持っています。

メディア依存スタイルシートは、主に以下の3つの方法で作成できます。

  • @media アットルールを使用する
  • @import アットルールを使用する
  • media属性を指定したHTMLの<link>要素を使用する

例1：link要素のmedia属性を使った方法

それでは、メディア依存スタイルシートを作成する具体的な例を見ていきましょう。ここでは、画面表示用（screen）と印刷用（print）で異なるスタイルシートを読み込んでいます。

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ファイル（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;
}

出力結果

このコードを実行すると、次のような結果が得られます。

ドキュメントが「screen」メディアタイプで表示された場合：

CSSでメディア依存のスタイルシートを作成する方法

ドキュメントが「print」メディアタイプで表示された場合：

CSSでメディア依存のスタイルシートを作成する方法

例2：@mediaアットルールを使ったレスポンシブ対応

続いて、@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/android/images/android.jpg");
    color: #c303c3;
  }
}
@media screen and (max-width: 500px) {
  p {
    color: black;
    background: url("https://www.tutorialspoint.com/react_native/images/react-native.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. </p>
</body>
</html>

出力結果

このコードを実行すると、画面幅に応じて背景画像と文字色が変化します。

画面サイズが500pxより大きい場合：

CSSでメディア依存のスタイルシートを作成する方法

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

CSSでメディア依存のスタイルシートを作成する方法

このように、メディアクエリを活用することで、PC・タブレット・スマートフォンなど、さまざまなデバイスや印刷環境に最適化されたスタイルを柔軟に切り替えることができます。レスポンシブデザインを実装する際にも欠かせないテクニックなので、ぜひマスターしておきましょう。

  1. CSSのz-indexプロパティを使って要素を重ねて表示する方法

    CSSのz-indexプロパティとは CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。 注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効

  2. CSSのtext-decorationプロパティでテキスト装飾を付ける方法

    CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。基本構文text-decorationプロ