Bootstrapで簡単webデザイン BaseCSSの使い方まとめ

Pocket

以前投稿したCSSフレームワーク Bootstrapの簡単な使い方ではbootstrapのグリッドレイアウトやレスポンシブレイアウトの作り方について書きました。今回はBaseCSSの部分をまとめておこうと思います。

webデザイナーならずともbootstrapなどのcssフレームワークにはホントにお世話になっていると思いますが、使い方をしっかりマスターするのは結構大変。しかしその苦難を乗り越えてこそ本当の利用価値にたどり着けるのです!ではさっそくいきましょう。

この記事は古いバージョンのものです。Bootstrap3に関する記事はこちら

BootstrapのTypographyとListをマスターする

Typographyはテキストのスタイルを決めるもの。とくに難しいところはなく単純にHTMLタグを入れるだけ。text-leftなど左右に寄せるものは覚えておくと便利。

<

h2>BootstrapのTableをマスターする

こちらもclassの指定を変更するだけで線で囲まれたものやマウスオーバーで色が変わるなどの機能を持たせることが可能。テンプレートからいくつか紹介する。

BootstrapのFormをマスターする

次はbootstrapを使ったフォームの作り方。まずは基本のレイアウトから。

BootstrapのButtonsをマスター

ボタンもclassの指定だけで簡単に作成可能。aタグとbuttonタグでボタンを作ることが出来る。bootstrapでは色とサイズ、選択不可を作成できる。

BootstrapのImagesをマスターする

次は画像の処理。イメージの表示はシンプルに枠をつけたり、円形に切り抜いたり、角丸にすることができる。

BootstrapのIconsをマスターする

アイコンの使い方はiタグにclassを指定する。classに入れるクラス名は公式サイトなどをチェックする。

NEXT…

ここで紹介したもののほかにもjavascriptを使用したさらにインタラクティブなコンポーネントがあるので、また機会があればまとめていきます。もうすぐ3.0も出そうで気になるところ。これからもbootstrapには期待。