logo jQueryに強い、基本料金0円。わかりやすい料金設定でご提供する、
コーディング代行サービス「ココマチ コーディングラボ」
03-6432-0915

MENU

スタッフブログ

お見積り依頼

CSSフレームワークBootstrap について

WebサイトやWebアプリケーションが効率的に作成出来るフレームワークがBootstrap です。
Html、CSS、JavaScript、アイコン(Glyphicon)、よく使うインターフェイス(パンクズ、フォーム、テーブル、タブ、ドロップダウンメニュー、ナビゲーションバー等)が揃っています。
div等のhtmlタグにそれぞれのクラス名をつけることで、レスポンシブデザインやモバイルに対応したサイトを作る時間を短縮することが出来ます。Bootstrapのサイトからダウンロードしたソースをhtmlに読み込んで使います。

一例としてレスポンシブデザインの一番のポイントであるグリッドシステム(画面横サイズを分割してレイアウトをする)についてご説明致します。

Bootstrapのグリッドシステムには12カラム(12分割)が採用されており、画面サイズによりレイアウトが変わるポイントは4段階に分けられています。

スマホ  768px以下(接頭辞:col-xs-)
タブレット 768px以上、992px未満(接頭辞:col-sm-)
デスクトップ 992px以上、1200px未満(接頭辞:col-md-)
大画面デスクトップ 1200px以上 (接頭辞:col-lg-)

例えばデスクトップでは2列、タブレットでは1列にするなら、
<div class=“col-md-8 col-sm-12”></div>
<div class=“col-md-4 col-sm-12”></div>

上記の例では デスクトップでは12分割のうちの8と4のサイズに分けられます(2カラム)。
タブレットは12分割のうちの12、つまり画面横幅一杯を占めるレイアウトになります(1カラム、縦2段)。
※実際のコードでは <div class=“row”>で囲むなど、決まり事があります。

多くの人に使われているので、日本語での解説サイトやテンプレート(WopdPress用のテンプレートも有り)も豊富にあるので、使いやすいと思います。

実際に作られたサイトの例は、こちらで見ることが出来ます。