tyoshikawa1106のブログ

- Force.com Developer Blog -

レスポンシブWebデザインを読んでForce.comサイト開発の勉強しました

マルチデバイスに対応できるWebサイトの開発方法について勉強しようとレスポンシブWebデザインという書籍を読んでみました。

f:id:tyoshikawa1106:20150225225620j:plain


Bootstrapなどを利用するのではなくCSSを一から記述する形でマルチデバイスに対応する方法について解説されています。


全4章で構成されていたのですが、2章目の『サンプルで学ぶレスポンシブWebデザインの基本』の部分でサンプルコードを元にWebサイトをつくってみることができるようになっていました。


こんな感じのオシャレなサンプルサイトをつくることができます。

f:id:tyoshikawa1106:20150225231018p:plain:w300


3章と4章は実践編と応用編ということでより高度な内容になっています。その部分はまだ試せていませんが2章の内容はForce.comサイト上で試してみました。

f:id:tyoshikawa1106:20150225231342p:plain

http://tyoshikawa1106-rwd-developer-edition.ap0.force.com/


実際にモバイル端末からアクセスした際にどのように表示されるかなど確認することでいろいろ勉強になったと思います。

タブレットからアクセス (縦向き)

f:id:tyoshikawa1106:20150225233527p:plain:w300

タブレットからアクセス (横向き)

f:id:tyoshikawa1106:20150225233610p:plain:w400

スマートフォンからアクセス (縦向き)

f:id:tyoshikawa1106:20150225233653p:plain:w200


本来の用途とは違いますが、Salesforce1アプリ上でも動かしてみました。ブラウザからアクセスしたときには動作したハッシュタグリンクが効かない?っぽい現象がありました。

f:id:tyoshikawa1106:20150225233844p:plain


第2章までの内容で作ることができたサイトはこんな感じです。残りの第3章と第4章の実践編と応用編についても今度試してみたいと思います。



おまけですが、ちゃんとサイトエラーページも作成しました。
f:id:tyoshikawa1106:20150225235429p:plain