Bootstrapを導入するとこんなにいいことがある

こんにちは。リノバス制作部の小林です。
はじめてブログ投稿させていただきます!今後、技術的なことを発信していくことを任命されたので、頑張って更新していけたらと思っています!

今回はBootstrapを導入するとこんなにいいことがあるんだということを書いていこうと思います!

Bootstrapとは

「Bootstarapを導入するといいことがある」と冒頭でも述べましたが、そもそもBootstrapとはなんだ?と思う方が多いと思われますので、Bootstrapについてお話ししていこうと思います。

BootstrapとはTwitter社が開発したCSSの「フレームワーク」です。
WEB業界での「フレームワーク」という言葉の意味は、「骨組み」という意味があります。

BootstrapはWEB制作をする上で、頻繁に使われる機能があらかじめテンプレートとして用意されているので、作業時間の短縮や複数人で案件を進める場合など共通認識を持てるので、作業効率のアップにもつながります。

コーディングと呼ばれる、「骨組み」を作る作業というのはある程度ルール化ができ、効率化ができる作業でもあります。
そのルール化/効率化という問題点を解決してくれるのがBootstrapなのです!!

Bootstrapで効率良くコーディングをすることにより、空いた時間をクリエイティブな作業にあてることで、より良いものを制作していけるWin-Winなツールだと思います。

ちなみに、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では開発者がTwiiter社を退社したため「Bootstrap」に名称が変更されたようです。
Bootstrapは幾度となくアップデートされ、現在のバージョンはBootstrap4 Beta2(2017年10月現在)まで進化しています。

なぜBootstrapが使われるのか

なぜ数多ある「フレームワーク」界の中で、Bootstrapが人気を集め、使い続けられているのか。それは、

  1. 解説サイトが多いため導入しやすいこと。
  2. 近年スマートフォンやタブレットなどの携帯端末から、WEBの閲覧が主流になり「レスポンシブ」対応が標準になったこと

が考えられます。

従来のWEB制作であれば、PC用/タブレット用/スマートフォン用にそれぞれのサイトを制作していましたが、近年主流である「レスポンシブサイト」というのは、一つのコードで、どのようなデバイスで閲覧されても、最適化して表示することができるサイトのことです。

実際にレスポンシブサイトとはどのようなものか見ていきたいと思います。

PCで閲覧した場合

スマートフォンで閲覧した場合

見え方はだいぶ違いますが、書かれているコードはPC用もスマートフォン用も同じものが使われています。
通常のレスポンシブサイトであれば、コードは同一のものを使用していても、CSSとよばれる「骨組み」に対して装飾を施すスタイルをPC用/スマートフォン用にそれぞれ記述しなければいけません。

ですが、Bootstrapを使えばその工程を省くことができ、ひとつのHTMLとひとつのCSSだけで、効率良く「レスポンシブサイト」を構築できるのです。

それこそが、Bootstrapを使う1番の理由だと考えられます。

まとめ

今回はBootstrapを導入するとこんなにいいことがあるということをまとめてみました。
つい先日(2017.10.19)にBootstrap4 beta2がリリースされ、また新たに追加された機能などがあり、まだまだ学ぶべきことが多いです。

リノバスではBootstrapは必須のスキルですので、もしリノバスで働いてみたいというウェブデザイナーやコーダー、エンジニアの方は、是非Bootstrapのスキルを身に付けてみてください。

僕自身もリノバスにはいってからBootstrapを学び始めました。使い始めた頃は、グリッドシステムなど理解するのに時間がかかっていましたが、今ではBootstrapなしでのコーディングしたくないと思うほど、Bootstrapの恩恵を受けています。

リノバスの採用に応募する