HTML5に書き換えてみた
10.グローバルナビでの移動
グローバルナビで移動する場合、PCとスマホでは微妙に移動先が異なります。
PCの場合は、グローバルナビで移動を掛けた場合には次のページの先頭に移動しなくてはなりません。 同じページのボタンをクリックした場合には、画面は変化してはいけません。
スマホの場合は、グローバルナビで移動を掛けた場合には次のページの中の内部ナビに移動しなくてはなりません。 同じページのボタンをクリックした場合には、そのページの内部ナビに移動しなくてはなりません。
HTML文書中nav部は、ここまで下の様に記述しており、PCでの移動方法にそったものでした。
PC、スマホ各々にふさわしい画面移動に書き換えなくてはならず、第一歩としてJavaScriptで挑戦して見ました。
しかし、どうも上手くいきません。
難易度を上げるのはあきらめて、慣れてきたcss文書の使い分けでいく事にします。
HTML文書中にはPC用とスマホ用の両方を記述しておき、PC用CSS文書の中でスマホ用記述をdisplay:noneに設定、スマホ用CSS文書の中でPC用記述をdisplay:noneに設定します。
下が、書き換え後のHTML文書です。PC用のaにa.PCと名前を付け、スマホ用のaにa.SPと名前を付けています。
一方css文書は、PC用、スマホ用で、以下の記述を追加します。
PC用css
スマホ用css