【今すぐ始めるBootstrap】入門資料まとめました

【今すぐ始めるBootstrap】入門資料まとめました

現代的なシンプルでおしゃれなWebサイトを簡単に作りたい、そんなときに活躍するのがBootstrapです。今回はBootstrapの入門資料として、スライドでBootstrapについて理解したあと、実際にコードを書いてみる参考サイトをまとめました。この記事で順を追ってBootstrapを学んでいくことができます。

まだBootstrapに触れたことがなかったという方は、ぜひコードを実際にコードを書いてみてください。

[adrotate banner=”3″]

Bootstrap入門資料まとめ

ではさっそくBootstrapに触れていきましょう。まずはざっくりと簡単なスライドで理解していきます。

Bootstrapをざっくりと理解する

まずはかなりざっくりとBootstrapの全貌を見ていきます。

こちらのスライドでざっくりとBootstrapがわかると、なんだか良さそうだなと興味が湧いてくるかと思います。

 

先ほどのスライドより詳しい説明のスライドです。実際のBootstrapの特徴を解説していて、「使いやすそうだ」というのが把握できるでしょう。

 

もっと詳しくBootstrap

おおまかにBootstrapが分かったところで、さらに深みに入っていきましょう。

こちらのスライドでは、Bootstrapのいいところ、使いどころ、おおまかなコードでの使い方が解説されています。

 

さらに実際の大まかな機能に触れてみます。ここまで読むと、Bootstrapがいかに簡単にレスポンシブなデザインを実現してくれるのか理解できるでしょう。

 

Bootstrapのコンポーネントをざっくりと

Bootstrapについて「なんだかすごそう」ということがわかってきたので、実際のコードでの表現を見てみましょう。

 

Bootstrapを書いてみる

ではBootstrapを使って、超簡単にWebサイトを作ってみましょう。

bootstrap-start

5分でWebサイトを作る!超初心者向けBootstrap3入門 – TechStarsブログ

まずはほとんどコピペだけで簡単に「Bootstrapってこんな感じか」というのを把握できる記事の紹介です。

 

bootstrap-ドットインストール

Bootstrap 3.0入門 (全18回) – ドットインストール

もう少し実践的に学びたい方は、ドットインストールの動画で手を動かしながら学習してみてください。

 

もっと細かくBootstrap

さらに細かい使い方を学ぶには、以下の2つの記事がわかりやすいです。もうここまできましたら、作るものを決めて、そこに向けて何が必要かで探していくといいでしょう。

bootstrap-とほほ

とほほのBootstrap入門 – とほほのWWW入門

視覚的にわかりやすく解説されています。

 

Bootstrap-qiita

Bootstrap使い方メモ1(基本+CSS)-Qiita

こちらも詳細に解説されています。

 

Bootstrapで簡単におしゃれサイト制作♪

いかがでしたか?スライドでの説明を見ただけでも、簡単におしゃれでイケてる今風のWebサイトが作れることを感じ取れたと思います。もしこれからWebサイトを作る予定がある方や、作りたくなったというかたは、ぜひBootstrapを使ってみてください。