表示:スタイルレンダリング

Home>Dreamweaver>操作リファレンス>表示:スタイルレンダリング

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

スタイルレンダリングとは

スタイルレンダリングは、スタイルシートを適用した表示をデザインビューにおいて実行します。

以下の項目にある各種のメディアにおいて、それぞれ表示方法を変更したい場合には、そのメディア用のスタイルシートを用意します。よく、印刷用のページを用意しているサイトがありますが、それは以下でいう、「プリントメディアタイプ」のスタイルシートを適用してレンダリングしている、ということです。

スタイルレンダリングの適用方法

各メディアタイプ別のスタイルシートの適用をするには、link属性に以下のように記述します。

<link href="CSSファイルのパス" rel="stylesheet" type="text/css" media="print">

または、ファイルに直接CSSを書く場合は以下のようにします。

<style type="text/css" media="print">
<!--
スタイルシートの記述
-->
</style>

この場合、印刷するためのページを表示する場合に適用する、という意味になります。

このほか、1つのスタイルシート内に別々のメディアへのスタイルを書くこともできます。

@media print{
p{
スタイルシート
}
}
@screen{
p{
スタイルシート
}
}

CSSを読み込むときに指定するには、@importを使用するときに指定します。

@import url("CSSファイルへのパス") print;

なお、複数のメディアに適用させるには、半角カンマで区切ります。

media="print, screen"

メディアタイプの一覧

all すべてのメディアで使用。
aural 音声出力メディアで使用。
braille 点字で出力するメディアで使用。
handheld 携帯小型端末で使用。
print 印刷するときに使用。
projection プロジェクタ等で投影する時に使用。
screen コンピュータの画面で使用。
tty 固定幅の文字を用いたメディアで使用。
tv テレビ画面で表示する際に使用。

なお、メディアタイプごとにCSSの適用を変更するには、JavaScriptで指定するのが現実的です。

表示メニューのスタイルレンダリング

スタイルレンダリングツールバー

ハンドヘルドメディアタイプ

携帯電話やPDAなどの小型端末で表示するときの表示方法でレンダリングします。

プリントメディアタイプ

紙に印刷したときの表示方法でレンダリングします。

プロジェクションメディアタイプ

プロジェクタなど、投影デバイスで表示する際の表示方法でレンダリングします。

スクリーンメディアタイプ

コンピュータ上で表示する際の表示方法でレンダリングします。

TTYメディアタイプ

固定幅の文字を用いたメディアで表示する際の表示方法でレンダリングします。

TVメディアタイプ

テレビ画面で表示する際の表示方法でレンダリングします。

スタイルを表示

CSS(カスケーディングスタイルシート)を使っている場合、デザインビューにおいてCSSを反映して表示します。

チェックをはずすと、CSSを適用せずに表示します。CSSを適用分、デザインビューでの描画速度が向上します。

関連リンク

よく読まれている記事

UpDate:2010-5-2