マルチデバイスに対応できるWebサイトの開発方法について勉強しようとレスポンシブWebデザインという書籍を読んでみました。
Bootstrapなどを利用するのではなくCSSを一から記述する形でマルチデバイスに対応する方法について解説されています。
全4章で構成されていたのですが、2章目の『サンプルで学ぶレスポンシブWebデザインの基本』の部分でサンプルコードを元にWebサイトをつくってみることができるようになっていました。
こんな感じのオシャレなサンプルサイトをつくることができます。
3章と4章は実践編と応用編ということでより高度な内容になっています。その部分はまだ試せていませんが2章の内容はForce.comサイト上で試してみました。
実際にモバイル端末からアクセスした際にどのように表示されるかなど確認することでいろいろ勉強になったと思います。
タブレットからアクセス (縦向き)
タブレットからアクセス (横向き)
スマートフォンからアクセス (縦向き)
本来の用途とは違いますが、Salesforce1アプリ上でも動かしてみました。ブラウザからアクセスしたときには動作したハッシュタグリンクが効かない？っぽい現象がありました。
第2章までの内容で作ることができたサイトはこんな感じです。残りの第3章と第4章の実践編と応用編についても今度試してみたいと思います。
おまけですが、ちゃんとサイトエラーページも作成しました。
