id:hirapi2104
ポイントあり70ptベストアンサーあり
コンピュータウェブ制作

自宅ウェブデザイナーです。仕事でショッピングサイトを現在制作中で、XHTML 1.0 Transitionalで外部スタイルシートを適用させています。

変更前のサイト（他社制作）はテーブルレイアウトだったのですが、私が現在制作しているサイトはなるべくウェブ標準に準拠しているので、スタイルシートを外しても十分見れます。

そこで、このままで携帯サイトとしても活用したいと思い、携帯で表示させた場合にのみ、スタイルシートの適用を外す、という処理をしたいのですが、やり方がわかりません。

通常のスタイルシートを読み込むと、携帯ではとても見にくい表示になってしまいますが、、かといって携帯用に別のスタイルシートをつくるような時間がありません。

もちろんネットで検索してみましたが、これといった方法は見つかりませんでした。

中身が空の「handheld.css」を別に作り、media="handheld"で読み込んでみましたが、やはり携帯でも通常のスタイルシートを読み込んでしまいました。（通常のPC用のスタイルシートは「media="screen,print"」としています。）

よろしくお願いいたします。

回答の条件
  • 1人2回まで
  • 登録：
  • 終了：2010/12/29 23:40:06
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:asuka645 No.1

回答回数856ベストアンサー獲得回数97

一概に携帯電話といっても、DoCoMo、au、ソフトバンクによって対応は違いますし、機種によっても対応するCSSの規格が異なってきます。

また、DoCoMoなどでは media="handheld" は通用しません。

詳しい事情は「携帯サイトとPCサイトはここまで違う！」を参考にして下さい。


症療法的ですが、HTMLのheadタグの中で以下のようなJavaScriptソースを読み込ませるようにしてみてはいかがでしょうか。

if (navigator.userAgent.indexOf("MSIE") > -1 ||
navigator.userAgent.indexOf("Firefox") > -1 ||
navigator.userAgent.indexOf("Opera") > -1 ||
navigator.userAgent.indexOf("Safari") > -1 ||
navigator.userAgent.indexOf("Gecko") > -1) {
  document.write('<link rel="stylesheet" type="text/css" href="[PC用CSSファイル]"');
}
id:hirapi2104

素早い回答ありがとうございました。それでいただいたソースを組み込んでみたのですが、私の携帯（softbank934SH）では、どうしてもスタイルシートを読み込んで表示してしまいます。

ちなみにJavaScriptはほとんどわからないですが、以下のようにして<head></head>内に記述すればいいんですよね？

<script type="text/javascript"><!--この間にいただいたコード//--></script>

これを<head>タグの末尾に記述しました。合っているでしょうか？

2010/12/23 15:41:48

その他の回答（1件）

id:asuka645 No.1

回答回数856ベストアンサー獲得回数97ここでベストアンサー

一概に携帯電話といっても、DoCoMo、au、ソフトバンクによって対応は違いますし、機種によっても対応するCSSの規格が異なってきます。

また、DoCoMoなどでは media="handheld" は通用しません。

詳しい事情は「携帯サイトとPCサイトはここまで違う！」を参考にして下さい。


症療法的ですが、HTMLのheadタグの中で以下のようなJavaScriptソースを読み込ませるようにしてみてはいかがでしょうか。

if (navigator.userAgent.indexOf("MSIE") > -1 ||
navigator.userAgent.indexOf("Firefox") > -1 ||
navigator.userAgent.indexOf("Opera") > -1 ||
navigator.userAgent.indexOf("Safari") > -1 ||
navigator.userAgent.indexOf("Gecko") > -1) {
  document.write('<link rel="stylesheet" type="text/css" href="[PC用CSSファイル]"');
}
id:hirapi2104

素早い回答ありがとうございました。それでいただいたソースを組み込んでみたのですが、私の携帯（softbank934SH）では、どうしてもスタイルシートを読み込んで表示してしまいます。

ちなみにJavaScriptはほとんどわからないですが、以下のようにして<head></head>内に記述すればいいんですよね？

<script type="text/javascript"><!--この間にいただいたコード//--></script>

これを<head>タグの末尾に記述しました。合っているでしょうか？

2010/12/23 15:41:48
id:tama213 No.2

回答回数486ベストアンサー獲得回数30

ポイント70pt

ソフトバンクの携帯の一部では、携帯、PCの順に書くとすべてのCSSが読まれます

以下のような順番にすれば、携帯用だけ読まれます。

1.<link ～ media="screen, projection" />…PC用

2.<link ～ media="handheld, tty" />…携帯用

http://34567.jpn.org/study1/css/cssv.html

id:hirapi2104

回答ありがとうございました。CSSの記述の順番というのも関係するんですね。勉強になります！

しかしお教えいただいた通りの記述に変えてみたのですが、私の携帯（softbank934SH）では、PC用のスタイルシートを読み込んでしまいました。

ソフトバンクの携帯だけの現象なんでしょうかね？

そのあたりをちょっとソフトバンクに聞いてみようかな？

2010/12/23 21:09:13

