ADP: handheldメディア用CSSの作成（2）

2004年05月12日 15:14 | コメント(2) | トラックバック(2)

handheldメディア用CSSの作成（1）のつづき。今回は、Operaで動くhandheldメディア対応のCSSを「ちゃんとした形で」作るための対策について。

まず、validは別にいいよAH-K3001Vでデザインが変わりさえすれば、という人は、HTML中に

<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

のように書いて、handheld.cssにCSSを書けば、Operaはスモール・スクリーン・レンダリングではなくそちらのCSSを優先してくれる。好きなようにやってください。CSSに関するtipsとしては、

img, input, textarea {
max-width: 98%;
}

のように、横幅がはみださないようにmax-widthを適宜書いてやるとよろし。

つぎに、上記のをやって、さらにValidatorで通りたい、という人は、ってのは実はよくわからない（っておい！）。validにすることはできても、warningsをなくす方法がさっぱり。CSS ValidatorでMediumをhandheldにして、うまくいく方法があったら教えてください。

で、最後に、ADPでどうやっているかについて。

まず、HTMLでは

<link rel="stylesheet" type="text/css" href="http://adp.daa.jp/styles-site.css" />
<link rel="stylesheet" type="text/css" href="http://adp.daa.jp/handheld.css" media="handheld" />

のように、link要素でstyles-site.cssとhandheld.cssを呼び出す。そのうえで、handheld.cssは空（0バイト）にする。styles-site.cssのほうは、

styles-site.css概念図（5.6KB）

のようにall用、print用、screen用にスタイルを指定する。さいきんのパソコン用ブラウザでは、画面で見るときにはall+screenの指定が、印刷するときはall+printの指定が適用される。allのところは@mediaを書かないようにすると、NN4やMacIE5なんかではallのCSSだけが適用される。

Operaのスモールスクリーンモード（Shift-F11）では、link要素でhandheld.cssを（いちおう）呼び出しているのでスモール・スクリーン・レンダリングがうまく回避されて、all用のCSSだけが適用される。なんか非常にあくどいが。

handheld.cssは、なんにも書いていないのでvalidにもならないが、CSS ValidatorでMediumをhandheldにしてもerrorもwarningも当然でない。styles-site.cssはMediumをhandheldにすればerrorがでてしまうが、そもそも"all"用だし、といって逃げることができる（いいのか？）。

うーん、ADPでやっているやりかたはおすすめできないが、ほかにもっといい方法も思いうかばないなあ、というわけで今回はここまで。

トラックバック(2)

トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/171

handheldメディア用CSSの作成（3）(Alternative Design Project): 2004年05月13日 12:14: Opera搭載のPHS、AirH" PHONE AH-K3001Vが5月14日発売とのことで、これに乗じてhandheld用CSS作成を(1)、(2)と作ってきたわけだが、今回はまとめ。 ssさんのコメントから類推するに、やはりCSS Validatorにはhandheldがらみでなんらかのおかしな部分がありそうだ。あるい...
携帯向のCSS(かんきちのザレゴト): 2004年06月26日 01:32: 以前から某会社のサイトの制作・メンテナンスを任せてもらってるんだけれど、今まで携

コメント(2)

ss: 2004年05月12日 17:10: CSS Validatorの不思議ついでに・・。
「ソースファイルをアップロードして検証」だとMediumをhandheldにしてもerrorが出なかったりしますね。
Momomo: 2004年05月12日 17:30: ありがとうございます。CSS Validatorのバグ、というのも十分考えられるということですね。

ADP: handheldメディア用CSSの作成（2）

トラックバック(2)

コメント(2)

ナビゲーション