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

CSSのmedia属性でターゲットメディアを指定する方法【コード例付き】

CSSでスタイルを適用する対象のメディア（画面表示・印刷など）を指定したい場合は、media属性を使用します。<link>タグや<style>タグにこの属性を設定することで、特定のメディアタイプに対してのみスタイルシートを読み込ませることができます。

media属性の基本的な使い方

次の例では、印刷用とハンドヘルド端末（携帯電話などの小型デバイス）用として、外部スタイルシート「foo.css」を読み込んでいます。

<!doctype html public "-//w3c//dtd html 4.0//en">
<html>

  <head>
    <title>link to a target medium</title>
    <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">
  </head>

  <body>
    <p>the body...</p>
  </body>

</html>

コードのポイント

  • media="print, handheld"：カンマで区切ることで、複数のメディアタイプを一度に指定できます。この例では「印刷時」と「携帯端末での閲覧時」の両方に同じスタイルが適用されます。
  • href="foo.css"：読み込む外部スタイルシートのパスを指定します。
  • media属性を省略した場合：すべてのメディアに対してスタイルが適用されます（既定値は「all」）。

主なメディアタイプの一覧

メディアタイプ対象
allすべてのデバイス（既定値）
screenパソコンやスマートフォンの画面表示
print印刷および印刷プレビュー
handheld携帯電話などの小型端末
speech音声読み上げ（スクリーンリーダーなど）

CSS内で指定する場合：@mediaルール

HTML側ではなく、CSSファイルの中でメディアを指定したいときは、@mediaルールが便利です。1つのスタイルシート内でメディアごとのスタイルをまとめて管理できます。

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

このようにmedia属性と@mediaルールを使い分けることで、出力先のデバイスに応じた最適な表示を実現できます。

  1. CSSでページ全体の背景画像を設定する方法【サンプルコード付き】

    CSSを使用すれば、Webページ全体に背景画像を簡単に表示できます。重要なのは background-size: cover を指定することです。これにより、画像が画面サイズに合わせて自動的に拡大・縮小され、領域全体を覆うようになります。以下は、CSSでフルページの背景画像を作成するコード例です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">

  2. CSSで要素をブラウザウィンドウの高さ全体に広げる方法をわかりやすく解説

    CSSを使って要素をブラウザウィンドウの高さ全体に広げるには、html 要素と body 要素の高さを 100% に設定した上で、対象の要素にも height: 100% を指定します。以下に具体的な実装例を示します。 コード例 <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> *{ box-sizing: border-box; } html, body { height: 100%;