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

HTMLのlink要素「media属性」を使いこなす!画面用・印刷用にCSSを読み分ける方法

HTMLの<link>要素にあるmedia属性は、読み込むリソース(通常はCSSファイル)をどのデバイスやメディア向けに最適化するかを指定するための属性です。これを活用することで、用途ごとに異なるCSSスタイルシートを切り替えて適用できます。

media属性の主な値

media属性には複数の値を指定できますが、特によく使われるのは次の3つです。

  • all:デフォルト値。すべてのメディアタイプのデバイスにスタイルが適用されます。
  • screen:パソコンのモニター、タブレット、スマートフォンなど、あらゆる「画面」表示向けのスタイルを指定します。
  • print:印刷プレビュー画面や実際に印刷されるページ向けのスタイルを指定します。

media属性の基本的な使い方

実務では、screen用とprint用にそれぞれ最適化したスタイルシートを用意し、読み分けるのが一般的です。具体的には次のように記述します。

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  <link rel="stylesheet" type="text/css" href="screen.css" media="screen">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

コードのポイント解説

  • 1つ目の<link>要素:media属性を指定していません。その場合、暗黙的にmedia="all"が適用され、すべてのメディアタイプに反映されます。コード上には明示されていませんが、内部的には必ず設定されている点に注意しましょう。
  • 2つ目の<link>要素:media="screen"を指定しているため、このスタイルシートは画面表示専用として最適化されます。
  • 3つ目の<link>要素:media="print"を指定しているため、印刷および印刷プレビュー時にのみ適用されるスタイルシートになります。

このようにmedia属性を使い分ければ、1つのHTMLファイルから画面表示用と印刷用のデザインを柔軟に制御できます。印刷時だけ余白やフォントサイズを変えたい場合などにも便利なので、ぜひ活用してみてください。

  1. HTMLのmultiple属性とは？複数選択を可能にする使い方を徹底解説

    HTMLのmultiple属性は、ユーザーが複数の値を選択・入力できるようにするための属性です。この属性はブール型（真偽値）属性であり、<input>要素と<select>要素の両方で使用できます。特に、HTMLフォームで複数のファイルをアップロードしたい場合にmultiple属性が活躍します。また、この属性は「email」および「file」タイプの入力フィールドに対応しています。multiple属性の主な特徴fileタイプ：ファイル選択ダイアログで複数のファイルを同時に選択可能になります（CtrlキーやShiftキーを押しながらクリック）。emailタイプ：カンマ区切

  2. HTMLのlist属性とは？datalist要素で入力候補を表示する方法を解説

    HTMLのlist属性とはHTMLでは、<datalist>要素を使用して、あらかじめ定義された選択肢のリストを作成できます。このリストは<input>要素（入力欄）に対して適用され、ユーザーが文字を入力すると、定義済みの選択肢が候補として自動的に表示されます。<input>要素のlist属性は、対応する<datalist>要素のidを参照することで、入力欄と選択肢リストを関連付けます。このlist属性は、HTML5で新たに導入された機能です。list属性の基本的な使い方list属性を使うには、以下の2つのステップを行います。<datali