レスポンシブWebデザインでリンク先を変更したい

質問

いつも助けて頂き重宝しております。
今回はレスポンシブWebデザインでご存知の方いらっしゃいましたら、
よろしくお願い致します。

トップページはレスポンシブデザインで作成しているのですが、
そこから先の着地ページがどうしてもＰＣ用とスマホ用に分かれているため、
画面サイズに応じてリンク先を変更したいのですが、そのようなことは可能でしょうか？

「トップページ」レスポンシブデザイン
「次のページ」バナーをクリックすると
　　　　　　　　　┃
ディスプレイサイズでリンク先を変更
　　　┏━━━┻━━━┓
スマホの場合　　　　　ＰＣの場合
　　　┃ 　　　　　　　　　　┃
　リンク先Ａ　　　　　　リンク先Ｂ

このようなイメージです。。。
できる限りスタイルシートで実現できればと思っておりますが、
難しいようであればどんな手段でも構いませんので、
ご教授の程よろしくお願い致します。

回答No.2

f1204-okw · ベストアンサー

不可能ではないです。

【スタイルシートで実現する場合】
「次のページ」バナーを二つ配置します。
それぞれ別々のリンク先が設定されています。
ディスプレイサイズに応じて適切なほうのバナーのみを表示するようにスタイルシートを記述します。
たとえば画面幅がスマホサイズのとき、PC 用のバナーに
display: none;
が設定されるようにするのです。

【JavaScript で実現する場合】
window.innerWidth プロパティなどからブラウザの表示幅を取得します。
この値に応じて、「次のページ」バナーの href 属性を適切なものに書き換えます。
たとえば
if (window.innerWidth < threshold) {
document.getElementById('nextPage').href = hrefToMobilePage;
}
のようにします（変数や id 属性の値は適宜書き換えてください）。

私個人の感想ですが、どちらも本質的な解決ではないように思います。
スタイルシートで実現する場合、HTML 文書に余計なアンカー要素を追加することになります。
JavaScript で実現する場合、本来 HTML の機能だけで実現できるハイパーリンクに余計な操作を加えることになります。

小手先の解決と感じられるのは、あなたのサイトにおけるレスポンシブデザインの使い方が本来の意義に反しているからです。
レスポンシブデザインの考え方は、単一のコンテンツを異なるデバイスで快適に見るためのものです。
内容と見え方を分離するという思想に基づくのです。
一方でリンク先を分ける対応は、異なるデバイスそれぞれに異なるコンテンツを用意することです。
見え方も内容の重要な一部であるという思想に基づくのです。
（個人的な見解です）

諸事情のため仕方のない対応なのかもしれません。
しかしできれば、本来の目的や、レスポンシブデザインを用いることで実現したかった結果を振り返ってみてください。

お礼

ご説明ありがとうございます。そうなんです。。。
２つの異なるリンク先がそれぞれ別会社のシステムでそれぞれがレスポンシブとそうでないものになっておりまして。。。その中でも自社サイトだけはレスポンシブで構成したいと思っており、このような事情となっております。
正直小手先の解決しかないかなぁと思っていたところですので、頂いた回答で大変助かりました。また機会がございましたら、よろしくお願い致します。

回答No.3

ORUKA1951

例ですが・・
マークアップは、
<div class="nav">
　<ol>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ol>
</div>
HTML5でしたら<nav></nav>になる。
レスポンスで、呼び出される外部スタイルシート(B)の一方に
div.nav ol li+li{display:none;}
と書いておけば良いだけです。検索エンジン、通常のパソコンには全部表示されますが、スマホにはスタイルシート(B)が適用されて二つ目のナビゲーションは見えない。
　逆や、一方しか見せないことも同様に簡単です。

お礼

具体的なソースまでご説明ありがとうございました。複数のリンクから不要なものを非表示にする方法でチャレンジしたいと思います。また機会がございましたらよろしくお願い致します。

回答No.1

t_ohta

スタイルシートでリンク先を変えるなら、両方のリンクをHTMLに書いておき min-width で分けた各スタイル指定でリンク部分の要素を display:none; か display: block; に切替えてやればいいのではないでしょうか。

お礼

ご説明ありがとうございます。両方を記載しておいて必要に応じて消す方法なんですね！これでチャレンジしてみたいと思います。ありがとうございました！