はじめに
私はフロントがすっごく苦手なんですが、そもそもセンスがないんですね、、、
おしゃれなデザインができるようになりたいーみたいなことを仲間内で話してたらBootstrapを勧められました。
そもそもBootstrapというもの自体何者かよくわかっていませんでしたので、簡単に概要をまとめました。
あと、CDN(インターネット経由で読み込む）で導入する方法も書いているのでよかったら参考にしてみてください。
それではよろしくお願いします。
Bootstrapとは
Bootstrapはcssのフレームワークです。Twitter社が作ったもので、比較的簡単におしゃれで整ったページが作成できるそうです。
Bootstrapの最大のメリットとしてよくあげられるのは、レスポンシブWebデザインに対応しているという点です。
スマホやタブレットなど、それぞれ専用のページを作成すると手間がかかりますが、Bootstrapを使用すると、一つのWebページを作成すれば、ブラウザの横幅サイズを基準に、レイアウトデザインを調整することが可能になります。
私の場合、デザイン性の優れたコンポーネントを使用する目的で使用しますが、これもBootstrapの大きな利点といえるでしょう。サボりではないです！
Bootstrapを使用するには,BootstrapとjQueryを読み込まなければなりません。そこで、インターネット経由で読み込む方法と、ローカル環境にダウンロードして読み込ませる方法の2種類のやり方があります。
前者の方法をCDNと言います。こちらすごく簡単だったので紹介します。
CDNでBootstrapを導入する
CDNはContent Delivery Network（コンテンツデリバリーネットワーク）の略です。
CDNはBootstrapで使用するファイルなどをローカルへダウンロードする手間などがなく、HTMLへコードを埋め込むだけでBootstrapを使えるようにできます。
いろんなサイトで「この記述をコピーすればOKです」ってコードを書いてくれていたりしますが、うまくいかなかったりしたので、公式へ行きましょう。
↓このリンクから飛べます。
https://getbootstrap.com/docs/4.1/getting-started/introduction/
一応私の方の記事でも書いときます。
私の場合、railsアプリにCDNで導入する方法なのでご注意ください。
viewファイルのlayoutsのapplication.html.erbに記述します。
全ページへ反映させるためです。
まず、＜head＞の中にこの記述を追加↓
<head>
<%# 省略 %>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
そして、＜body＞の中に↓の記述
私は終了タグのすぐ上に記述しました。
<body>
<%# 省略 %>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
これだけで準備完了です。
あとはチートシートなどにある記述をコピペすれば使いたいデザインなどがすぐ使えます！
最後に
Bootstrapめちゃめちゃ便利です！
ただ、これを使いすぎてオリジナリティがなくなったり、フロントに対してブラックボックスになるのが怖いのでほどほどにしようと思います。