CSSテクニックコミュのJavascriptによるCSS振り分け（至急！）

初めまして！非常に困っているので助けてください。

CSSを使ってテキストのサイズをpx指定しているのですがMacIEとWinIEで大きさが違うとクライアントに言われてしまいました。

クライアントからは「JavascriptでOS判別してCSSを振り分けろ」と言われましたがWebで捜したところちんぷんかんぷん・・・。

ほんとに困っています。助けてください！

コメント(34)

最初
全て
最新の40件

[1] mixiユーザー 08月18日 23:16

◆ window.navigator.platform (e4/N4)
ブラウザのプラットフォームを表す文字列（"Win32", "Win16", "WinCE", "Mac68k", "MacPPC", "HP-UX", "SunOS" など）を返します。

これじゃない？

[2] mixiユーザー 08月18日 23:19

経験上、至急とか書くのは逆効果だと思いますが。
仕事で至急なら金払えと言われても仕方ないですし。

というコメントを読みたい気分でもないでしょうから本題に。

まず、なにがちんぷんかんぷんなんですか？
それが分からないとこちらも説明のしようがないと思いますが。
何故行き詰まったかも分からない状態で説明するのは大変困難です。困ってるのはよく分かりますが、落ち着いて説明して下さい。

というわけで
http://www.aboutworks.com/shokodei/diary/doc/select/select_3.html

に使えそうな記事がありますが、これは理解できますか？
個人的にはクライアントに言われてもJavascriptで
振り分けようとはあまり思いませんが。

[4] mixiユーザー 08月18日 23:40

お仕事でウェブ制作を依頼されたんですよね？
だとしたら、「ブラウザを判別してCSSを切り替え」がちんぷんかんぷんというのは、かなりヤバイと思いますが…。
とりあえず、ひとつURLを紹介します。

http://www.openspc2.org/reibun/javascript/#3

ただ、ブラウザやOSによらず、全て同じ様にテキストを表示させることは不可能です。クライアントが納得する仕上がりが、どこまでの要求なのかによりますが、CSSをどう設定したら良いかは、そのページのレイアウトやデザインによって変わってくるので、ちょっと大変かも知れません。
いずれにしろ、今後の事を考えたら、きっちり理解しておいた方が良いですよ。

[5] mixiユーザー 08月19日 00:56

私だったら、JavaScript なんか使わないで、CSS 側で分岐させてしまいますが…。
もちろん、Invalid なのはわかった上で、ですけど。

http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

[6] mixiユーザー 08月19日 02:00

＞ちゅんまるさん
＞お仕事でウェブ制作を依頼されたんですよね？
見たところ、ただのグラフィックデザイナーのようなのでスクリプトにはそんな強くないんでせう

[7] mixiユーザー 08月19日 02:33

＞6: ぬゎんこ【・ω・】さん
そういった邪推（推測）は意味がなさそうなのでやめておいた方が。

[8] mixiユーザー 08月19日 02:39

WinIEとMacIEで分けたいのであればJavaScriptでなく外部CSSファイルの文字コードを変えるだけでも分岐できます。JEDITなどでMacIE以外の共通のCSSファイルをUnicodeで保存します。次にMacIEで読み込ませたいCSSファイルをUTF-8やSHIFT JISなどにします。
あとは
<link rel="stylesheet" href="top_macie.css" type="text/css" media="all">
<link rel="stylesheet" href="top.css" type="text/css" media="all">
のようにすればMacIEと、それ以外でCSSを分けることができます。
実際のページで使っています。
http://www.openspc2.org/reibun/Motion2/

[9] mixiユーザー 08月19日 02:43

コメント分岐を使う方法もあります。
以下のようにするとall.cssは全てのブラウザで（含むMacIE）、ie.cssはWinIE5以降で読み込まれます。
<link rel="stylesheet" type="text/css" href="all.css">

[10] mixiユーザー 08月19日 02:49

「できると思います」と自分の範疇を超えた要望も全て受けるのでなく
それらしい説明を並べ、断ることも１つの手です。

要はクライアントが納得・満足すればいいことですから。。

[11] mixiユーザー 08月19日 02:51

＞イソムラさん
とゆーか、そのクライアントに対して、グラフィックデザイナーにjavascriptまでくませるかって感じだったんですが
クライアントは仕事の依頼の時にそういうことも踏まえて(数種のブラウザに対応させろだとかを)仕様書を出すべきだろうとか云々
最初から言われてたんならちょっとアレだろうけど

