【XHTML＋CSS】07_多様なデバイスでのCSSデザイン

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

メディアタイプの指定方法

@mediaでメディアタイプを指定

1
2
3

@media screen {  　p {...}  }
@media print {  　p{...}  }
@media screen, print {  　p{...}  }

メディアごとにスタイルがそれほど変わらない場合や、1枚のCSSファイルですべてのスタイルを管理したい場合。

@importでメディアタイプを指定

1	@import url ("base.css") screen; @import url ("print.css") print; @import url ("proj-tv.css") projection, tv;

XHTMLのlink属性でメディアタイプを指定

1
2
3

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
<link rel="stylesheet" type="text/css" media="projection, tv" href="css/proj-tv.css" />

プリンタの印刷可能領域について

A4サイズ1枚に対して、縦方向印刷では650px、横方向印刷では1,000px程度が印字対象となる。

改ページ位置について

たとえばh2要素の直前で常に改ページしたい場合には

1	h2 {page-break-before: always;}

h2要素要素の直後で改行したい場合は

1	h2 {page-break-after: always;}

特定の要素の途中で改ページが行われるのを防ぎたい場合は

1	table {page-break-inside: avoid;}

auto	改ページについて特に指示しない（ブラウザに任せる）
always	その要素の前後で常に改ページする
avoid	その要素の前後での改ページを避ける
left	改ページ後に見開きで左ページになる場合に、その要素の前後で改ページする
right	改ページ後に見開きで右ページになる場合に、その要素の前後で改ページする

その他覚えておくと便利なテクニック

印刷に不要な内容の非表示化

1	display: none;

で印刷されないようにする。

印刷時にはマルチカラムレイアウトにしない

印刷時のCSSサポートの問題や、印刷可能領域の制約といった理由から、印刷時にはシンプルなデザインにしておく。

印刷時にリンクURLを出力する

a要素のhref属性を印刷することができる

1	a:after {content: "("attr(href)")";}

相対パスで指定されているサイト内へのリンクの場合

1	a:after {content: "("attr(href)")";}

また、外部サイトへのリンクについては、a要素に.eternalといったクラスを指定しておく

1	a:eternal:after {content: "("attr(href)")";}

iPhone/iPod touchのホーム画面用アイコンを作成する

57×57pxのPNG画像（上下1pxは白くとぶ）を用意し、XHTMLファイルのhead要素に次のように指定する

1	<link rel="apple-touch-icon" href="icon.png" />

JavaScriptによるデバイス別ページ振り分け

PHPなどで振り分けるか、次のようなJavaScriptを用意し、ユーザエージェントの種類によって異なるページに振り分けることができる。

<script type="text/javascript">
//<![CDATA[  //PSPのブラウザによるアクセスの場合
if (navigator,userAgent.indexOf('PSP') >= 0) {  　window.location.replace('psp.html');  }
//Nintendo DSのブラウザによるアクセスの場合
if (navigator,userAgent.indexOf('Nitro') >= 0) {  　window.location.replace('ds.html');  }  //]]>
</script>

外部リンク

»CSS Nite in Ginza, Vol.28フォローアップ | CSS Nite公式サイト

こちらの関連記事もあわせてどうぞ！

返信をキャンセルする。