HTML5に書き換えてみた
10.グローバルナビでの移動


グローバルナビで移動する場合、PCとスマホでは微妙に移動先が異なります。

PCの場合は、グローバルナビで移動を掛けた場合には次のページの先頭に移動しなくてはなりません。 同じページのボタンをクリックした場合には、画面は変化してはいけません。

スマホの場合は、グローバルナビで移動を掛けた場合には次のページの中の内部ナビに移動しなくてはなりません。 同じページのボタンをクリックした場合には、そのページの内部ナビに移動しなくてはなりません。

HTML文書中nav部は、ここまで下の様に記述しており、PCでの移動方法にそったものでした。

書き換え前HTML文書

PC、スマホ各々にふさわしい画面移動に書き換えなくてはならず、第一歩としてJavaScriptで挑戦して見ました。

しかし、どうも上手くいきません。

難易度を上げるのはあきらめて、慣れてきたcss文書の使い分けでいく事にします。

HTML文書中にはPC用とスマホ用の両方を記述しておき、PC用CSS文書の中でスマホ用記述をdisplay:noneに設定、スマホ用CSS文書の中でPC用記述をdisplay:noneに設定します。

 

下が、書き換え後のHTML文書です。PC用のaにa.PCと名前を付け、スマホ用のaにa.SPと名前を付けています。

書き換え後のHTML文書

一方css文書は、PC用、スマホ用で、以下の記述を追加します。

  PC用css

書き換え前のCSS文書

  スマホ用css

書き換え後のCSS文書

 

 

 

書き換え後 画像クリックで実際のページ

ページトップ

前ページ←

→次ページ

コーナー