• 締切済み

サイトのスマホ表示について教えてください。

同じHMTLファイルで、ディスプレイサイズに応じて異なる2つのCSSを読み込ませています。 サブドメインや、別ディレクトリーに、スマホ用のhtmlファイルはありません。 同じHTMLで別々のCSSです。 大手サイトでは「スマホサイトはこちら」、「PC版はこちら」というリンクをよく見かけます。多くのサイトは、スマホ用のディレクトリーやサブドメインに飛ぶようなのですが、これを、サブドメインやスマホ用のディレクトリーを使わずに、一つのhtmlファイルで行うには、どうすれば良いのでしょうか?

  • CSS
  • 回答数2
  • ありがとう数2

みんなの回答

noname#249914
noname#249914
回答No.2

クッキーを使った切り替えの具体的なコードは以下が参考になると思います。jQueryの導入が必須になります。 ■jQueryでcookieによるスマホサイトの切り替え https://gist.github.com/Noriakky/5841251 ■jquery.cookie を使ってサイトの状態を保存する http://weback.net/javascript/2137/

回答No.1

具体的なソースは記述しませんがアイディアを記載します。 PC版を見るクリック →  javascriptでクッキーにて例えば mode=pc  をブラウザにわたしてページリロード。 スマホ版を見るクリック → javascriptでクッキーにて例えば mode=smart  をブラウザにわたしてページリロード。 ページを表示するときにはjavascriptにてクッキーmodeの値を取得し pcならpc用のsmartならスマホ用のcssを読み込む もっといいやりかたあるかもしれませんが、アイディアの一つデス。

nob4649
質問者

お礼

アイディアありがとうございます。 いただいたアイディアを実現する上で、どこかにそのまま使えるコードが置いてあったりするのでしょうか? もしそうであれば、この機能を取り入れたいと思います。

