HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |123456789101112131415|  次へ>>

★今すぐ仕事に結びつく稼げる資格!スキルアップガイド無料進呈中 Click Here![PR]

● 各メディアによる出力

HTML文書はその閲覧をパソコンだけでされるというわけではありません。 実際、最近はゲーム機や携帯電話、PHSなどでもインターネットに接続でき、 ウェブサイトが閲覧できます。 また、見るだけではなく視覚障害者用に音声ブラウザというのも存在します。 そのため、HTML文書はそれぞれ閲覧するための機器の特性を生かした表現が必要とされます。
そこで、media属性による設定をすることで、 HTML作成者は閲覧環境に適した表現をすることができます。

認定できるメディア属性の値は以下の通りです。
screen
コンピュータの画面への出力を示します。
tty
固定文字幅での出力を示します。 例えば、テレタイプ(印刷電信機)など表示能力に制限のある機器での出力を示します。
tv
テレビなど低解像度の画面での出力を示します。
projection
プロジェクターでの出力を示します。
handheld
白黒で画面の小さく、携帯デバイスでの出力を示します。
print
印刷による出力や印刷プレビューでのスクリーンなど。ページで区切られた形の出力を示します。
braille
点字による出力を示します。
aural
音声装置による出力を示します。
all
種類を問わず、すべての出力に適合している事を示します。

これらの値をmedia属性に与え、出力装置にあった出力を行います。
例えば、LINK要素に設定することで、出力装置にあったページを設定します。 以下は印刷出力用のページとして、PDFファイルを設定しています。

<LINK rel="alternate" type="application/pdf" media="print" href="page.pdf">

また、出力装置によってスタイルシートを変更するという方法もあります。
以下は出力装置がscreenの部類なら『style0.css』、 handheldかtvの部類なら『style1.css』を適用するように設定されています。

<LINK rel="stylesheet" type="text/css" media="screen" href="style0.css">
<LINK rel="stylesheet" type="text/css" media="handheld,tv" href="style1.css">

ヘッダ部のスタイル設定に直接適用することも可能です。 クラス『heading』の文字に対し、出力装置がscreenの部類、 handheldかtvの部類で装飾を変えます

<STYLE type="text/css" media="screen">
.heading{text-align:center;font-size:1.5em;color:blue;font-style:italic}
</STYLE>
<STYLE type="text/css" media="handheld,tv">
.heading{text-align:center}
</STYLE>

外部スタイルシートに対して、media属性を設定しておけば、 出力装置の特性上不要な(表現不可能な)情報は取得しなくてすむようになります。
例えば、音声ブラウザには、視覚系ブラウザ用のスタイルシートは無意味ですし、 モバイル装置や低解像度の装置などでは、色の表現に制限があります。
今後インターネットが発展していき、あらゆる機器でウェブサイト閲覧がなされるようになれば、 こういった出力装置の特製にあわせてたページを提供をすることが、重要となってくるでしょう。

<<前へ  |上へ|  次へ>>
123456789101112131415

広告掲載で簡単収入!!登録無料のアフィリエイトプログラムなら導入は安心。
Click Here! リンクシェア アフィリエイト紹介プログラム http://draft.j-a-net.jp/banner/NEXT アクセストレード
アフィリエイトプログラム比較

TOP] [HOME

更新日時:2014/08/09