media

メディア（属性）

意味特定デバイス向けスタイル

mediaとは？

スタイルシートが適用されるメディアを指定します。

mediaの具体的な使い方

スクリーンデバイス用のスタイルシートを指定する例

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" media="screen" href="style.css">
</head>
<body>
    <!-- コンテンツ -->
</body>
</html>

'screen'と指定することで、このスタイルシートはスクリーンデバイス（例えば、コンピュータのディスプレイやスマートフォンなど）での表示に最適化されていることを示します。

印刷時のスタイルを指定する例

@media print {
  body {
    font-size: 10pt;
  }
}

CSSファイル内で@mediaルールを使用して、印刷時のスタイルを指定します。この例では、印刷時にbody要素のフォントサイズを10ptに設定しています。

mediaに関するよくある質問

Q. media属性の主な用途は？

A. media属性の主な用途は、特定のデバイスやメディアタイプに適したスタイルシートを指定することです。これにより、異なる出力デバイス（スクリーン、印刷、音声ブラウザなど）に対して最適化されたスタイルを適用できます。

Q. よく使われるmedia値は？

A. よく使われるmedia値には、'screen'（コンピュータ画面やモバイルデバイス）、'print'（印刷用）、'all'（すべてのデバイス）があります。また、'(max-width: 600px)'のような条件式を使用して、特定の画面サイズに対応したスタイルを指定することもできます。

Q. CSSのメディアクエリとの関係は？

A. HTML内のmedia属性とCSSのメディアクエリは密接に関連しています。media属性はスタイルシート全体に対して適用条件を設定しますが、メディアクエリはCSSファイル内で特定のルールセットに条件を設定します。両者を組み合わせることで、より柔軟なレスポンシブデザインを実現できます。

mediaが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、HTMLのmediaやmax、ondblclick、scope、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。