tyoshikawa1106のブログ

- Force.com Developer Blog -

HTML/CSSデザインの教科書を読んでForce.comサイト開発の勉強しました

CSSがちょっとニガテだったので、書店でHTML/CSSデザインの教科書を買って読んでみました。一つ一つ分かりやすい解説があってすごく読みやすかったです。

f:id:tyoshikawa1106:20140103175346j:plain

作りながら学ぶ HTML/CSSデザインの教科書


ひととおり読み終わった後、とりあえずSalesforceのVisualforceページで勉強したことを試してみました。floatの使い方が特にニガテだったのですが、それも問題なく使えるようになったと思います。

f:id:tyoshikawa1106:20140101140116p:plain

GitHub - tyoshikawa1106/Apex_DesignPractice: CSSによるデザインの練習


Visualforceぺージでうまくいくことを確認できたので、HTML/CSSデザインの教科書を読みながらつくったサンプルを元にForce.comサイトを構築してみました。jQueryのbxsliderがうまく動かせなかった以外はだいたい再現できたと思います。(追記:bxsliderの部分も無事に動くようになりました。URLを少し間違えていたのが原因でした。)

f:id:tyoshikawa1106:20140103182906p:plain

勉強のためにつくったForce.comサイト


CSSだけでなくHTML5の<section>タグや<nav>タグ、<article>タグ、<aside>タグなどについても解説が載っていてすごく参考になりました。このタグをきちんと使うことでコードがすごく見やすくなったと思います。

ブラウザ間の違いやバグを補正してくれる「normailze.css」のことは今まで知らなかったのでとても勉強になりました。

他にもオンライン画像編集ソフト「Pixlr」のことやスライドショーをつくれるjQueryプラグイン「bxSliber」のことも知ることができてすごく良かったです。

今回勉強したことを使ってDeveloper環境にForce.comサイトの構築もできたので、これをベースにいろいろ試していきたいと思います。