bootstrapの導入方法

bootstrapとは

bootstrapはCSSフレームワークです。 html,CSS,JSで作られたテンプレートですね。

とっても便利です。レスポンシブ対応されてます。 ヘッダーとか検索フォームとか表とかボタンとか、コピペで実装できちゃいます。 比較的簡単にレスポンシブでちょっとかっこいいサイトが作れちゃいます!

CSSフレームワークはたくさんありますが、 bootstrap派生でもいっぱいあるんですよー! bootflatとか。 ほとんど英語ばっかで分かりにくいんですけど、日本製のHonokaというのもあります!

導入方法

さて肝心な導入方法ですね! 今回はとりあえず導入方法のみご紹介します。

https://getbootstrap.com/

Downloadページに飛び、Compiled CSS and JSのDownload。 これでbootstrap一式のzipがダウンロードできます。

展開すると、bootstrap-4.1.1-distになります。 中身はCSSフォルダとJSフォルダのみ!笑 中にはたくさんファイルがありますけどね!

そしてこれらはイジる必要はありません。 逆にイジっちゃうと戻せなくなったりするので…。

まず、CSSフォルダとJSフォルダと同じ階層にindex.htmlを作成します。 あとは必要なCSSとJSとjQueryだけ必ず指定してあげればもう動きます!

公式サイトに載っているサンプルだとこんな感じです。

補足

冒頭にも書いたように、CSSは上書きではなく別ファイルで作成した方がいいですね。 個人的な意見なので岡のユーザーは分かりませんが…。 やらかしたときにめんどくさいです。笑

多くの方がご存知かとは思いますが、 使ったことがない方はぜひ1度使ってみてください! 秒でレスポンシブサイトが作れちゃいます!!

花山泰弘

2017.2
IT業界仲間入り!
飲食歴8年

難しいっす…

※記事の内容は保証はしておりません(執筆時期や実施環境により挙動が変わるものがある為)。
別途検証してご利用いただくことをおすすめいたします。