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

CSSのmedia属性でターゲットメディアタイプを指定する方法

CSSでは、<link>要素のmedia属性を使うことで、外部スタイルシートが適用される対象メディア(ターゲットメディア)を指定できます。これにより、印刷用やモバイル端末用など、デバイスごとに異なるスタイルを切り替えることが可能になります。

media属性には、カンマ区切りで複数のメディアタイプを同時に指定することもできます。

コード例

たとえば、印刷とハンドヘルド端末(携帯電話などの小型デバイス)を対象にスタイルシートを読み込む場合は、次のように記述します。

<!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>

この例では、foo.cssという外部スタイルシートが、印刷時(print)とハンドヘルド端末(handheld)の両方に対して適用されます。

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

  • all:すべてのデバイス(既定値)
  • screen:パソコンやスマートフォンの画面表示
  • print:印刷時や印刷プレビュー
  • handheld:携帯端末などの小型デバイス
  • speech:スクリーンリーダーなどの音声読み上げ

media属性を活用すれば、1つのHTML文書から複数のデバイスに合わせたスタイルシートを読み分けることができ、ユーザーの環境に応じた最適な表示を実現できます。

  1. CSSのtext-decoration-colorプロパティでリンクやテキストの下線の色を変更する方法

    text-decoration-colorプロパティとはCSSのtext-decoration-colorプロパティは、text-decoration-lineで指定された装飾線（下線・上線・取り消し線など）の色を変更するために使用します。通常、下線は文字色と同じ色で表示されますが、このプロパティを使えば下線だけに別の色を指定でき、デザインの幅が大きく広がります。構文CSS text-decoration-colorプロパティの基本的な構文は以下のとおりです。Selector {    text-decoration-color: /*値*/; }値には、redやviole

  2. HTMLでリンクのターゲット（開き先）を変更する方法【target属性の使い方】

    HTMLでリンクのターゲット（開き先）を変更するには、<a>〜</a>タグのtarget属性を使用します。target属性を指定することで、リンク先を新しいタブで開いたり、同じタブで開いたりと、ページの表示方法を柔軟に制御できます。 target属性に指定できる値 属性値説明 _blankリンク先のページを新しいタブで開きます。 _selfリンク先のページを現在のタブ（同じフレーム）で開きます。省略時のデフォルト値です。 _parentリンク先のページを親フレームで開きます。 _topリンク先のページを最上位のフレームで開きます。フレーム構成を解除して全画面表示