スマートフォン(スマフォ)向けサイト作成のためにまずやること

まず、PCサイトとスマフォ系サイトの横幅（サイズの）設定じゃないですかね。
PCとスマフォの違いを羅列するとたくさんありますが、
何といってもスマフォとPCは以下が大きく違うのではないかなぁ
・画面を縦、横にできる
・サイトを表示する画面が小さい
・拡大縮小ができる

要はこの3点の設定をすれば
あとはCSSやPHPなどで
サイトを構築していけば良いって話なんだな。

で、どこで設定するかというと
htmlヘッドタグ内にmeta name="viewport"を指定する。
viwportは閲覧する幅や拡大縮小の設定をする、、、、と考えておいて
大きく間違いはないと思う

まずスマートフォンのことを少し・・・・
スマートフォンは「portrait」と「landscape」って状態と二つあります。
要は縦にもつか横にもつかってこと。
「portrait」は縦持ちで「landscape」は横持ちってことです。
これをまずは頭に入れておく

まずは僕が個人的に好きな設定をずらっと書いてみます。

<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">

1.まずは宣言のために「meta name="viewport" 」を記入、その後詳細を記入するので「content」属性を記載する
2.content内のwidth=320は横幅の設定
3.initial-scale=1.0は「portrait」と「landscape」の状態での倍率を設定する。
　この状態だと縦にしても横にしても倍率は変わらないことになります。
　この値を2.0にすると「landscape」状態にしたときに「portrait」の半分しか表示されない状態になります
4.user-scalable=yesは拡大縮小させるか否かってこと。yesなんで使用している人のきぶんで拡大縮小が可能です。
5.maximum-scale=2.0は拡大した時に、初期状態の何倍まで拡大可能にするか設定する
6.minimum-scale=1.0は縮小した時に、初期状態からどこまで縮小可能にするか設定するってこと

まずはこれを設定してから
自分のサイト構築を始めるといいんじゃないかな？
僕はこれをしてから始めてます。