サブページもスマートフォン対応にする
「会社概要」「お問合せ」「製品紹介」の各ページをスマートフォンに対応させましょう。
HTMLファイルproduct ・profile ・ contact から、スマートフォン向けCSSファイルを読み込ませます。
それぞれページごとに必要となるCSSファイルが異なるので注意してください。
「製品紹介」ページをスマートフォン対応にする
まずは、「製品紹介」ページ（product ）です。
product からはbase_sp.cssが必要となります。
HTMLファイルのヘッダからlink要素で必要なCSSファイルを読み込ませます。
HTMLソース（product ）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css"> <title>製品紹介｜ウェブサンプル株式会社</title> </head> ： （以下略） ：
product への変更を保存したら、ブラウザで開いて確認しましょう。
ブラウザのウィンドウをリサイズして、横幅が800ピクセル以下になった場合にスタイルが切り替われば成功です。
横幅801以上の場合
横幅800以下の場合
スマートフォンでは、「製品紹介」ページは以下のような表示となります。
スマートフォン 縦位置
スマートフォン 縦位置
スマートフォン 横位置
「会社概要」ページをスマートフォン対応にする
次に、「会社概要」ページ（profile ）です。
会社概要ページではtable要素を使っているので、profile からはbase_sp.cssとtable_sp.cssが必要となります。
HTMLファイルのヘッダからlink要素で必要なCSSファイルを読み込ませます。
HTMLソース（profile ）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css"> <link rel="stylesheet" href="table.css"> <link rel="stylesheet" media="screen and (max-width:800px)" href="table_sp.css"> <title>会社概要｜ウェブサンプル株式会社</title> </head> ： （以下略） ：
profile への変更を保存したら、ブラウザで開いて確認しましょう。
ブラウザのウィンドウをリサイズして、横幅が800ピクセル以下になった場合にスタイルが切り替われば成功です。
横幅801以上の場合
横幅800以下の場合
スマートフォンでは、「会社概要」ページは以下のような表示となります。
スマートフォン 縦位置
スマートフォン 縦位置
スマートフォン 横位置
「お問合せ」ページをスマートフォン対応にする
最後に、「お問合せ」ページ（contact ）です。
contact からはbase_sp.cssが必要となります。
HTMLファイルのヘッダからlink要素で必要なCSSファイルを読み込ませます。
HTMLソース（contact ）
<!DOCTYPE html> <html> <head> <meta charset="shift_jis"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" media="screen and (max-width:800px)" href="base_sp.css"> <link rel="stylesheet" href="form.css"> <title>お問合せ｜ウェブサンプル株式会社</title> </head> ： （以下略） ：
contact への変更を保存したら、ブラウザで開いて確認しましょう。
ブラウザのウィンドウをリサイズして、横幅が800ピクセル以下になった場合にスタイルが切り替われば成功です。
横幅801以上の場合
横幅800以下の場合
スマートフォンでは、「お問合せ」ページは以下のような表示となります。
スマートフォン 縦位置
スマートフォン 横位置
これで、すべてのページがスマートフォン対応になりました。
尚、現在作成中のサンプルサイトでは、800ピクセルより小さいかどうかで2種類のスタイルに表示し分けていますが、
ウィンドウ幅をさらに細かく分けて、スマートフォン向け、タブレット向け、パソコン向けと、スタイルの種類を増やしても良いでしょう。
ここまでの制作段階で、サンプルサイトは以下の状態となっています。
まとめ
- 「会社概要」「お問合せ」「製品紹介」の各ページをスマートフォンに対応にする
- ビューポートを指定するmeta要素を追加する
- 必要なCSSファイルを読み込ませるlink要素を追加する
| <前へ | 目次へ | 次へ> |