PC以外の端末にはスマホだけでなくタブレットやガラケー携帯等がありますが、このページでは「スマホ対応」のみに限定して解説します。
PCで見かけるWEBサイトは、下図のようにヘッダー部分とフッター部分を挟む形で、1カラム・2カラム・3カラム・・(4カラム)という風にレイアウトされているのが一般的です。
上図のようなレイアウトのWEBサイトをスマホで表示した時、モバイルフレンドリーではないサイトの場合、画面の中に収まりきらず、横スクロールしなければならなかったり、タップしずらかったりと、閲覧しずらいサイトになってしまいます。
そこで、このPC仕様のレイアウトをスマホでも見やすいレイアウトに変えてやる事がモバイルフレンドリーなサイトにする事を意味します。
理屈は簡単です。
図Bを例に説明すると、スマホ画面の上部から
(ヘッダー部分)→(左カラム)→(右カラム)→(フッター部分)
の順序で、横幅を縮小しながら、縦長にレイアウトしてあげれば良いのです。
図Cでも同じ理屈です。スマホ画面の上部から
(ヘッダー部分)→(左カラム)→(中カラム)→(右カラム)→(フッター部分)
という風にスマホ画面内に収めてあげれば良いのです。
私個人的にお薦めしたいのは、図Bの2カラムです。
理由は、図Cのように、3カラム以上になってしまうと、PCではメインコンテンツであるはずの右カラム部分が、スマホ表示された時には、かなり縦スクロールをしないと画面に表示されないまで下部にきてしまうからです。
メインコンテンツが下部にあるのは避けたいところですよね！
ちなみに、当サイトのレイアウトは図Bの2カラムにしています。
それでは、実際にどのような方法を用いれば、モバイルフレンドリーなレイアウトなるのでしょうか？
ここで活躍するのが「スタイルシート」です。
スタイルシートの内容を「PC用」と「スマホ用」にそれぞれ分けて記述してあげます。
具体的には、端末画面の横幅を基準にして、PC表示とスマホ表示を切り替える記述をします。
端末の横幅が320px以上だったらPC表示にして、320px以下だったらとスマホ表示にしてあげるといったイメージです。
このように、同じURLで、PCからアクセスした人だけでなく、スマホからアクセスした人も、ストレスなく快適に閲覧できる、モバイルフレンドリーなサイト作りが、これからの副収入額に大きく影響してくるという事がお分かりいただけたと思います。