って、最悪の場合は画像でやればテキストブラウザとかでもない限り大きさ変わらんだろうしとか考えてしまった自分

[12] mixiユーザー 08月19日 02:56

JavaScriptでMacIEとWinIEを振り分けるなら以下のようにします。macie.cssがMacIEで読み込むCSSファイル、winie.cssがWinIEで読み込むCSSファイルになります。

ua = navigator.userAgent;
if (ua.indexOf("MSIE") > -1)
{
if (ua.indexOf("Mac") > -1)
{
document.write('<link rel="stylesheet" href="macie.css" type="text/css" media="all">');
}else{
document.write('<link rel="stylesheet" href="winie.css" type="text/css" media="all">');
}
}

[13] mixiユーザー 08月19日 11:43

ご自分のメシのタネ（らしきもの）を、「至急！」とまで書いて他人に尋ねた割には、
お礼の書き込みもないようですね。
もしかしてまだ解決していないのでしょうか。
それなら現状報告された方が、また教えて頂けるかもしれませんよ。

[14] mixiユーザー 08月19日 12:08

DTPをよく知ってるクライアントの場合、このクレームはたまにありますね。Webも同じ感覚で見るので。以前、ほんの僅かな差異までひどくうるさいとこがあって、当時考えられた各OS＆ブラウザの環境パターン9つにCSSを分岐させたことがありました。今はまだ単に「MacIEとWinIEで大きさが違う…」で済んでても、後からもっといろいろと言ってくる可能性大ですね。“10: ちん。さん”の言うように、ある程度のところで、こちらのペースでクライアントを妥協・納得させるように説明できないと、時間的に赤が出ちゃいます。

[15] mixiユーザー 08月19日 14:22

全部、画像+クリッカブルマップ or FLASHで！
いや、ウソです。ゴメンなさい。

でも、今回のような無茶な要求って案外多いんじゃないですかね？
全OS、全ブラウザで同じに見せること自体が不可能なのに
それに拘って気が付くと全要素がピクセル絶対指定になっていたとか。
見た目の配置に拘って使途不明のDIV要素の応酬になっていたとか。

結局はクライアントと妥協点を見出せるかということなんでしょうか。
その妥協点を見出すためにも、色々なテクニックは知っているに越したことはない…？

[16] mixiユーザー 08月19日 15:48

今時そんなﾘｸｴｽﾄありかよ参っちまうぜ！というのはおいといて、

HIROCHINKOさんがどんな指定をしてるのか分かりませんが
昔私もピクセル指定で作った際に、
大きさの違いを指摘をされたことがあり、単にCSSを何種類も用意すること無くフォントを等幅指定にしたらすんなりOKとなったことがあります。
クライアントさんはIEだけでの話をしているみたいなので、ちょっと試してみてはいかがでしょうか？

といったこともふくめ、皆さんのｱﾄﾞﾊﾞｲｽすらちんぷんかんぷんで
困ってはいないだろうか？と老婆心ながらHIROCHINKOを心配するのでした。おーいHIROCHINKOさーん

[17] mixiユーザー 08月19日 19:18

参考になるかどうか分かりませんが、とりあえずCSS Hackの一部と、実行結果をいろいろなブラウザでキャプチャーした結果のページを用意しました。（CSS Hackのカテゴリ）

http://www.openspc2.org/reibun/css/index.html

[18] mixiユーザー 08月19日 23:20

文字の大きさに依存しないスタイリッシュかつ機能的なサイトデザインであればクライアントも納得してくれるでしょう。

各OS、ブラウザで同一視っていうのはほぼ不可能に近いのではないのでしょうか、、、。

[19] mixiユーザー 08月20日 09:12

