cman.jp > WEBページ作成TOP > CSSリファレンス
WEBページ作成
広告
@media「ページのスタイル指定」
「@media」は、適用条件を指定してスタイルを指定します。適用条件には、メディアタイプや表示の横幅、高さなどのメディアクエリ条件も指定可能です。メディアタイプを複数指定する場合は、カンマ（,）で区切って指定します。メディアクエリ条件は、and、notの指定も可能です。
「@media」は、ディスプレイと印刷物でスタイルを変更する、など、メディアごとにスタイルを変更したり、ＰＣとスマートフォンでスタイルを変更する、など、ディスプレイのサイズによってスタイルを変更する事ができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 | - | - |
広告
@mediaの指定方法
| 構文 | |
|---|---|
|
@media media-type [and (メディアクエリ条件)･･･,media-type and (メディアクエリ条件)]
|
|
| プロパティ/設定値 | 意味 |
| @media media-type; |
media-typeには、下記が指定可能 ・all : 全てのメディアタイプ ・screen : ディスプレイ ・print : 印刷 ・aural : 音声読み上げ ・braile : 点字ディスプレイ ・handheld : ハンドヘルド ・projection : プロジェクタ ・tty : TTY（固定文字幅端末） ・tv : テレビ ・embosses : 点字印刷 ・speech : 音声機器 |
| @media (メディアクエリ条件); |
メディアクエリ条件には、下記が指定可能 ・width : ビューポートの横幅。※ ・height : ビューポートの高さ。※ ・device-width : 出力デバイスの横幅。※ ・device-height : 出力デバイスの高さ。※ ・orientation : ビューポートの向き。 縦向きがportrait、横向きがlandscape。 ・aspect-ratio : ビューポートの横幅と高さの比率。※ ・device-aspect-ratio : 出力デバイスの横幅と高さの比率。※ ・color : 出力デバイスの色のビット数。カラーでない場合は「0」。※ ・color-index : カラー参照テーブルの項目数。 カラー参照テーブルの使用なしの場合「0」。※ ・monochrome : 白黒デバイスのビット数。カラー端末の場合は「0」。※ ・resolution : 出力デバイスの解消度。※ ・scan : TVの走査方式。progressive、またはinterlace。 ・grid : メディアタイプがttyなどの固定文字幅端末の場合は「1」。 それ以外は「0」。 ※印が付いている場合、max-,min-を接頭語にして最少.最大を指定可能。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
@media のサンプル
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
@media screen{
span { color: red; }
}
@media print{
span { font-weight: bold; }
}
<!-- html -->
<div class="common">
<div class="cssTitle">メディアタイプのみの指定</div>
<div>
<span>
ディスプレイは、赤字で表示。
印刷は、黒字強調で出力。
印刷プレビューで確認可能。
</span>
</div>
</div>
メディアタイプのみの指定
ディスプレイは、赤字で表示。
印刷は、黒字強調で出力。
印刷プレビューで確認可能。
印刷は、黒字強調で出力。
印刷プレビューで確認可能。
広告