bootstrapブートストラップCSSの特徴

便利なCSSファイル「Bootstrap（ブートストラップ）」

あなたがフルスクラッチ（一から手作り制作）でホームページ制作をする際、或いはクライアントから制作依頼を受けた場合にCSSファイルはどうしていますでしょうか。

もちろんCSSもきちんと作成する事になると思いますが、今完全に白紙の状態から全ての制御を書き込んでいく人はいないと思います。時間効率的にもよくありません。

ある程度基本的な制御はでき上がった状態のもの、つまりテンプレートを使えば、あとはそのサイト固有のデザインの制御をするだけです。

時間短縮のためのパッケージ

これは大幅な時間短縮・納期短縮につながります。

ですので根幹となる制御命令が一通り設定済みでパッケージ化されたCSSファイルを使う事は大きなメリットがあります。

そこで一番便利なCSSファイルをご紹介しましょう、それが「bootstrap」です。

bootstrap（ブートストラップ）とは？

bootstrapとは、HTML／CSS／JavaScriptなどで構成された最も有名なWEBフレームワークです。

Bootstrap.cssをエディタ「Brackets」で開いた状態

基本的なデザインが整えられているだけでなく、ホームページでよく使われるフォームやボタン・各種メニュー部品がテンプレートとして用意されています。

そのスタイルクラスをそのままHTMLタグ上に使うだけで、洗練されたデザインパーツが簡単にできあってしまう優れモノなのです。

基本ファイルとして読込、デザインは別ファイルで管理

基本的に一番最初にbootstrapのファイル（bootstrap.css）が読み込まれ、それに対応する形でHTMLタグが構成されます。これだけでもおおよそのデザインレイアウトが構築できます。

そしてさらに個別スタイルを読み込むことで、もう一歩進んだオリジナルデザインにブラッシュアップできるようになっています。

Bootstrap Themesテーマテンプレート

現在bootstrapで一番実践的に使えるのは「Bootstrap Themes」と呼ばれるテーマテンプレートです。

ほぼ構築済みのWEBサイトテンプレートで、基本のbootstrapによるレイアウトスタイルと個別スタイルが既に用意されています。

HTMLファイルも構築されているので、必要な箇所をコピーしたり変更するだけで洗練されたオシャレなデザインサイトがすぐに出来上がります。

「Bootstrap Themes」のフレームワークは有料のテンプレートとして販売されているものが多いのですが、無料のものもありますので探してみて下さい。

BootstrapWP Wordpress用テーマテンプレート

ちなみに現在WEBサイト制作の主流となっているWordpressにもBootstrapは採用されています。それが「BootstrapWP」と呼ばれるものです。

これはブログ作成ツールとして有名なWordPress向けに用意されたBootstrapファイルです。

基本的な構造は同じですので、自由にカスタマイズをする事ができます。

bootstrapにはver3とver4があります。2018年にver4が誕生するまではver3が良く使われていました。
今後はver4が主流になってくると思いますが、今まで扱った事が無い人に基本的な仕組みを理解してもらうため、今回ver3を中心にお話を進めていきます。

あわせて読みたい関連記事

グリッドシステムについて

段組みレイアウトが簡単に

WEBサイトを作っていくあたり、一番手間が掛かるのが「段組み（横並びレイアウト）」部分です。

常に2列や3列などの横並びのコンテンツを駆使してサイトは構成されていますよね。

この横並びレイアウトにbootstrapのグリッドシステムを使う事で、レイアウト構築が非常に楽になります。

12エリアに分割する考え方

bootstrapのグリッドシステムとはコンテンツの要素を常に12分割した考え方です。

そしてその12エリアのうち、任意の数のエリア分（カラム）を下記の様に「敷き詰める」事で横並びレイアウトを構築する考え方です。

12エリア全て

例えば横幅一杯（横並びなし）の場合は12エリア全てを使います。

6エリア2つ

2列の場合「6」つ分のエリアを2つ敷き詰める事で2列横並びになります。

4エリア3つ

3列の場合「4」つ分のエリアを3つ敷き詰める事で3列横並びになります。

3エリア4つ

4列の場合「3」つ分のエリアを4つ敷き詰める事で4列横並びになります。

2エリア6つ

6列の場合「2」つ分のエリアを6つ敷き詰める事で6列横並びになります。

変則パターン

敷き詰める割合によって横並びのボックス数が自在に変わります。合計が12になるように敷き詰めれば、各割合が変わっても問題はありません。

つまり、各カラムの数値を自由に変更する事で横並びレイアウトが自由に構成できます。

横並びレイアウトが続く場合はコピペするだけで簡単に複製追加ができるので、大変便利です。

レイアウトとデザインを分ける

カラムやレイアウトごとにデザインを変える場合も、基本的な横並びレイアウトをグリッドシステムで構成し、その中に固有となるデザインクラスを別途構成すれば簡単に実現できます。

<div class="col-6">
<div_class="style_a">style_aのデザインボックス</div>
</div>
<div class="col-6">
<div_class="style_b">style_bのデザインボックス</div>
</div>

「横並びレイアウト部分」と「デザイン部分」とを分けていれば簡単に実現できますし、その後の管理も簡単です。

例外レイアウトの注意

※bootstrap ver3では、基本的に5列（5カラム）や7列（7カラム）の構成は用意されていません。12を5列で割ろうとすると一区画「2.4」という小数点以下の数値になるため、それ専用の各カラム制御を別途記載して調整する必要があります。

基本ファイルのダウンロード

基本となるbootstrapのフレームワークはダウンロードして使う事ができます。

現在の最新バージョンはver4系ですが、bootstrapを使った事が無い人はぜひお試しして頂きたいと思います。

手順

1.Bootstrap公式サイトダウンロードページを開きます。

2. 「Download」のボタンを押して、最新バージョンをダウンロードします。

3. ダウンロードしたBootstrap4.3.1-dist.zipを解凍します。中にはcssはjsの2つのフォルダがあります。

4. 下記のファイルをHTMLヘッダー内で読み込みします。

後はbootstrapに記載されている各クラスをHTMLタグ内で記述する（class="〇〇"など）事で、bootstrapのデザインレイアウトが使えるようになります。

一押し人気コーナー紹介