「会社概要」「お問合せ」「製品紹介」の各ページをスマートフォンに対応させましょう。
HTMLファイルproduct ・profile ・ contact から、スマートフォン向けCSSファイルを読み込ませます。
それぞれページごとに必要となるCSSファイルが異なるので注意してください。
まずは、「製品紹介」ページ（product ）です。
product からはbase_sp.cssが必要となります。
HTMLファイルのヘッダからlink要素で必要なCSSファイルを読み込ませます。
<!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ピクセル以下になった場合にスタイルが切り替われば成功です。
スマートフォンでは、「製品紹介」ページは以下のような表示となります。
次に、「会社概要」ページ（profile ）です。
会社概要ページではtable要素を使っているので、profile からはbase_sp.cssとtable_sp.cssが必要となります。
HTMLファイルのヘッダからlink要素で必要なCSSファイルを読み込ませます。
<!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ピクセル以下になった場合にスタイルが切り替われば成功です。
スマートフォンでは、「会社概要」ページは以下のような表示となります。
最後に、「お問合せ」ページ（contact ）です。
contact からはbase_sp.cssが必要となります。
HTMLファイルのヘッダからlink要素で必要なCSSファイルを読み込ませます。
<!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ピクセル以下になった場合にスタイルが切り替われば成功です。
スマートフォンでは、「お問合せ」ページは以下のような表示となります。
これで、すべてのページがスマートフォン対応になりました。
尚、現在作成中のサンプルサイトでは、800ピクセルより小さいかどうかで2種類のスタイルに表示し分けていますが、
ウィンドウ幅をさらに細かく分けて、スマートフォン向け、タブレット向け、パソコン向けと、スタイルの種類を増やしても良いでしょう。
ここまでの制作段階で、サンプルサイトは以下の状態となっています。
| <前へ | 目次へ | 次へ> |