コメント（8件)

  • id:tama213
    tama213 2010/12/24 01:01:10
    >CSSの記述の順番というのも関係するんですね

    ソフトバンクの携帯のバグです。
    普通は関係ありません。
  • id:tdoi
    tdoi 2010/12/24 15:11:09
    携帯サイトだとJavaScripは動作しないので、asuka645さんの方法は動かないと思います。
    スマートフォンなら別ですが。

    サーバサイドで出力する際にCSSを切り替えるのが手っ取り早い気はしますが、静的ページだとうまくいきません。

    発想を変えて、cssを動的に読み替えるというのは駄目ですか？
    一例ですが、仮にcssというディレクトリに配置するとして、ページのヘッダーには、

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

    とでもしておいて、
    cssディレクトリ内の.htaccessで、mod_rewriteを使って、default.cssをdefault_css.phpとかに書き換えるようにして、default_css.phpでは、ユーザエージェントなり、アクセスポイントなりから判断して、default_pc.css、あるいは、default_handheld.cssの内容を返してあげればよいかと。

    判断基準によっては、.htaccessだけの制御でも大丈夫とは思います。

    何かの参考になれば。
  • id:asuka645
    あすか 2010/12/24 16:23:53
    ＞hirapi2104さん
    携帯の標準ブラウザを利用していますか？
    それとも他のブラウザ（Opera, jigなど）を利用されていますか？

    ＞ソフトバンクの携帯のバグです。
    それは初耳です。

    ＞携帯サイトだとJavaScripは動作しないので、asuka645さんの方法は動かないと思います。
    JavaScriptが動かない携帯の方が、むしろ好都合のスクリプトなんですが。
    よく読んでからコメントしてくださいね。
  • id:tdoi
    tdoi 2010/12/24 18:15:11
    ＞asuka645さん
    すいません。PC用のみ書き出すということですね。
    念のため確認ですが、JavaScriptが動く場合にのみPC用のCSSを読ませるという意図は分かるのですが、逆に携帯用のCSSはどのように読ませるのですか？以下のように上書きさせるということでいいでしょうか？

    <link rel="stylesheet" type="text/css" href="[携帯用CSS]"/>
    <script>
    <!--
    if (navigator.userAgent.indexOf("MSIE") > -1 ||
    navigator.userAgent.indexOf("Firefox") > -1 ||
    navigator.userAgent.indexOf("Opera") > -1 ||
    navigator.userAgent.indexOf("Safari") > -1 ||
    navigator.userAgent.indexOf("Gecko") > -1) {
    document.write('<link rel="stylesheet" type="text/css" href="[PC用CSSファイル]"');
    }
    -->
    </script>
  • id:asuka645
    あすか 2010/12/24 19:31:49
    ＞逆に携帯用のCSSはどのように読ませるのですか？
    質問者さんは「携帯で表示させた場合にのみ、スタイルシートの適用を外す、という処理をしたい」と仰っているので、この場合、携帯でCSSを読み込む必要はないと思いますが。

    また、もし携帯でCSSを読み込む必要があるとしたら、私が回答した通り、キャリア・機種によって千差万別ですので、PCより細かい条件分岐をさせる必要があります。
  • id:tdoi
    tdoi 2010/12/25 01:51:08
    >asuka645さん
    携帯の場合はCSSを全く当てたくないということでしたね。
    すいません。僕の方が質問を勘違いしていました。
    たびたび、失礼しました。
  • id:hirapi2104
    hirapi 2010/12/25 20:27:36
    あ、すみません質問者（hirapi2104）です。

    asuka645さんのご質問
    ＞携帯の標準ブラウザを利用していますか？
    ＞それとも他のブラウザ（Opera, jigなど）を利用されていますか？

    これは携帯の標準ブラウザです。
    機種はソフトバンクの934SHです。

    asuka645さん
    tama213さん

    お二人にご提案いただいた方法を二つとも試してみましたが、どうやっても
    私の携帯では通常のPC用のスタイルシートを読み込んでしまいます。

    tdoiさんのご提案いただいた方法は、高度すぎてちょっと私には理解できず、テストに至っておりません。

    tama213さんのおっしゃる通り、ソフトバンクの携帯特有のバグなのでしょう。

    私のやりたいことは

    ・PCでアクセス→PC用に用意したスタイルシートを読み込んで表示
    ・携帯でアクセス→スタイルシートを読み込まずに表示

    これだけなんですが…以外と難しいですね。

    ただ、ソフトバンクの携帯特有の現象だとしても、そこを無視するわけにも行かないので
    あきらめるか、携帯用のスタイルシートを別に用意するしかなさそうですね。

    それは股別の意味でハードルが高そうですし
    今回はとりあえず時間もないので、あきらめざるを得ないかなぁ…と思っています。

  • id:tdoi
    tdoi 2010/12/28 19:53:45
    JavaScriptをオフにした状態でPCからアクセスするとどうなりますか？
    もし、この状態でCSSが当たってしまっているのであれば、ソースを確認してみてください。

    <link rel="stylesheet" type="text/css" href="PC用CSSファイル">

    という項目がないか探して見て下さい。<script>の内部以外にあれば、何かがおかしいです。

    あとは、端末次第ですがキャッシュにも注意してください。変えたつもりでもキャッシュが読まれてしまえば、当たっているように見えますので。一度、キャッシュを削除して試してみてください。

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