スマホ対応には2通りあります。2のレスポンシブデザインのほうが制作作業も更新作業も簡単で、安く作ることができます！
１.スマホ用にまったく別に作る。
この場合、まったく別ページとして作るため、記事や画像も別に作ります。
ほぼ倍の作業費がかかります。
サイトのドメインも、
PC用でメインドメイン（例：http://jplan.me）
スマホ用（例：http://jplan.me/s）
とサブドメインを作り、スマホやタブレットからアクセスがあったらスマホ用サイトを表示させるように設定します。
２．表示画面のサイズによってCSSでコントロールする（レスポンシブデザイン）
この場合、ページは1つです。
1のように2つサイトを作る必要がないため、作業効率がいいです。
CSSはHTMLで書いたコードにデザインの指示を出すところです。
HTMLにIDやClassをつけ、CSSではそのIDやClassに対して指示をします。
例えば、HTMLでbox1というclassをつけ、その中に文章や画像を入れます。
それに対して横幅が900px以上の画面での表示の場合、33.3%の幅で表示。
900px以下の画面サイズの場合、50%の幅で表示。
400px以下の画面サイズの場合、100%の幅で表示。
といった感じで、CSSでデザインしていきます。
Classは、1ページに何個使ってもいいので、1個指定しておけば、同じようにデザインしたいところはHTMLで
box1のClassを設定しておけばいいだけになります。
PCサイトと一緒ではスマホサイトで重くなる？
よくこのようなことを聞きます。
またPCと同じ画像をスマホで利用すると、文字も小さくなり、見にくいなども聞きます。
でもこの場合、PCは表示するけどスマホ表示しない。
スマホは表示するけど、PCでは表示しない。
というクラスを作ってあげれば解決します。
