02 8月 2018 / 【cat】 / 【tag】

～初心者向け～ Bootstrapの使い方（導入編）

BootstrapはTwitter社で開発されたCSSフレームワークです。Web制作においてCSSコードを一から組む作業はとても煩わしく思うことがあるかと思います。そんな煩わしさもBootstrapを導入しておさらばしちゃいましょう。このフレームワークは再利用性の高いwebパーツや各レイアウト、さらに表示切替やアニメーションなどのJavascript・jQueryも手軽に読み込んで使用することができます。レスポンシブデザインにも対応しているのでスマホデザインも容易に組み立てることができます。

Bootstrapのクイックスタート

BootstrapはありがたいことにBootstrapCDNが存在します。パッケージをダウンロードする方法もありますが今回は簡単に導入できるBootstrapCDNを使用したいと思います。

ダウンロードしたい場合は公式サイトから最新版をダウンロードしましょう。

 

CSS

下記コードを<head>内に記述してください。気を付けなければならないのが他の自分で用意したすべてのCSSなどよりも前に記述してください。

 

JS

Javascriptは次の3つを記述します。jQuery、Popper.js、bootstrapのプラグイン、この順番で</body>の直前に記述してください。jQueryに関してスリムなビルドを使用していますが、フルバージョンもサポートされているみたいです。

 

スターターテンプレート

上記ソースコードを使用した基礎的なテンプレートソースコードが公式サイトで紹介されています。これさえ書いておけばBootstrapが始められるということです。

 

おわりに

全体のページ要件に必要なのはこれだけです。サイトのコンテンツ、レイアウトの記述方法などは公式サイトのドキュメンテーションに詳しく記載されていますので合わせてチェックしてみてください。