スライドショースライドショースライドショー

Bootstrapはなにができる?今すぐ使いたくなる魅力4選

Bootstrapを今すぐ 使いたくなる魅力4選

こんにちは! Web制作大好きライターのナナミです。

Bootstrapといえば超有名なCSSのフレームワークですが、一体どんなことができるのかご存知ですか?

今回はそんなBootstrapについて

  • どんなことができるのか
  • どんなものがつくれるのか
  • Bootstrapを使うために必要な知識

まで、ノンデザイナー・ノンコーダーでもわかるようにBootstrapについて優しく解説していきます。

Bootstrapの魅力に触れたい方は必見です!

Bootstrapって何?

BootstrapはHTMLCSSJavaScriptなどのWebサイトに使われる言語を総合したフレームワークです。

超わかりやすく言うと、細かいコードを書かなくても素敵なデザインのWebサイトを作ることができる「CSSがすでに組んであるファイル」のことです。

実は色んな種類があるのですが、いちばん有名なのはTwitter社が作った「Twitter Bootstrap」の最新版「Bootstrap4」ですね。

Bootstrap

このBootstrapを使うことで、デザインやUI(※1)の知識がなくても、ユーザーが使いやすい素敵なWebサイトを爆速で作ることができます。

※1 UI
ユーザーインターフェースの略。Webサイトやアプリなどをデザイン的に使いやすいものにしようという考え方。Bootstrap自体の解説は、下記の記事を要チェックです。

Bootstrapとは?最新版のBootstrap4の使い方についても徹底解説!
更新日 : 2019年5月6日

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の詳しい解説は下記の記事をご覧ください。

HTMLとは?初心者でも10分で基礎がわかるように解説してみた
更新日 : 2019年11月22日

CSSを覚えよう

CSSはHTMLで表示した内容を美しく装飾してくれる言語です。背景色や文字の色、サイズから枠の設定まで色々な見た目を作ることができます。

Bootstrapを使えば、ほぼ出番は無いのですがBootstrap内臓のアイコン「FontAwesome」の色を変えるときなどに自身での設定が必要になる場面があります。

ちょっとしたカスタマイズに必要なので、こちらもしっかり基礎を押さえておくとよいでしょう。

CSSの詳しい解説は下記の記事をどうぞ!

CSSとは何かがたった5ステップでわかる初心者のための取扱説明書
更新日 : 2019年10月11日

Bootstrapの仕組みを知ろう

HTMLとCSSがなんとなくわかるようになれば、Bootstrapを使うのは難しいことではありません。あとはBootstrapの使い方や仕組みを知って、実際に触ってみるのが一番です。

下記の記事で初心者向けのコツをご紹介しているので、ぜひ参考にしてみてください。

Bootstrapのコーディングのコツ|初心者でも簡単おしゃれサイト作り
更新日 : 2019年8月23日

まとめ

Bootstrapは、仕組みを理解するまではちょっとややこしいかもしれません。しかし1回わかってしまえば後は楽ちん! 超簡単に素敵なサイトを作り上げることができるフレームワークです。

この機会にぜひ、BootstrapでのWebサイト作成にチャレンジしてみてはいかがでしょうか?

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説