✌
✌
✌
✌
✌
✌
✌
レスポンシブWebデザインでスマートフォンに対応！実案件から学ぶCSS3使いどころ講座
次ページから学習サンプルの一部を紹介します
環境をつくる
基本コーディング
イントロダクション
ヘッダーの最適化
グローバルナビゲーションの最適化
サイドメニューの最適化
メインコンテンツの最適化
フッターの最適化
お問い合わせフォームの最適化
商品ギャラリー等の最適化
タブ切り替えメニューのアレンジ
長いメニューに対し、アコーディオンメニューで対応
その他スマートフォンサイト制作にまつわるアドバイス
既存のPC用サイトからHTMLをそのままに、スマートフォン用のサイトをつくる基本的な方法を学びます。
シンプルで部分的につくっていくのでコードが長くならずに集中して理解しやすい状態で学べます。
単にコーディングテクニックだけでなく、「ユーザ目線」を考えたデザインも学習します。
HTML5の基本的なタグを使います。（※）
スマートフォンサイトにおけるCSS3の使いどころを学習します。（※）
つくったサンプルファイルは持って帰れます。
JavaScript は用意したものを読み込んで使っていただきます。
（※）HTML5や CSS3の予備知識は不要です
ヘッダーの最適化
デザインのポイント!ユーザに電話をかけさせることやメールを送らせることに対して、操作が簡単であることを工夫しよう。✌
PC版のデザイン
スマートフォン版のデザイン アイコン化したデザイン
グローバルナビゲーションの最適化
デザインのポイント!ボタンが画像の場合、テキストに直してボタンとして押しやすいようにCSSを調整しよう。✌
PC版のデザイン
スマートフォン版のデザイン
✘
ALERT項目の多いグローバルナビゲーションは入りきらないので、PC用のデザインを設計する際からモバイルのことを考えるのがベターでしょう。
!
サイドメニューの最適化
デザインのポイント!左右に分かれたレイアウト（2カラム・3カラム）は原則 floatを解除して効率良くコンテンツを届けよう。✌
スマートフォン版のデザイン スマートフォン版のデザイン
メインコンテンツの最適化
デザインのポイント!画面が狭いため、単にマージン（余白）を充分取っても無駄が多くなる。特に商品関連は区分けを工夫しよう。✌
ALERTこのようなコンテンツは視覚的に「どこからどこまで」を明確にデザインしておかないと、あいまいなカタチでユーザに伝わってしまいがち。
!
スマートフォン版のデザイン
スマートフォン版のデザイン
長いメニューに対し、アコーディオンメニューで対応
デザインのポイント!長めのサブメニューを折りたたみタップで展開する場合、ユーザに「展開できるヒント」を与えよう。✌
HINTせっかく実装したアコーディオンメニューも、ユーザが展開できることに気づいてくれなかったら意味がありません。ここでは、展開メニューが見え隠れしているようにユーザにヒントを与えています。そのために多少の立体感も演出します。
!
PC版のデザイン
http://m-school.biz/course/web/css3-responsive-web-design.htm
レスポンシブWebデザインでスマートフォンに対応！ 実案件から学ぶCSS3使いどころ講座
