スマートフォンサイトをコーディングする
さて、いよいよコーディングも大詰め。スマートフォンサイトをコーディングしていきます。
HTMLは基本的にいじらず、CSSだけでレイアウト変更していきます。
まずは、前回までに作成したstyle.cssを複製して、バックアップを取ります。
あとでわかりやすいよう「pc_style.css」とでも名づけておいてください。
作業は同じく「style.css」を改変していきます。
PCサイトのCSSを、スマートフォンサイト用にするには、下記3点を変更することです。
【幅の指定の変更】
スマホサイトの基本は●●pxのように、幅や高さのしている所を「％（パーセント）」に変更する所から始まります。
スマートフォンのディスプレイの幅は320px～まちまちです。
なので、横幅は可変できるように、100％（余白含む）にします。
style.css（ヘッダー部分）
これによって、横並びだったレイアウトは全て縦並びになります。
このデザイン変更ができるのは『CSS組み』だけです。
ちょっと前に説明した『table組み』ではPCサイトで2列でつくったものは、スマホでも2列のままです。
CSSは「ブロック」で要素を構成しているので、読み込ませるCSSを変えるだけで自由にレイアウトを変更できるのです。
ちなみに「イラスト」ページは一列にすると、逆に窮屈に感じるので、半分の50％にして2列にします。
【画像幅の縮小・拡大】
div（ブロック）の幅をしていしても、画像の幅が320pxより大きければ、全体の幅は広がってしまいます。
なので、画面幅で縮小するよう設定します。
style.css（トップページ部分）
「320pxよりは小さいけど、スマホの画面では大きすぎる・・・」のような、アイコンなどの画像は、囲んでいるdivの大きさをして、縮小させます。
style.css（トップページ部分）
【非表示の設定】
PCサイトに比べて、当然スマホサイトは幅が狭いので、PCと同じ内容を全て記載するのは難しいです。
そんな時は、CSSで「非表示」設定をして、レイアウトを調整します。
style.css（ヘッダSNSナビ部分）
CSS全体（style.css）
さて、これでスマホサイトが完成しました。
今度はこれにもう一手間かけて、PC→スマホに切り替わる設定を行います。
＞＞今回作ったページ（スマートフォンサイト）
＞＞サンプルデータをダウンロード（zipファイル）
