こんにちは、後藤です。

今回は、Bootstrapについて調べてみました。

Bootstrapを導入することで、ホームページを手軽に製作することができます。

Bootstrapとは？

Bootstrapとは、Twitter社が開発したCSSフレームワークのことで、以前は「Twitter Bootstrap」と呼ばれていました。

CSSフレームワークとは、CSSのよく使われるスタイルを集めたライブラリーのようなもののことです。

自分でCSSを記述しなくても、ルールに則って使用することで、見た目の良いまとまりのあるホームページを製作することができます。

Bootstrapの特徴

続いては、Bootstrapの特徴について解説します。

なぜBootstrapは多くの人に支持されているのか？

その理由について触れていきましょう。

グリッドシステムを採用

グリッドシステムとは、画面を架空の格子状に区切り、その区切りを組み合わせてコンテンツを当てはめていくというデザインの仕方のことです。

Bootstrapでは、横幅を12分割したグリッドシステムが採用されています。

例えば、サイドバーを３列、コンテンツを９列の３：９のレイアウトにするといったことが可能です。

グリッドシステムを採用することで、整ったバランスの良いデザインにすることができます。

レスポンシブデザインに対応

Bootstrapはレスポンシブデザインに対応しています。

レスポンシブデザインとは、画面サイズなどによって表示するレイアウトを変えるデザインのことです。

例えば、PCではページを２分割したレイアウトで表示し、スマートフォンでは１列で表示するといったことが可能です。

手軽なデザイン

Bootstrapはコンテンツを手軽にデザインすることができます。

例えば、ボタンや見出し、表、フォームなどです。

あらかじめデザインしてある中から選ぶことで、簡単にきれいで見やすいデザインにできます。

JavaScriptコンポーネント

Bootstrapには、JavaScriptのライブラリーも用意されています。

これを利用することで、ドロップダウンメニューやカルーセルパネルなど、動きのあるコンポーネントを簡単に作成できます。

カスタマイズ性

Bootstrapを利用すると自分でデザインを考えなくても見た目の良いホームページを製作できますが、その反面、他のBootstrapで作成されたホームページとデザインが似てきてしまうことがあると懸念されると思います。

このような場合のために、Bootstrapのデザインをカスタマイズできるツールが用意されています。

公式サイトでもカスタマイズ機能が用意されていますし、有志の方が作ったカスタマイズサイトも多く存在します。

また、テーマやテンプレートといった形でCSSファイルも配布されている場合があり、自分でカスタマイズしなくても様々なデザインに仕上げることが可能です。

まとめ

今回は、Bootstrapについて解説しました。

きれいでバランスの良い、PCとスマートフォンに対応したホームページを簡単に製作できるから人気なんですね。

自分はまだBootstrapを使用したことがないので、機会があったら使ってみたいと思います。