レスポンシブデザインが簡単にできるBootstrap 〜入門編〜

みなさん「Bootstrap」使ったことありますか？

Web制作者はもちろんのことWebデザイン初心者でも簡単にキレイなサイトがつくれるフレームワーク「Bootstrap」をご紹介したいと思います。

いまでは、スマホ検索がPCでの検索を超えており益々レスポンシブデザインの重要性は高まっています。

Bootstrapのような便利なサービスを利用して、しっかりとレスポンシブ対応をしていきましょう。

 

そもそも「フレームワーク」とは？

骨組み、構造の意味。一般的には、システム構築するための基盤、あるいはサービスを提供するための基盤となるソフトウェアのこと。
引用：コトバンク

フレームワークで検索してみるとこんな文章が出てきますが、ここで紹介するフレームワークとは、Webサイトを制作するのに必要なレイアウトや、そこに入れるボタンなどのパーツを最初から準備してくれるもをフレームワークと呼びます。

Bootstrapとは？

Bootstrapとはフレームワークの一種で、自分でCSSをカリカリ書かなくてもBootstrapが用意してくれたCSSファイルにスタイルが定義されているので、それを読み込むだけで、Web制作初心者でもかんたんにキレイなサイトがつくれたる！といった仕組みになっています。
ちなみにBootstrapはあの有名なTwitter社で作られたもので、以前はTwitter Bootstrapという名前でした。

Bootstrapの使い方～入門編～

まずはBootstrapのサイトにアクセスして触ってみましょう！サイトにアクセスするとこんな感じです。

画面の真ん中にある「Download Bootstrap」を押すとこんな画面になります。

Downloadリストから一番左のBootstrapをダウンロードしましょう！そうするとbootstrap-3.3.5-dist.zipがダウンロードできるので適当な場所に解凍します。

解凍すると中にそれぞれCSS、fonts、jsフォルダがあり、CSSフォルダ内には既に定義されたcssファイルが入っています。

先ほどのページを更にスクロールするとBasic templateという項目があります。

こちらにBootstrapをすぐに使うためのHTMLコードが記載されているので、こちらをそのままindex.htmlにコピーしHTMLファイルとして使用します。

index.htmlを開くとこのような表示になりました！これでBootstrapを使う準備ができました！

Bootstrapを使うとキレイなサイトはもちろんのことレスポンシブデザインなどのホームページ制作もかんたんに作ることができます。

続きは実践編にてご説明いたします。