こんにちは！ Web制作大好きライターのナナミです。
Bootstrapといえば超有名なCSSのフレームワークですが、一体どんなことができるのかご存知ですか？
今回はそんなBootstrapについて
- どんなことができるのか
- どんなものがつくれるのか
- Bootstrapを使うために必要な知識
まで、ノンデザイナー・ノンコーダーでもわかるようにBootstrapについて優しく解説していきます。
Bootstrapの魅力に触れたい方は必見です！
Bootstrapって何？
BootstrapはHTML、CSS、JavaScriptなどのWebサイトに使われる言語を総合したフレームワークです。
超わかりやすく言うと、細かいコードを書かなくても素敵なデザインのWebサイトを作ることができる「CSSがすでに組んであるファイル」のことです。
実は色んな種類があるのですが、いちばん有名なのはTwitter社が作った「Twitter Bootstrap」の最新版「Bootstrap4」ですね。
このBootstrapを使うことで、デザインやUI(※1)の知識がなくても、ユーザーが使いやすい素敵なWebサイトを爆速で作ることができます。
※1 UI
ユーザーインターフェースの略。Webサイトやアプリなどをデザイン的に使いやすいものにしようという考え方。Bootstrap自体の解説は、下記の記事を要チェックです。
Bootstrapでできること
Bootstrapの魅力は、簡単に素敵なWebサイトを作ることだけではありません。細かい魅力を紐解いていきましょう。
簡単にレスポンシブサイトが作れる
Bootstrapはレスポンシブに対応しているので、難しいことを考えなくても簡単にスマホ対応のWebサイトを作ることができます。
レスポンシブとは、画面の幅によってレイアウトを切り替え、パソコン、タブレット、スマホなど様々なデバイスに合わせたWebサイトをワンソースで作ることができる方法です。つまりパソコンとスマホでURLを分けなくてもOKなWebサイトを作れるということです。
これを1から作るのは結構面倒で、無事作り上げたとしても、実機で確認してみたら崩れてる……なんて悲劇もしばしば。
Bootstrapならばそんな手間は全部なし！ 必要な記述をちょこちょこっと加えてあげるだけで、簡単にパソコンでもスマホでも美しいレイアウトを作ることができます。
たくさんのアイコンが使える
Bootstrapには「FontAwesome」というアイコン集が収録されており、様々なデザインのアイコンを使用することができます。
一般的に何かしらのアイコンを入れる場合は、画像を用意してそれをファイルに入れてコードを書いて……結構めんどくさいんですよね。しかも色を変えたりできないので、途中で「やっぱりこの色にしようかな」となったときは画像をまた作り直す羽目になります。
FontAwesomeはフォント扱いなので、CSSで色を自由に変更することができます。さらにサイズの変更もバッチリで、超簡単にきれいなアイコンを使うことができます。
難しいコード不要で動きが作れる
BootstrapにはJavaScriptのファイルも含まれており、すでにいろいろな動きが定義されています。そのため、JavaScriptの知識がなくてもWebサイトに動きをつけることができます。
よくある「ドロップダウンメニュー」や、クリックしたら表示される「モーダル」など、JavaScriptを1から書くとちょっと面倒なものもコピペでOKなので、「プログラミングは全然わからない……」という人でも、リッチなWebサイトを作り上げることができます。
作業時間を大幅短縮できる
ここまででお気づきの方も多いと思います。そう、Bootstrapを使うことでコードを書く時間や作業量が大幅に減るのです。
Bootstrapを使ってサイトを作る場合、用意するのは表示する文章や画像などのコンテンツだけです。あとはコピペしたりちょっと調整したりするだけで、レスポンシブでアイコンが綺麗な動きのあるWebサイトを作り上げることができます。
1から作る場合に比べて、作業時間と作業量が大幅に減るのが明白ですね！
Bootstrapで作れるパーツ例
では、具体的にどんなパーツを超簡単に作ることができるのかを見ていきましょう。
ボタン
はい、すでにこれだけ種類があります。もちろんサイズ変更もできる上、マウスカーソルを乗せた時の動きもバッチリです。
カード
最近のWebサイトでよく見かけますね。名前の通りカードのように角が丸くて、机に置いたときのような立体感のあるデザインです。
これはGoogleが提唱しているマテリアルデザインというパーツに質感を与えることでUIを高めていこうという考え方から生まれたデザインです。なんかクリックしたら別のページに飛んだり、なんならこのカード自体がくるっと回転しそうな雰囲気がありますね。
モーダル
ボタンをクリックしたら画面が暗くなり、真ん中に詳細が表示されたり拡大された画像が出たりするのを見たことはありませんか？ この動きをモーダルと言います。
このモーダル、JavaScript必須の仕組みなのですが、Bootstrapならば公式で紹介されているコードをコピペして、表示する文字などをちょっと調整してあげるだけで実現可能です。
Bootstrapができるようになるには？
こんな便利なBootstrap、ぜひ使いたい！と思った方も多いでしょう。
ただ、Bootstrapはまったく知識ゼロの状態から使うのはちょっと難しいものです。最低限、HTMLとCSSの基礎を学んでおく必要があります。
HTMLを覚えよう
HTMLはWebサイトの文字や画像を表示するファイルを作成する言語です。
BootstrapはこのHTMLの記述にclassという名前をつけることで、「ここの部分はこの見た目になってね」と指示をしてくれます。何もかもコピペでOKなのではなく、ある程度は自分でHTMLを書く必要があります。
他にも、先程紹介したカードの中に画像を入れたい時、自分で画像を設定しなければなりませんし、文章も変える必要があります。その時に必要な記述を消したりしてしまわないように、HTMLの知識が必須になるのです。
HTMLの詳しい解説は下記の記事をご覧ください。
CSSを覚えよう
CSSはHTMLで表示した内容を美しく装飾してくれる言語です。背景色や文字の色、サイズから枠の設定まで色々な見た目を作ることができます。
Bootstrapを使えば、ほぼ出番は無いのですがBootstrap内臓のアイコン「FontAwesome」の色を変えるときなどに自身での設定が必要になる場面があります。
ちょっとしたカスタマイズに必要なので、こちらもしっかり基礎を押さえておくとよいでしょう。
CSSの詳しい解説は下記の記事をどうぞ！
Bootstrapの仕組みを知ろう
HTMLとCSSがなんとなくわかるようになれば、Bootstrapを使うのは難しいことではありません。あとはBootstrapの使い方や仕組みを知って、実際に触ってみるのが一番です。
下記の記事で初心者向けのコツをご紹介しているので、ぜひ参考にしてみてください。
まとめ
Bootstrapは、仕組みを理解するまではちょっとややこしいかもしれません。しかし1回わかってしまえば後は楽ちん！ 超簡単に素敵なサイトを作り上げることができるフレームワークです。
この機会にぜひ、BootstrapでのWebサイト作成にチャレンジしてみてはいかがでしょうか？
