スマホ用ページ作成での分からないこと

質問

スマートフォン用ホームページを作成します。
パソコン用ホームページとは別にjqueryを使用して簡単なページを作成予定ですが、こちらのOKWaveのようにスマホでパソコン用ページの先頭に『スマホ用はこちら』というリンクを付けて閲覧者に選択して頂いて表示したいのです。
スマホもタブレットもパソコン用とスマホ用のページを行ったり来たりできるようにスマホでパソコン用のページを開いた時に上部にリンクを付けるのはどうしたらいいのでしょうか。

よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

スマホはmediaでいうとパソコンと同じscreenです。ここはわかってますよね。
そして、ウェブサイトを作られているなら、当然下記は基礎ですから御存知かと・・
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

　単にスマホ・パソコンなんてscreemメディアだけでなく、「携帯電話、モバイル機器、音声入出力機器」プリンター、そしてなによりも検索エンジンに対応できるから、
わざわざHTMLでウェブページを作るのです。
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
＞スマホでパソコン用のページを開いた時に上部にリンクを付けるのはどうしたらいいのでしょうか。
　それ自体は、mediaqueryでウィンドウ幅でスタイルシートを変更すればよいです。
恒久、あるいは標準スタイルシートのmedia:screenスタイルシートで
header p.goSP{display:none;}
とでもしておいて
@media only screen and (min-device-width: 760px){
section p.goSP{display:block;}
です。
　基本的にmedia別スタイルシートと同じです。
　⇒14.2.4 出力メディア型( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.2.4 )

ただ、それはターゲットをスマホだけに限定したページがある場合に限ります。

本来はmediaqueryは、パソコン用にデザインされているページをスマホ用のデザインに変えるときのためです。

お礼

早速の回答、ありがとうございました！
大変勉強になりました。
mediaquery　は、初めて体験しました。とても便利なものなんですね。
私の思っていた通りのページが作成できました！
本当にありがとうございました！！