古籏さん、頑張りすぎ(^^;
でも色々な方法、自分も勉強になりました。

HIROCHINKOさん、今見たら大学の同窓生ですね。
頼むから落ち着いたら何らか一報を。

[20] mixiユーザー 08月20日 10:08

本題と関係ありませんが、黙々と回答を続ける古籏さんに
目が止まってしまいました。

思わずコメントしてしまいますが、ありがとうございます。

[21] mixiユーザー 08月21日 01:44

至急！とかモノを頼む姿勢じゃなもんね。
最初から。

古旗さん、お疲れ様でした。

[23] mixiユーザー 08月22日 15:16

OS・ブラウザ違いによるWEBの特性とかって事前に説明してないんですかね？
説明次第では分岐の件も回避できると思いますが…
あと仕事を請けておいて、分岐がチンプンカンプンっていうのもどうかと思いますが…

気になったので書き込んでみました。

[25] mixiユーザー 08月22日 17:56

気になって気になって気になって仕方ないので、書き込みします。

おそらくトピ主さんは、自分でできるものを思って
仕事を受けてしまったのでしょうね。

私も（も、でいいのかな？）グラフィック・デザインの仕事をしています。

紙媒体のデザインの流れで、Webの仕事を依頼されることも時々ありますが
かつてはWebを甘くみていて、着手してから事の次第に気がついて
泣きそうになりながら、仕上げた事があります。
（この。ちんぷんかんぷん・・・の状態だったのですね。）

自分の領分と能力が痛いほどわかった今は
Webの仕事が来た時は、デザインだけして後は外部の協力者に依頼し、
自分の手元でやる時は、デザイン重視、少ないボリューム、ゆとりの時間・・・
というように決めています。（それでも大変！）
もっとも、外部に依頼するにしても自分も理解していた方が良いわけで
時間をみつけては勉強してますが。

それから、中小のクライアントだと
まだまだWebの特性うんぬんについては理解が無いですよね。
最初に説明したにもかかわらず、最後になって無理な要求をしてくる。
でも、その時点で再度説明をして
「できるけど、時間と金がかかる」話をすればだいたい解決するわけで、
まあ、クライアントにわかって貰うのも仕事ですしね。

HIROCHINKOさ～ん、
大変な状況なのかもしてないけど、みんな心配してるので
落ち着いたら、ご一報を。

グラフィック・デザイナー同士（って勝手に決めてるけど）
がんばろうぜい！

[26] mixiユーザー 08月22日 18:03

書き忘れましたが、
おかげで（ずっと気にしてたおかげで？）大変勉強になりました。

[28] mixiユーザー 08月23日 01:35

みなさん、こんばんわ。
あまりの反響の早さに困惑しておりました。

ほんとに自分の言葉の稚拙さに悲しくなっております。。。

おかげさまでなんとかなりました。
本当に助かりました。

最近の状況の変化に追いつくことができず、環境的にも上に誰もいないところなので助け船をと思い書き込みを失礼なしてしまいました。

皆さんの一言一言が勉強にもなり、考えさせられることもありました。
私の書き込みで気分を害された方もおられると思います。この場を借りて申し訳ありませんでした。

また、失礼ながら何か質問させていただくこともあるかと思いますが、その時はまたご助言いただけるとありがたいです。

本当にありがとうございました。

[29] mixiユーザー 08月23日 02:18

結局どうやったのか教えてください、後学の為に。

[30] mixiユーザー 08月26日 01:36

えっと・・・自分自身も含め後学の為に・・・。

結局javascriptを以下のように記載、外部ファイルにロールオーバー用、ウインドウクローズ用の外部jsファイルがありましたので下記の内容を記載しました。

if ((navigator.appVersion.indexOf("Mac") != -1)) {

document.write('<link rel=stylesheet href="マック用CSS" type="text/css">'); }

else {
document.write('<link rel=stylesheet href="ウインドウズ用CSS" type="text/css">'); }

としました。
各CSSファイルは相対パスにて設定。

のちにsafariでずれるとの指摘がありましたのでそちらは始めのif文を下記に変更、及び追加

if(navigator.userAgent.indexOf("Safari") >= 0){

これでうまくいきました。
冷静に考えると大分昔にちょこっとjavascriptを勉強しかけたときにこんな例題があった気がしました。
safariの解析をどうするかを調べるのに若干苦労しましたがなんとかなりました。

皆さん、本当にありがとうございました！

[31] mixiユーザー 08月26日 03:49

navigator.userAgentでSafariかどうかなどブラウザを判別するのであれば、ある程度のuserAgentの文字列は以下のページにリストアップしてあります。
http://www.openspc2.org/userAgent/

詐称できるので100%判別できるというわけではないのですが、必要十分だと思います。

[33] mixiユーザー 08月26日 11:12

＜32: ycumsさん
＜ふと思ったのですがpx指定なのに表示サイズが違うって言うのはなんでなんですかね。

そうなんです・・・。px指定しててもMac、Winの表示サイズが違うって・・・。僕も両方で確認してたんですが・・・。

ちなみにjavascriptで判別・振り分けをしたんですが、Mac用、win用の表示サイズが結局12pxに・・・。
クライアントの言うことなのでそのまま聞いてますがpt設定ならずれるのは分かるのですが、px設定でもずれることはあるのでしょうか？

ログインすると、残り6件のコメントが見れるよ