スマートフォンサイトのCSS ホームページの作り方

スマートフォンサイトをコーディングする

さて、いよいよコーディングも大詰め。


スマートフォンサイトをコーディングしていきます。


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ファイル）

次のお話

PC・スマホ対応のレスポンシブデザインにする

ホームページの作り方

• ホームページの仕組み（準備・必要なもの）
• ホームページの種類（ブログとは違うのだよ！）
• 無料レンタルサーバーの利点と欠点
• レンタルサーバーの比較（無料・有料）
• ドメインの種類と料金の違いと取得条件と。
• HTMLファイルとそれを助ける仲間たち
• デザイン準備とページ内の各名称
• ホームページをデザインする
• トップページをデザインする。「メイン画像」が鍵！
• 下層ページをデザインする！統一フォーマットで！
• ホームページをコーディングする（準備編）
• ホームページをコーディングする（HTML編）
• ホームページをコーディングする（CSS編）
• トップページをコーディングする（twitterで新着情報）
• イラスト（ギャラリー）ページをコーディングする
• イベントページをシンプルにコーディングする
• 作者紹介ページをコーディングする
• お問い合わせページをコーディングする
• スマートフォンサイトをコーディングする
• PC・スマホ対応のレスポンシブデザインにする
• アップロードしてホームページを公開する
• ホームページのページの追加・更新方法と運営