HTML/CSSを学習し終わった後に登場することになるBootstrap。
- Bootstrapってなに？
- Bootstrapのメリットが分からない
- Bootstrapをつかうとカッコ悪いの？
今回はそんな疑問をお持ちの方向けにBootstrapとはなんなのかということをメリット・デメリットを挙げながら解説していきます。
その中で、フリーランスエンジニアとして学習するメリットはあるのか？という点も記述しています。
Bootstrapとは
Bootstrapとは、レスポンシブデザインに対応したCSSフレームワークで、HTML/CSS/JavaScriptから構成されていおり、世界で最も使用されているCSSフレームワークです。
Webページでよく使用されるフォームやボタン、メニューなどの部品がテンプレートとして良いされており、高いデザイン性も確保されています。
そのため、Webページのスタイル調整も最低限で済みますし、シンプルな記述で複雑なグリッドシステムを使用できたりもします。
さらに、それらのテンプレートは、Webページを閲覧するユーザーの端末に応じて自動で表示が最適化されるようにjQuery(JavaScript)で制御されているのが特徴です。
公式サイトは英語ですが、有志の方が日本語訳を行なってくれているので英語が分からなくても安心して使用することができます。
- Bootstrap公式サイト：https://getbootstrap.com/
- Bootstrap日本語サイト：https://getbootstrap.jp/
Bootstrapの導入方法
Bootstrapを導入するには2つの方法があります。簡単なのはCDNを使用して読み込む方法ですが、ダウンロードして使用したほうが表示速度などの面で優れているので、基本的にはダウンロードして使用したほうが良いです。
CDNを使用して読み込む方法
CDNを使用して読み込む方法は以下の通りです。
- Bootstrap公式サイトから「Get started」ボタン をクリックし、Introductionページに移動します
- CSS読み込みの<link>タグを該当HTMLの<head>タグ内にコピーします
- JavaScript読み込みの<Script>タグを該当HTMLの</body>タグの直前にコピーします
以上でCDNを使用して読み込む方法は完了です。
ダウンロードする方法
ダウンロードして使用する方法は以下の通りです。
- Bootstrap公式サイトから「Download」ボタンをクリックし、Downloadページに移動します
- 「Compiled CSS and JS」の下部にある「Download」ボタンをクリックし、zipファイルのダウンロードを行います
- ダウンロードしたzipファイルを解凍し、「css」「js」フォルダがあることを確認します
- 「css」フォルダ内の拡張子が「.css」のファイルを任意の場所に移動し、それを読み込むように該当HTMLの<head>タグ内に<link>タグを記述します
- 「js」フォルダ内の拡張子が「.js」のファイルを任意の場所に移動し、それを読み込むように該当HTMLの</body>タグの直前に<script>タグを記述します
以上でダウンロードして使用する方法は完了です。
Bootstrapを導入するメリット
Bootstrapを導入するメリットは以下の6点になります。
- レスポンシブデザインを簡単に導入できる
- 簡単におしゃれなデザインを取り入れることができる
- CSSの記述が大幅に減らせるので生産性が向上する
- HTMLなどの記述にルールがあるため、メンテナンス性が高い
- 使用頻度が高いアニメーションが簡単に導入できる
- ブラウザ表示の保証がされている
順番に詳細をみていきます。
レスポンシブデザインを簡単に導入できる
Bootstrapではレスポンジブデザインに対応しているため、1つのWebページでPC、スマートフォン、タブレットなどに対応しています。
通常ではスマートフォンやタブレット用など個別にCSSを記述する必要がありますが、これにはかなりの労力が必要です。
Bootstrapでは以下のようなブレークポイントが用意されており、様々なクラスで使用することでレスポンシブデザインを実現します。
- xl：大型ディスプレイ：1200px以上
- lg：ノートPCなどの中型ディスプレイ：992px以上
- md：タブレット：768px以上
- sm：通常のスマートフォン：576px以上
- xs：小型のスマートフォンなど：576px未満
上記をふまえた上で例を見てみましょう。
例）
<div class=“container”> <div class=“row”> <div class=“col-sm-4 col-md-2”></div> <div class=“col-sm-4 col-md-8”></div> <div class=“col-sm-4 col-md-2”></div> </div> </div>
上記の例はBootstrapの特徴である1列を12行に分割したグリッドシステムを使用しています。
通常のスマートフォンの場合は4行分の行を3つ、タブレットの場合は2行分の行を1つ、8行文の行を1つ、2行分の行を1つという順番で<div>要素が配置されます。
このようにBootstrapを使用すると簡単にレスポンシブデザインに対応することが可能です。
簡単におしゃれなデザインを取り入れることができる
Bootstrapを使用するだけでボタンやカードなどオシャレなデザインの部品を使用することができます。
これによりWebデザイナーが不在の場合でも、おしゃれなデザインを実現することが可能です。
CSSの記述が大幅に減らせるので生産性が向上する
Bootstrapでは背景色や文字色、余白といった色々なものがcssと対応したクラスとして定義されています。
そのクラスを使用することによって、cssの記述量が大幅に減少し、生産性が向上します。
フリーランスエンジニアとして活動している場合は、制作スピードが命になってくるので、うまく活用していければ大幅な生産性アップにつなげることができます。
HTMLなどの記述にルールがあるため、メンテナンス性が高い
これは「CSSの記述が大幅に減らせるので生産性が向上する」という点でも記述しましたが、Bootstrapでは色々なものがcssと対応したクラスとして定義されています。
そのため、クラスを記述する際にルールが厳密に定められておりBootstrapのドキュメントさえ確認すればどのような動作をするか一目瞭然なので、メンテナンス性が高いコードを維持することができます。
フリーランスエンジニアとして活動する場合は、仕様がはっきりしているBootstrapで作成しておけば、今後のメンテナンスはクライアント側でやりやすくなるでしょうし、いざWebサイトの改修を受注した時にそれがBootstrapであった場合の改修も楽になります。
使用頻度が高いアニメーションが簡単に導入できる
Bootstrapは以下のような使用頻度が高いアニメーションが標準的に用意されています。
- メインビジュアルに利用するスライダー
- ヘッダーナビゲーションメニューのドロップダウンメニュー
- ページ内リンクに移動する際にスムーズに動作するスクロール
- クリックで開閉できるモーダルウィンドウ
- タブメニュー
- etc..
ブラウザ表示の保証がされている
Bootstrapではブラウザの各サイズでの表示が保証されています。
そのため、各サイズでの表示確認が0になることはありませんが、自分でCSSを作成した場合よりも神経質にならずに表示確認が行えます。
Bootstrapを導入するデメリット
Bootstrapを導入するメリットは以下の2点になります。
- よくあるレイアウトに仕上がる
- Bootstrap自体を学習する必要がある
順番に詳細を見ていきます。
よくあるレイアウトに仕上がる
メリットで「簡単におしゃれなデザインを取り入れることができる」と挙げましたが、良く言うとおしゃれなデザインですが、悪く言うとよく見るデザインになります。
また、分かる人が見ればすぐにBootstrapで作成したことが分かってしまうというようなことも発生します。
これを回避するにはCSSを自ら追加してレイアウトを変更するなどして個性をだすことが必要になる場合もあります。
また、全体の色調を統一するためにSASSを含めたソースファイルをダウンロードし、修正して対応を行うことも必要です。
Bootstrap自体を学習する必要がある
BootstrapにはHTMLのクラスの命名ルールなどが厳格に決められています。
Bootstrapを扱うにはそのルールなどを学習する必要があるため、多少なりの学習コストがかかってしまいます。
しかし、各クラスやコンポーネントの使用方法は公式サイトに記載されているので、そちらを参照しながらでも何とか作成していくことは可能となります。
(もちろん事前に学習して作成したほうが生産性が高いです)
まとめ
Bootstrapを使用すると高い生産性で高いメンテナンス性を持ったWebサイトを作成することができます。
特にBootstrapの中でもレスポンシブデザインに対応したグリッドシステムが強力で、BootstrapのグリッドシステムのみをWebサイトに採用する人もいるぐらいです。
そのため、フリーランスエンジニアである、ないに関わらずHTML/CSSの学習が終わったらBootstrapを学習することをオススメします。
筆者プロフィール
名前：じゅに
専門学校卒業後、九州でソフトウェア会社の設計・開発業務を15年経験。
うつ病で2度の休職を行うが、いずれも復職し、現在も専門学校卒業後に入社したソフトウェア会社にて勤務を行う。
お客様と使用を積める上流の仕事よりも、実際のソフトウェアの設計・開発業務が好き。
家族構成は妻と息子2人の4人家族。
現在の会社はビジネスソフト系なので、独学でWeb系を勉強中。
その傍らWebメディアにエンジニア関連の記事の寄稿を行う。
ブログ：Jyu2ログ(https://jyu2log.com/)
Twitter：@Jyu210
