Adaptation with Style

Charles McCathieNevile

chaals@opera.com

• リキッドレイアウト
• @media
• CSS3 Media Query

Clearly Strong Stuff / 疑いもなく強力な要素

• Acid2 は、ほぼCSSで記述されています
• このスライドもまた、CSSを利用して作られています
• なので、プリント用にもモバイル用にもなります

さて、どうやってCSSを上手に使おう？

リキッドレイアウト

スペースを活用しよう。

• %, em, exを使おう
• px, mm, 等は使わないようにしよう
• ウィンドウサイズは、ユーザの自由
• フォントサイズは、1emより大きく

(emってどんな大きさ？)

そのフォントが文字に使える最大の高さです。

そして、ex は"x"という文字の高さを基準とした大きさです。

リキッドレイアウトの限界

• 小さい画面では、一部のコラムが失われてしまう
• 画面は、プロジェクターとも紙とも違う
• 印刷とプリントはページ分けが必要

@media

シンプルな CSS 2 の適用

• 異なるデバイスへは、異なるルールを。
• 画面、印刷、ハンドヘルドデバイス
• プロジェクター、テレビ
• 点字、音声ブラウザ...
• そのほか全部

@mediaの利用 (1)

@media screen {
  body { ... }
  p { ... } }
@media handheld {
  p { ... }
  li { ...} }

@mediaの利用 (2)

<link href="R/ngw.css" rel="stylesheet"
     media="projection, screen, print, tv" />

<style type="text/css" media="handheld"><![CDATA[
.print {display:none}
ul { margin: 3px;padding:3px;list-style:none}

img.r { float:right ; padding: 0px; margin:0px }
.topright, .right, #s1 {display:none} ...  ]]>
</style>

OperaShow: @media

@media projection { 
.notes, .handout, .print { display:none; }
html, body, .presentation 
    { height: 100%; margin: 0px; padding: 0px; }

div.slide { page-break-after: always;
     margin: 0em 3em 0em ;
     padding: 0.2em 2em; height:80% }

CSS3 Media Queries

パワフルな適合能力

• 開発途中(Opera 8+, KHTML testing)
• デバイスの特性に合わせて
• デバイスの幅、解像度...
• 後方互換性あり
• しかし、ご利用は計画的に。

CSS3 Media Queryを使おう

px!! 注意して使おう!

@media projection and
  (max-device-height:480px) {body{ font-size: 12px; } }
@media projection and
  (min-device-height:480px) {body{ font-size: 16px; } }
@media projection and
  (min-device-height:600px) {body{ font-size: 20px; } }

ありがとございます

Worse than foolish questions
is the folly of not asking.

質問をしないということは、
悪い質問をすることよりずっと悪いことです。