学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / CSSの基本 /  メディアタイプ

★CSSの基本

| ​メディアタイプ

⬛︎ メディアごとにスタイルシートを指定​

現在のところ、ウェブページはブラウザを使用してパソコンのスクリーン上で表示されることがほとんどですが、 CSSの仕様では、スクリーン以外にもテレビ・プロジェクタ・携帯機器・印刷・音声・点字などの 様々なメディアにウェブページが出力されて利用されることが想定されています。
メディアタイプは<link>要素や<style>要素のmedia属性、または、@mediaで指定します。 メディアタイプを指定することで、スクリーン表示用(screen)やプリント用(print)など、 メディアごとにスタイルシートを指定し分けることができます。 複数のメディアタイプに同じCSSを適用する場合には、メディアタイプの値をカンマ( , )で区切って指定します。

例:メディアタイプに合わせてCSSファイルを適用する

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen, tv" href="browse.css">
<link rel="stylesheet" type="text/css" media="handheld" href="mobile.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
<style type="text/css" media="aural, speech">
<!--
p {voice-family:male;}
-->

</style>
</head>
<body><p>段落となります。</p></body>
</html>

⬛︎ メディアタイプの値

CSS2で定義されているメディアタイプには以下のものがあります。

screenパソコンのスクリーン
tty文字幅が固定の機器
tvテレビ
projectionプロジェクタ
handheld携帯機器
printプリンタ
braille点字ディスプレイ
embossed点字プリンタ(※CSS2より追加、HTML4.01の仕様には無い値)
aural音声出力(※CSS 2.1では「aural」は非推奨、新たに「speech」が追加予定)
allすべてのメディア

記事一覧へ
HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