Opera

Charles McCathieNevile

CSS Nite 10月 2006
chaals @ opera.com
Opera
View with Opera anywhere!

Adaptation with Style

Charles McCathieNevile

chaals@opera.com

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

注意! Acid2テスト結果のページに、さらに他のCSSを適用すると壊れます。

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

リキッドレイアウト

スペースを活用しよう。

Cool! So Simple!

3コラムでトリック

<div class="colr">
   <div class="bl">

[中央のコラムの内容]

   </div>

[右側のコラムの内容]

 </div>

[左側のコラムの内容]

.colr { float: right;
    width: 66% }
.bl { float: left; 
    width: 50% }
ソースの順番
読みやすい順番
ポジショニング
3コラム レイアウト

W3.org もソースの順番は異なりますが、この3コラムレイアウトを使用しています。

(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

パワフルな適合能力

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.

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