関連するQ&A

  • PC用サイトをスマホに最適化するためには?

    こんにちは。 私は400ページくらいのサイトを運営しております。内容は映画関係。 どうやらHTML4.01にさえ準拠していないので、HTML5にするには相当時間がかかると存じます。それからCSSなどでスマホ用にも作れたらと思っています。 そのためにまずは既存の準拠していないページをスマートフォンで見られればいいかな!って思った次第です。でも見に来た人がスマホなのかパソコンなのか判断するのにCSSやJavaScriptが必要なんではないのかな!?と考えています。 で、CSSやJSでスマホと判断したらスマホ用のページに飛ばすという。ただ、これは1つのページにつきPC用とスマホ用の2つのページを用意しなければならないのではと困惑しています。 どなたか、道を照らして頂けませんでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • パソコンとスマホで、表示倍率をわけたい

    画像のサイズについて パソコンで表示するなら100%のサイズ、 スマホで表示するなら200%のサイズ、 と条件分岐するにはどうすればいいでしょうか? HTMLのタグかcssで可能ですか?

    • ベストアンサー
    • HTML
  • 携帯サイト(ガラケー)をスマホで表示時の文字サイズ

    携帯サイトをスマホで表示した際に、文字サイズが小さく読みづらいので スマホでアクセス時のみ、文字サイズを大きくしたいのですが 以下のタグを、htmlファイルのbody内に追記したのですが iphoneは問題なく大きく表示されましたが androidでは携帯サイトの文字サイズのままになってしまいます。 <html style="-webkit-text-size-adjust:150%;"> androidでも文字を大きくしたい際にはどのようにすればよろしいでしょうか? 希望としては別にCSSファイルを作らずに、携帯とおなじhtmlファイルで出来ればと思います。

  • サブドメインはミラーサイトなのでしょうか

    サブドメインで運営していましたが、この度独自ドメインを取得しました。 今は、これまでのサブドメインURLと新しい独自ドメインURLの2つのアドレスで全く同じサイトが見られる状態になっているのですが、これは「ミラーサイト」として扱われてしまうのでしょうか? 現在サブドメインのほうのURLがYahoo,Googleともに上位におり、独自ドメインのアドレスに修正依頼は出してあるのですが、サブドメインURLのほうはサイトを見られないようにしたほうがよいのでしょうか? リンク先等には独自ドメインに変更願いを出したのですが、大手検索エンジンのほうに載っているサブドメインが見えなくなってしまうと非常に困るので悩んでいます。

  • (HTML5 CSS3必須?)スマホサイト制作

    やっぱり、スマホサイトを構築していく上では、 HTML5 CSS3 は必須ですか? いい加減やらないとなとは思っているんですが・・・。 ほっぽらかしにしていました・・・。 でもスマホサイトも作りたいと思うようになって、 やっぱり覚えないとダメかな?って思ったので・・・。

  • たくさんサイトを作りたい

    独自ドメインを取得し、たくさんサイトを作ろうとした場合、それぞれサブドメインを作るのか、メインのサイトの下にディレクトリで分けた方がよいのでしょうか? また、同じドメイン内に違うジャンルのサイトを作った場合、ASPに副サイト登録しなければならないでしょうか?

  • ベーシック認証 CSSリンク

    Basic認証でアクセス制限をかけたディレクトリにあるファイルから、Basic認証でアクセス制限がかかっていないディレクトリにあるCSS(スタイルシート)にリンクさせることはできるのでしょうか? やはり、Basic認証でアクセス制限をかけたディレクトリにあるファイルから、Basic認証でアクセス制限がかかっていないディレクトリにあるファイルにリンクを張るのは、無理ですかね? 例: ディレクトリ構造: [Web](ホームページデータ格納用ディレクトリ) [Web]フォルダーには、以下のファイルとフォルダが格納されています。 index.html [css](cssフォルダの中身:example.css) [basic](basicフォルダの中身:.htaccess 、.htpasswd 、.data1.html ) 上記のディレクトリで、data1.htmlの<head></head>タグ内に下記HTMLコードを記述すれば、data1.htmlからexample.cssにリンクさせることは、できるのでしょうか? HTMLコード: <link href="../css/example.css" rel="stylesheet" type="text/css"> よろしくお願いします。

    • ベストアンサー
    • HTML
  • FC2の無料レンタルサーバーでサイトを製作していま

    FC2の無料レンタルサーバーでサイトを製作しています。 ファイルマネージャーにHTML,CSS,Javascriptのファイルを入れてサイトを作りたいのですがどうゆう形でいれればいいかわかりません。 rootディレクトリにHTMLファイルを入れないといけないみたいなのですが意味がよくわかりません。どなたかわかる人いないでしょうか? よろしくお願いします。

  • サブディレクトリで切って、サイトを複数作る

    メインサイトのドメインを、 サブディレクトリで切って、サイトを複数作ろうと思っています。 そのサブディレクトリのサイトというのは、 入り口にパスワードを付けた、会員制のものです。 複数というのは、大体5~10サイトくらいになります。 ここで思ったのが、サブディレクトリで複数のサイトを作ると、 メインサイトに支障があるのではないか?ということ。 メインサイトは、検索での集客をしています。 なので、サブディレクトリでペナルティを受けたりしたら困ります。 サブディレクトリで、複数のサイトを作ることで、 メインサイトに支障が起きたりするのでしょうか? サブディレクトリというのは、どれくらいの数までとか、 決められていたり、するでしょうか? よろしくお願いいたします。

  • PCとスマホでデザインを変えたいのですが

    http://iro-color.com/design/web/optimized-smartphonesite.html を見ると >CSSは複数の外部CSSを用意して画面サイズごとに振り分ける方法と、 1つのCSSファイルの中ですべて指定する方法があります。 PCサイトとスマホサイトでがっつりデザインを変えたい場合は外部CSSを、 部分的に替えるなら1つのCSSで管理した方が使い勝手がいいと思います。 とあるのですが 色はPCとスマホで同じで 文字のサイズやテーブルの幅だけを変えたい場合は 「PCサイトとスマホサイトでがっつりデザインを変えたい場合」 と 「部分的に替える」 のどちらに該当するのでしょうか?

    • ベストアンサー
    • CSS

専門家に質問してみよう