読者です 読者をやめる 読者になる 読者になる

BIT/O

WEBやデザイン、ゲームなど

簡単便利!Bootstrapをはじめるユーザーに教えたいサイト5選。

Twitter Bootstrap HTML JavaScript CSS フレームワーク ウェブサイト制作 クロスブラウザ コーディング

f:id:bitorchard:20141129113627g:plain

Bootstrap ようやく私の中でも熱くなってきました!

今回は、そのBootstrapについてのカンタンな紹介と、実際の制作で私が使っている5サイトを紹介したいと思います。

 

そもそもBootstrapって?

Bootstrapは、米ツイッターが提供している「フロントエンドツールです。

・・・フロントエンドツールって何でしょうね(・o・;)

フロントエンドツール

ウェブサイトにおいては、裏の見えないプログラムやデータベースを「バックエンド」と呼ぶの対して、ユーザーが操作する画面を「フロントエンド」と呼びます。「フロントエンドツール」とは、そのユーザーが操作する画面を作ることのできる「ツール」であり、Bootstrap がそのツール群のひとつという理解で良いでしょう。

Bootstrapが生まれた背景にはスマホが大きく関わっています。iPhoneiPadなどをはじめとするスマートデバイスの台頭により「さまざまな大きさの画面」が登場。WEB制作者らは日々頭を痛めることになります。そこで、さまざまな画面の大きさに対応する「レスポンシブデザイン」が大きな注目を集め、さらにそれを気軽に構築可能な「Bootstrap」が誕生したという経緯です。

 

Bootstrap の中身

Bootstrapの中には様々なツールがありますが、今回のエントリーではそれを割愛して、またの機会にご紹介したいと思います。

 

Bootstrapサイトを作るうえで便利なサイト5選。

1. Bootstrap 公式サイト

当然ながらの公式サイトです。わかりやすいドキュメントWEBフォントアイコン一覧、さらに細かいがカスタマイズ可能なダウンロードページなど非常に充実しています。「初心者がまずはじめる」上においても十分な機能を有しています。

 

2. LayoutIt!


プレビューを見ながら、次々と左メニューの「基本のCSS」「コンポーネント」「JavaScriptが組み込んであるコンポーネント」などのパーツを組みあわせてあっという間にページのHTMLを生成してくれます。無料な上に、ログインしなくてもコードをダウンロードできます。

Bootstrapもあわせてダウンロードできるので、このサイトだけでレイアウトコーディングが完結します。

 

3. Bootstrap Live Customizer


このサイトでは、プレビューを見ながら 色、基準幅、角丸の程度、余白など多岐に渡る項目をカスタマイズしてCSSやLESSなどをダウンロードできます。

サイト訪問時に、正常に動くまでに時間がかかったりなど少し重く感じる場面もありますが、使うほどに便利なサイトであることがわかります。

一旦ウィンドウを閉じても、以前の入力内容を覚えてくれていたり、コンポーネント別にどの項目をいじれば良いかを示してくれたりなど気配りができるサイトです。

 

4. Lavish

Lavish - Generate your own Bootstrap color scheme

Bootstrapのテーマカラーをカンタンに変えることのできるサイトです。

画像のURLを指定、または画像ファイルをアップすると、その画像の色情報を元にBootstrapのカラーテーマを自動生成してくれます。

5. Bootsnipp


BootsnipはBootstrapにおける機能を拡張することができる多種多様なスニペットが置かれています。Bootstrapの基本セットに不足を感じている方はお試しください。

動的なサイドメニュー、フルスクリーン処理、拡張されたフォームデザイン、メトロスタイルのボタンなど見ているだけでも楽しいサイトです。

MIT license. なので基本商用でもガンガン使えます。

 

以上5選でした。

他にも良サイトを知っているという方は、コメントくだされば幸いです。