CSSフレームワークBootstrapの勉強方法

Bootstrapを初めて知ったのは、わたしが初めて身内以外のサイトを作ることになったときでした。

HTMLだけでスマホ対応のキレイなサイトが作れる。というウワサ。

最近たくさんのサイトや本で機能説明されてるのが増えましたね。

でも初めて触れてみたときは、Bootstrapのサイトはほぼ英語だし、こういうのダウンロードして…読み込ませる記述して…

とか慣れてないど素人でしたので、ショボい活用しか出来てませんでした。

そこでレベルアップに使ったのがご本様です。

前のブログにググればWEBサイトの勉強できると言いましたが、わたしは本で勉強するのが好きです。

これからの標準をみにつけるHTML＋CSSデザインレシピ。

Bootstrapとfoundationの２つのフレームワークの使い方が説明されてあり、フレームワークを使わないレスポンシブ対応の記述方法と比較できるようになってます。

あと、すごく丁寧に基本のHTML＋CSSのコーディングも書かれていて、雑だったCSSファイルがキレイにかけるようになりました。

基礎を見直したい人にもオススメです。

大雑把で無駄な(marginとかpaddingとかいれすぎてどれが効いてるのかわからんような)記述、しなくなります。

本は日々情報が古くなるという点でオススメしにくいです…が、この本はわたしが初めて買って良かったと思う本です。

ちなみに本を選ぶときに見た紹介サイトの人も同じようにオススメしてたから買いました。

いまでもfloatとかグラデーションとか書くときに横に置いて参考にしてます。

Bootstrapの情報ふえてるけど、リファレンス情報を今後のブログで情報して行きたいなぁ。と私の目標の一つです。

<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top"><div style="border:1px solid;margin:0px;padding:6px 0px;width:320px;text-align:center;float:left"><a href="http://hb.afl.rakuten.co.jp/hgc/1457af35.855f2c86.1457af36.402b5232/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fbooxstore%2fbk-4839948879%2f%3fscid%3daf_link_tbl&amp;m=http%3a%2f%2fm.rakuten.co.jp%2fbooxstore%2fi%2f11273396%2f" target="_blank"><img src="http://hbb.afl.rakuten.co.jp/hgb/?pc=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbooxstore%2fcabinet%2f00561%2fbk4839948879.jpg%3f_ex%3d300x300&amp;m=http%3a%2f%2fthumbnail.image.rakuten.co.jp%2f%400_mall%2fbooxstore%2fcabinet%2f00561%2fbk4839948879.jpg%3f_ex%3d80x80" alt="Web　Designing　BOOKS【500円クーポン配布中！】これからの「標準」を身につけるHTML＋CSSデザ..." border="0" style="margin:0px;padding:0px"></a><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px"><a href="http://hb.afl.rakuten.co.jp/hgc/1457af35.855f2c86.1457af36.402b5232/?pc=http%3a%2f%2fitem.rakuten.co.jp%2fbooxstore%2fbk-4839948879%2f%3fscid%3daf_link_tbl&amp;m=http%3a%2f%2fm.rakuten.co.jp%2fbooxstore%2fi%2f11273396%2f" target="_blank">Web　Designing　BOOKS【500円クーポン配布中！】これからの「標準」を身につけるHTML＋CSSデザ...</a><br><span style="">価格：3,110円（税込、送料込）</span><br></p></div></td></tr></table>