それでは、実際に、スマホサイトの作り方を、お伝えしていきます！
ただ、最初からスマホサイトを作っていくのは、時間がかかる（効率的ではない）ので、元々あるホームページのテンプレートを使って、スマホサイトの作り方をお伝えしていきたいと思います。
具体的には、当サイトで無料で配布している「サンプルサイト」のデータを使用します。
ここでは、「サンプルサイト」のデータを使用して、スマホサイトの作り方を解説していきますね。
■ サンプルサイトの使用について
「サンプルサイト」のデータは、勉強用として、無料で配布しています。
そのため、「サンプルサイト」のデータを編集して、インターネット上に公開することは、絶対にしないでください。
「サンプルサイト」は、あくまで「勉強用」として、無料で配布しているだけになりますので、十分 ご注意くださいね。
|
【手順１】viewport の設定を入れる
スマホサイトを作るためには、まず、viewport の設定を入れてあげます。
この viewport を入れることで、文章の表示を、スマホの画面サイズに合わて表示することができるからです。
スマホは、機種によって画面のサイズが異なるので、どの画面サイズでも、スマホサイトをキレイに表示させるために、この viewport の設定が必要になるということですね。
具体的な手順としては、サンプルサイトのデータの中にある、HTMLファイルのヘッダー部分に、下記の赤くなっている１行を入れてあげます。
|
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="ホームページ,制作,サンプル">
|
上記の、 「meta name="viewport"・・・」 という記述を１行、HTMLファイルのヘッダー部分に入れることで、文章の表示をスマホの画面サイズに合わせて、表示されるようになります。
スマホサイトを作るときの必須の設定になりますので、必ず入れるようにしてください。
【手順２】画像の大きさをスマホの画面サイズに合わせる設定を入れる
スマホサイトに表示させる画像の大きさを、スマホの画面サイズに合わせて表示させるために、「画像の大きさをスマホの画面サイズに合わせる」 という設定を入れます。
具体的には、下記の赤くなっている１行を、サンプルサイトのスタイルシートの
ファイル（style.css ファイル）に入れてあげます。
|
img { max-width:100%; height:auto; }
|
上記の記述を、スタイルシートのファイル（style.css ファイル）に入れることで、画像の大きさをスマホの画面サイズに合わて表示してくれます。
これも、スマホサイトを作るときの必須の設定になりますので、必ず入れるようにしましょう。
【手順３】サイドバーを削除する
パソコンサイトであれば、サイドバーはあった方が良いです。
しかし、スマホは画面が小さいため、スマホサイトには、サイドバーは必要ありません。
そこで、サイドバーを削除するために、サンプルサイトのデータの中にある、HTMLファイルから、下記のソースを削除します。
|
<td>
<!-- サイドバー -->
<iframe height="500" width="100%" src="side.html" frameborder="0" marginheight="0" marginwidth="0" scrolling="no"></iframe>
</td>
|
サイドバーを表示させている、上記のソースを削除することで、サイトからサイドバーが消えます。
スマホサイトには、サイドバーは必要ないので、上記の「サイドバーを表示させているソース」を、削除するようにしましょう。
【手順４】横幅の設定（width）をパーセンテージに変更する
最後に、ホームページの横幅の設定を、「パーセンテージ（%）」に変更します。
具体的には、パソコンサイトの場合、横幅を具体的な数字で指定すること（たとえば、横幅は width="900" という形で指定すること）が一般的です。
しかし、スマホサイトの場合は、横幅をパーセンテージで指定する（たとえば、横幅は width="100%" という形で指定する）ようにします。
この理由は、スマホにはいろいろな種類があり、小さな画面のスマホもあれば、大きな画面のスマホもあるからです。
だから、スマホサイトを作る場合は、横幅を具体的な数字で指定するのではなく、「width=100%」という形で、パーセンテージで指定するようにします。
ホームページの横幅をパーセンテージで指定することで、どの画面サイズでも、スマホサイトがキレイに表示される、ということですね。
変更方法としては、サンプルサイトのデータの中にある、HTMLファイルのソースを、下記のように変更します。
<table width="770" cellspacing="0" cellpadding="0" style="border:0px solid blue;" bgcolor="white" align="center">
↓ ↓ ↓ ↓ ↓
<table width="100%" cellspacing="0" cellpadding="0" style="border:0px solid blue;" bgcolor="white" align="center">
|
上記のように、横幅の設定である width の数字を、"770" から "100%" というように、パーセンテージ（%）に変更してあげます。
こうすることで、画面サイズに関係なく、どのスマホの機種でも、スマホサイトがキレイに表示されるようになります。
なお、この変更は、横幅の設定（width）を具体的な数字で指定している箇所は、すべて、パーセンテージ（%）に変更してあげるようにしてください。
（これがちょっと大変な作業ですね）
スマホサイトの作り方のまとめ
上記の【手順１】から【手順４】を行うことで、スマホサイトが完成します。
あとは、スマホは画面が小さいので、コンテンツバーの項目を減らしてあげたり（横に並べるのではなく、縦に並べたり）、
画像と文章が横並びになっているところは、縦並びにしてあげることで、もっとキレイに表示されるようにできますよ。
スマホサイトは、基本的に、上から順番にコンテンツを並べていくだけなので、パソコンサイトを作るよりも、かなり簡単に作ることができます。
そして、【手順１】から【手順４】までを実施して、作成したスマホサイトが、https://alodog.com/ のサイトです。
パソコンサイトとスマホサイトの表示は、下記のように表示されます。
「スマホサイト」の方は、スマホの画面サイズに合わせて、キレイに表示されていますよね？
【手順１】から【手順４】までを実施することで、スマホの画面サイズに合わせてキレイに表示される、スマホサイトが完成します。
なお、上記のサイトは、パソコンでアクセスをすると、「パソコンサイト」が表示されて、スマホでアクセスをすると、「スマホサイト」が表示される仕組みになっています。
そのため、もし、スマホで表示を確認したい場合は、スマホで、https://alodog.com/のURLにアクセスをしてみてください。
キレイなスマホサイトが表示されますよ！
結論として、スマホは、「小型パソコン」であるため、スマホサイトとパソコンサイトは、作り方が一緒（HTMLを使って作るもの）です。
異なるのは、「画面のサイズ」になるので、スマホサイトは、「小さな画面サイズでキレイに表示されるように作れば良い」ということですね。
そのために、viewport の設定や、画像の大きさをスマホの画面サイズに合わせる設定を入れてあげる、ということです。
上記の【手順１】から【手順４】までを実施することで、スマホサイトを作ることができますよ！
それでは、次のページでは、スマホサイトをインターネット上に公開する方法をお伝えします。
パソコンでアクセスをすると、「パソコンサイト」が表示されて、スマホでアクセスをすると、「スマホサイト」が表示される仕組みの実現方法をお伝えしますので、良かったら参考にしてくださいね。
