スマートフォンサイトをコーディングする(CSSで横幅の調整)

さて、いよいよコーディングも大詰め。スマホサイトをコーディングしていきます。HTMLは基本的にいじらず、CSSだけでレイアウトを変更していきます。

まずは、前回までに作成したstyle.cssを複製して、バックアップを取ります。あとでわかりやすいよう「pc_style.css」とでも名づけておいてください。 作業は同じく「style.css」を改変していきます。PCサイトのCSSを、スマートフォンサイト用にコーディングするには、下記3点を変更することです。


スマホをコーディングする時はCSSで横幅(width)を%に指定する

スマホサイトのコーディングの基本は●●pxのように、横幅や高さのしている所を「(パーセント)」にCSSを変更する所から始まります。スマートフォンのディスプレイの幅は320px~まちまちです。なので、横幅は可変できるように、100%(余白含む)にします。

スマホサイトではCSSでPCの横幅指定を解除
スマホサイトではCSSで横幅100%に変更

style.css(スマホサイトのヘッダー部分)


これによって、横並びだったレイアウトは全て縦並びになります。このデザイン変更ができるのは『CSS組み』だけです。

ちょっと前に説明した『table組み』ではPCサイトで2列でつくったものは、スマホでも2列のままです。CSSは「ブロック」で要素を構成しているので、読み込ませるCSSを変えるだけで自由にレイアウトを変更できるのです。

ちなみに「イラスト」ページは一列にすると、逆に窮屈に感じるので、半分の50%にして2列にします。


スマホサイトをコーディングする時はCSSで画像幅の縮小・拡大を制御する

div(ブロック)の幅をしていしても、画像の幅が320pxより大きければ、全体の幅は広がってしまいます。なので、画面幅で縮小するよう設定します。

スマホサイトでは画像の横幅も100%に

style.css(スマホサイトのトップページ部分)


「320pxよりは小さいけど、スマホの画面では大きすぎる・・・」のような、アイコンなどの画像は、囲んでいるdivの大きさをして、縮小させます。


style.css(スマホサイトのトップページ部分)



CSSでスマホサイトでは非表示にする設定をする

PCサイトに比べて、当然スマホサイトは幅が狭いので、PCと同じ内容を全て記載するのは難しいです。そんな時は、CSSで「非表示」設定をして、レイアウトを調整します。

スマホだと違和感のあるコンテンツ
スマホでは非表示に

style.css(スマホサイトのヘッダーSNSナビ部分)



style.css(スマホサイト全体)


さて、これでスマホサイトが完成しました。今度はこれにもう一手間かけて、PC→スマホに切り替わる設定を行います。


>>今回作ったページ(スマートフォンサイト)

>>サンプルデータをダウンロード(zipファイル)
次のお話