「Bootstrap」の主な特徴

「Bootstrap」の主な特徴

■非CSS専門家でも見栄えの良いサイトデザインに

「CSS」とは

CSS(Cascading Style Sheets)とは、Webページのスタイルを指定するための言語です。

HTMLで作成されるWebページに対してCSSを適用することで、サイト全体として統一的なデザインを設定できます。

CSSに関するハードルの高さ

従来、Webサイト作成においては「HTMLで文書構造作成」「CSSでデザイン指定」を行うため、HTMLとCSSの知識が求められていました。

専門的なCSSの知識についてマスターするための学習コストはかなり大きいため、一般の人が容易に手を出せない領域にありました。

BootstrapはCSSを適用するだけ

Bootstrapでは、あらかじめ用意されているCSSを適用することでWebデザインを行えるため、自分でCSSのスタイル定義を行うことなく、統一されたWebサイトをデザインできます。

非デザイナーでも非エンジニアでもWebサイトを作成できる

そのため、「HTMLとCSSの知識を持たない非デザイナー」でも「JavaScriptに関する知識を持たない非エンジニア」でも、「洗練/統一され見栄えがよい」かつ「使いやすい」Webサイトを作成できます。

■レスポンシブWebデザイン

レスポンシブとは

「レスポンシブ」とは、1つのWebページで、「PC」「スマートフォン」「タブレット」など、さまざまなデバイスに対応することを意味します。

「レスポンシブWebデザイン」とは、「レスポンシブ」かつ「デバイスごとに使いやすい適切なデザインになっている」ことを指します。

レスポンシブ登場前の状況

レスポンシブという概念が登場する前まで、Webサイトは「PC向けサイト」と「スマートフォン向けサイト」の2つを用意する必要がありました。

そのため、ページごとに別々な構造や見栄え調整を行う必要があり、サイト構築の手間が2倍以上になってしまうという問題を抱えていました。

Bootstrapは「レスポンシブWebデザイン」に対応

Bootstrapは「レスポンシブWebデザイン」に対応しているため、1つのWebページを作成するだけで、さまざまなデバイスに対応できます。

そのため、サイト構築の効率を大幅に高めることができます。

■グリッドシステム

「グリッドシステム」とは

「グリッドシステム」とは、レスポンシブWebデザインを実現するための仕組みです。画面幅が異なるデバイスで表示された場合にレイアウトを自動調整します。

Bootstrapのグリッドシステムでは、一連の「コンテナ」「行」「列」を使用して、コンテンツをレイアウトします。

モバイルデバイス基準

Bootstrapではモバイルデバイスの表示をデフォルトとしているため、「PCなどのモバイルよりも大きな画面で表示した場合に、どのようなスタイルに変更するのか？」について設定します。

■Bootstrapテーマ

Bootstrapの公式テーマサイトで、洗練されたデザインテーマテンプレートがリストされています。

「無料で利用できるテーマ」や「見た目や使いやすさが考慮されている有料テーマ」を取得できます。

→Bootstrap　→Bootstrapテーマ