アプリ版:「スタンプのみでお礼する」機能のリリースについて

htaccessでスマートフォンからのアクセスを振り分けて、スマホサイトに転送するようにしています。
スマホサイトには「PC画面を表示」ボタンでPCサイトを見ることができるようにしています。

この時スマホサイトに設置した「PC画面を表示」ボタンはパラメータ(?mode=pc)付きでリンクさせたのですが、PCサイトのHTMLのみが表示され、cssが反映されません。(画像ファイルの画像などは表示されます)

色々な端末・ブラウザで試してみたところ、Androidスマホ(Android,chrome)やPC(IE,FireFox)などほとんどの場合上記の通りHTMLしか表示されません。
そのHTMLしか表示されていないPCサイトページを再読み込みすると正しく表示されます。
なぜかiphone(safari)は最初からPC画面が正しく(CSSを読み込んで)表示されます。

色々と調べたり試してみたのですが、解決策がわからず困っております。
初心者につき、なるべく分かりやすくご教授頂ければ幸いです。
よろしくお願い致します。

【.htaccessの内容】
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{HTTP_USER_AGENT} !iPad [NC]
RewriteCond %{REQUEST_URI} !/sp [NC]
RewriteCond %{QUERY_STRING} !mode=pc [NC]
RewriteRule ^$ /sp/ [R,L]
</IfModule>

【スマホサイトに書いたPCサイトへのリンク】
<a href="http://○○○○○.com/?mode=pc" >
何かのサイトで見て下記のようにしてみてもダメでした。
<a onclick='document.cookie="mode=pc;path=/;";' href="http://○○○○○.com/?mode=pc" >

【ディレクトリ】
下記が同一階層にあります。
・PC用のhtmlファイル
・CSSフォルダ
・SPフォルダ(中にindex.htmlなど他ファイル)
・.htaccess

質問者からの補足コメント

  • ご回答ありがとうございます。
    ご教授頂きました通りCSSのフォルダ名の前に/を付けて(/css/○○○.cssなど)絶対パスにしてみたのですが、やはりダメでした。
    画像については相対パスのまま(images/○○○.jpgなど)で表示されています。
    他に何かお気付きの点がございましたらまた教えて頂ければ幸いです。

    No.1の回答に寄せられた補足コメントです。 補足日時:2015/05/12 11:23

A 回答 (1件)

せっかくスタイルシートを使うのに、PC用とスマホ用を作るのは、典型的な誤った方法ですよ。


スタイルシートを使用する最大の目的は!!
・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
ここも
【引用】____________ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
 HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
・メディア依存のカスケード( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 フィーチャホン、ガラケー、いわゆる携帯電話用に、media="handheld,tty"、印刷用にmedia="print"、読み上げようにmedia="speech" とかを用意して、スタイルシートだけ異なる物を読み込ませます。
 ただ、HTMLから見るとPC用もスマホ用も、サイズ以外はまったく同じ
media="screen"
 なのですから・・
CSS3で拡張されたmediaqueryを使うとスマホのサイズ--縦にしたとき、横にしたときも含めて自在にデザインできるのですから・・
 ⇒CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き( http://webdesignrecipes.com/web-design-for-mobil … )
 ⇒ウェブサイトをスマートフォン対応するために必要な5つの事 | コノルブログ( http://conol.co.jp/blog/archives/837 )
 ⇒ウェブサイトをスマートフォン対応するために必要な5つの事 | コノルブログ( http://conol.co.jp/blog/archives/837 )

★基本はたった一つのHTMLを作成して、PC用、携帯用、必要なら印刷機用とスタイルシートだけを切り替える。
 ・・・数年前--スマホが登場してブームになった頃に、スマホ用や携帯用に別々のページを作成する誤った方法が流行したことがありますが、Googleなどが「SEO的にも極めてまずい」と警告し始めて今はほとんどないはずです。

その上で・・・とりあえずの対処法ですが
1) スタイルシートへのパスが絶対配置になっているか?
 示されたディレクトリ構成では、同じPATHだと異なるディレクトリを示すと思います。
 スタイルシートへのパスはルートから始まる絶対パスだと、HTMLがどこにあっても利用できます。
<link rel="stylesheet" type="text/css" media="screen" href="/styleSheet/standard.css">
<link rel="styleSheet" type="text/css" media="handheld,tty" href="/styleSheet/keitai.css">
<link rel="styleSheet" type="text/css" media="print" href="/styleSheet/print.css">
とか・・
この回答への補足あり
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!