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

LINK要素のmedia属性とは？外部スタイルシートの出力メディアを指定する方法

media属性の基本的な役割

HTMLのLINK要素におけるmedia属性は、外部スタイルシートがどの出力メディア（デバイス）向けのものであるかを指定するための属性です。この属性を使うことで、画面表示用・印刷用・携帯端末用など、用途に応じて異なるスタイルシートを読み分けることができます。

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>本文...</p>
  </body>
</html>

この例では、media="print, handheld"のようにカンマ区切りで複数のメディアを指定しています。その結果、foo.cssは印刷時および携帯端末での閲覧時に適用され、通常のPC画面（screen）では適用されません。

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

  • all：すべてのデバイス（既定値）
  • screen：コンピュータの画面
  • print：印刷および印刷プレビュー
  • handheld：携帯電話などの小型端末
  • projection：プロジェクター
  • speech：音声読み上げ（スクリーンリーダーなど）
  • braille：点字ディスプレイ
  • tty：テレタイプなど文字幅が固定された端末
  • tv：テレビ

実務上のポイント：メディアクエリとの組み合わせ

現在のWeb開発では、handheldやprojectionといった古いメディアタイプはほとんど使われておらず、代わりにCSS3で導入されたメディアクエリを利用するのが一般的です。media属性にもメディアクエリを記述できるため、たとえば次のように画面幅に応じた条件指定が可能です。

<link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" href="mobile.css">

このようにmedia属性の仕組みを理解しておけば、レスポンシブデザインへの対応や印刷用スタイルの切り替えなど、柔軟なスタイル制御を実現できます。

  1. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値

  2. HTML link要素のhref属性の使い方を解説

    HTMLの<link>要素におけるhref属性は、外部リソースのURLを指定するために使用します。スタイルシートなどの外部ファイルを読み込む際に、その場所をブラウザに伝える重要な役割を担います。 構文 href属性の基本的な構文は以下のとおりです。 <link href="url"> 上記の「url」には、リンク先のドキュメントのURLを指定します。それでは、<link>要素のhref属性を使った具体的な例を見てみましょう。 使用例 <!DOCTYPE html> <html> <head> <l