Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方
Post on:2015年6月17日
sponsors
Bootstrapはここ数年人気が非常に高く、多くのWebデザイナー・制作者がレスポンシブ対応のWebサイトを作るための本当に便利なツールです。使いやすいclassを備えたモジュール式のフレームワークで、カスタマイズ性にも非常に優れています。
Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方を解説した記事を紹介します。
Installing Bootstrap and the Bootstrap Grid System
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- Bootstrap 3の特徴
- Bootstrapのダウンロードとインストール
- Bootstrapのファイル構成
- このチュートリアル用のファイル構成
- デバイス用のclass
- コンテナの実装と配置
- グリッドの実装
- オフセットを使ってカラム幅を調整
- カラムの並びの順番を変えるpushとpull
- カラムのネスト
- 終わりに
Bootstrap 3の特徴
まずは、Bootstrapで作られた素敵なポートフォリオサイトを見てみましょう。
シンプルでフラットなデザインとミニマルなカラーを使ったBootstrapで作られたサイトです。
Bootstrapのモジュールフレームワークとともに、大きいスライダーとフラットなカラーで作られています。
Bootstrap 3の新しい特徴
Bootstrapはバグ修正や改良を重ね、3までバージョンがアップしました。
新しいバージョンの特徴をいくつか見てみましょう。
- モバイルファーストのアプローチ
- 主要なclassの変更
- 一つのファイルでスタンダードとレスポンシブ対応のCSS
- アイコンフォント（旧PNG画像）
- IE7, Firefox3.6のサポートを中止（IE8+サポートに）
Bootstrapのダウンロードとインストール
Bootstrapの公式サイトにアクセスし、「bootstrap.xxx.zip」をダウンロードしてください。このファイルはパッケージ内容をカスタマイズしてダウンロードすることもできます。
カスタマイズする際は、上部の「Customize」をクリックしてください。LESSやjQueryのプラグインなどを含めることができます。
このチュートリアルでは、全てを含んだパッケージをダウンロードしてください。以下、3.3.2をベースに説明します。
Bootstrapのファイル構成
Bootstrapのフォルダ階層
ファイルをダウンロードして解凍すると、その中に3つのフォルダが見えます。
- CSSフォルダ
- この中には6つのファイルが含まれています。
-
- bootstrap.css - このファイルは読みやすいようにスペースなどを含んでおり、minよりファイルサイズが大きいです。
- bootstrap.min.css - bootstrap.cssをミニファイし、ファイルサイズを軽くしたものです。
- bootstrap-theme.css - 3Dのボタンやグラデーションなど拡張されたスタイルを含んでいます。
- bootstrap-theme.min.css - 上記をミニファイしたファイルです。
- css.map と bootstrap-theme.css.map - LESSによって作られたソースマップです。
- fontsフォルダ
- アイコン用のフォントファイルが4種類のフォーマットが含まれています。
- jsフォルダ
- Bootstrapのスクリプトの通常ファイルとミニファイしたファイルが含まれています。
このチュートリアル用のファイル構成
このチュートリアル用のファイル構成
チュートリアル用にファイルを設置しましょう。
上記の4つのフォルダと1つのHTMLファイルを作成します。
- index.html - これはメインのファイルで、全てのデザインはこのファイルで利用されます。
- jsフォルダ - JavaScriptファイルを格納します。
- imagesフォルダ - 画像ファイルを格納します。
- fontsフォルダ - アイコンフォントを格納します。
- cssフォルダ - CSSファイルを格納します。
マークアップ
最初の作業は、準備したHTMLファイルにBootstrapのCSSファイルとGoogleフォントを外部ファイルとして指定することです。
※このチュートリアルでは、CSSのテーマやマップ・アイコンフォント・JavaScriptは使用しません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Bootstrap Grid System</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900|Raleway:400,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
</body>
</html>
デバイス用のclass
Bootstrap2ではモバイル対応はオプション扱いでしたが、Bootstrap3ではデフォルトでモバイルに対応しています。4種類の異なるビューポートごとにグリッドが定義されています。
-
- Extra small devices (col-xs)
- スマホ用、768px未満のビューポート
-
- Small devices (col-sm)
- タブレット用、768px以上 992px未満のビューポート
-
- Medium devices (col-md)
- デスクトップ用、992px以上 1200px未満のビューポート
-
- Large devices (col-lg)
- デスクトップ用、1200px以上のビューポート
Media Queriesを確認してみます。
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
Media Queriesの詳しい仕様は、下記ページを確認してください。
コンテナの実装と配置
グリッドを使う前に、まずはdiv要素でコンテナを作り、並べてみましょう。
「.container」を用意し、その中に「.row」を使って並べます。
<div class="container">
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
</div>
カラム用のclassの基本構造は「col-グリッドサイズ-カラム数」で、グリッドサイズには前述の「xs, sm, md, lg」が入り、カラム数は横幅を12分割した12カラムがベースで幅1/12が1、3/12が3、4/12が4、6/12が6となっています。
また、classを複数使用することで、複数のデバイスに対応した配置が可能です。タブレットにも対応したコンテナにするには、デスクトップ用の「.col-md-4」にタブレット用の「.col-sm-6」を加えます。
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">col-md-4 with col-sm-6</div>
<div class="col-md-4 col-sm-6">col-md-4 with col-sm-6</div>
<div class="col-md-4 col-sm-6">col-md-4 with col-sm-6</div>
</div>
</div>
デスクトップ時は4/12の幅のコンテナが横一列に並び、タブレット時は6/12の幅のコンテナなので横二列に並びます。
タブレットでの表示
グリッドの実装
では、基本的なグリッドのclassを使ってみましょう。
下記のコードは、カラムとグリッドの例です。
<!-- HEADER -->
<header>
<div class="container">
<!-- TEXT ROW -->
<div class="row">
<div class="col-lg-12 col-sm-11">
<h1>Bootstrap 3</h1>
<h2>This is how you work with Bootstrap Grid System</h2>
</div>
</div>
<!-- IPHONE ROW -->
<div class="row">
<div class="col-lg-10 col-lg-12">
<div class="col-md-4 col-sm-12 conceal">
<img alt="iphone" src="images/iphone.png">
</div>
<div class="col-lg-4 col-sm-3 ">
<img alt="iphone" src="images/iphone.png">
</div>
<div class="col-lg-4 col-sm-3 conceal">
<img alt="iphone" src="images/iphone.png">
</div>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<!-- 3 BOXES ROW -->
<div class="row">
<div class="col-md-3 col-sm-2">
<span class="glyphicon glyphicon-download-alt"></span>
<h3>Download</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-md-3 col-sm-2">
<span class="glyphicon glyphicon-bullhorn"></span>
<h3>Advertise</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="col-lg-3 col-sm-2">
<h3>Offset</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<img src="images/ipad.png" alt="ipad"/>
</aside>
</div>
</div>
</section>
<section class="call-to-action">
<div class="container">
<!-- CALL TO ACTION ROW -->
<div class="row">
<div class="col-lg-12 col-md-11">
<h2> You want to learn how to use Bootstrap? </h2>
<button type="button" class="btn btn-default center">Back to the Article</button>
</div>
</div>
</div>
</section>
<footer>
<p class="center">© 2015 <a href="http://www.designmodo.com" target="_blank">designmodo</a>. Bootstrap - Grid System</p>
</footer>
このコードは、3つのコンテナに複数の列が配置されています。各コンテンツは見出しや画像やテキストが配置され、それぞれのグリッドサイズを持っています。
ここでのポイントは、異なるサイズでレイアウトをコントロールするために、グリッドのサイズ定義に2つのclassを使っていることです。
見出しや画像やテキストのスタイルを加え、Bootstrapのデフォルトのスタイルシートをカスタマイズします。
/* Custom CSS here */
body{
width: 100%;
font-family: 'Lato', sans-serif;
}
header{
background-color: #62488a;
width: 100%;
}
header{
background-color: #62488a;
width: 100%;
margin: 0;
padding: 40px 0 0 0;
}
h1{
font-family: 'Raleway', sans-serif;
font-size: 70px;
text-align: center;
color: #fff;
font-weight: 600;
margin: 22px 0;
}
h2{
font-family: 'Lato', sans-serif;
font-size: 30px;
text-align: center;
color: #fff;
font-weight: 300;
margin: 22px 0;
}
h3{
font-family: 'Raleway', sans-serif;
font-size: 28px;
font-weight: 600;
text-align: center;
}
section{
width: 100%;
padding: 60px 0;
}
.center{
margin: 0 auto;
text-align: center;
display: block;
}
.glyphicon {
font-size: 70px;
margin: 15px auto;
display: block;
width: 83px;
}
.call-to-action{
background-color: #13c4af;
}
img{
margin: 0 auto;
display: block;
}
footer{
padding: 20px 0px;
}
@media screen and (max-width: 768px){
.conceal{
display: none;
}
}
上記のコードは、下記のように表示されます。
3つのiPhoneとその下のホワイトの3カラムが左に寄っているので、次のステップで調整します。
オフセットを使ってカラム幅を調整
カラム間のスペースを自由に調整できることがBootstrapのオフセットの特徴です。上の実装のイメージを見ると、コンテンツが少し左寄っています。これにはオフセットボックスを使ったスペースがありません。
スペースを作るために、グリッド用のclassと一緒にオフセット用のclassを使います。classは「col-グリッドサイズ-offset-カラム数」です。指定した場所にコラムを押し出すために2つコラムのオフセットを作ります。オフセットは常に左側に加えられるので、現在のグリッドとバランスがとれている必要があります。
「.col-lg-offset-1」を加え、オフセットを使ってカラム幅を調整します。
<!-- HEADER -->
<header>
<div class="container">
<!-- TEXT ROW -->
<div class="row">
<div class="col-lg-12 col-sm-11">
<h1>Bootstrap 3</h1>
<h2>This is how you work with Bootstrap Grid System</h2>
</div>
</div>
<!-- IPHONE ROW -->
<div class="row">
<div class="col-lg-10 col-lg-12 col-lg-offset-1">
<div class="col-md-4 col-sm-12 conceal">
<img alt="iphone" src="images/iphone.png">
</div>
<div class="col-lg-4 col-sm-3 ">
<img alt="iphone" src="images/iphone.png">
</div>
<div class="col-lg-4 col-sm-3 conceal">
<img alt="iphone" src="images/iphone.png">
</div>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<!-- 3 BOXES ROW -->
<div class="row">
<div class="col-md-3 col-sm-2 col-lg-offset-1">
<span class="glyphicon glyphicon-download-alt"></span>
<h3>Download</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-md-3 col-sm-2 ">
<span class="glyphicon glyphicon-bullhorn"></span>
<h3>Advertise</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<aside class="col-lg-3 col-sm-2 col-lg-offset-1">
<h3>Offset</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<img src="images/ipad.png" alt="ipad"/>
</aside>
</div>
</div>
</section>
上記のコードに変更すると、3つ並んだiPhoneとその下の3つのコンテナは、左にスペースを作ります。
カラムの並びの順番を変えるpushとpull
Bootstrapのグリッドの便利な特徴の一つが、pushとpullです。このclassを使うことで、タブレットなどのより小さいサイズでカラムの並び順を変えることができます。
-
- col-グリッドサイズ-push-カラム数
- pushはカラム数分を右に押し出します。
-
- col-グリッドサイズ-pull-カラム数
- pullはカラム数分を左に引っ張ります。
この2つのclassを使ってみましょう。
<section>
<div class="container">
<!-- 3 BOXES ROW -->
<div class="row">
<aside class="col-lg-3 col-sm-2 col-lg-push-8">
<h3>Offset</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<img src="images/ipad.png" alt="ipad"/>
</aside>
<div class="col-md-3 col-sm-2 col-lg-offset-1">
<span class="glyphicon glyphicon-download-alt"></span>
<h3>Download</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-md-3 col-sm-2 col-lg-pull-6">
<span class="glyphicon glyphicon-bullhorn"></span>
<h3>Advertise</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</section>
このコードは3つのボックスを配置したコラムの1番目（push）と3番目（pull）の場所を変えます。
デスクトップ時（lg）は1番目（push）が右端、2番目（offset）が真ん中、3番目（pull）が左端に表示され、タブレット時（md）は左からそのままの順番で表示されます。
カラムのネスト
Bootstrapはカラムのネストにも対応しています。これは横列のカラムの中に横列のカラムを加えて、グリッドのサイズをセットできるという意味です。これを使う利点は必ずしも12カラムを使う必要はないということです。
例を見てみましょう。
<section>
<div class="container">
<!-- 3 BOXES ROW -->
<div class="row">
<aside class="col-lg-3 col-sm-2 col-lg-push-8">
<h3>Offset</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<img src="images/ipad.png" alt="ipad"/>
</aside>
<div class="col-md-3 col-sm-2 col-lg-offset-1">
<span class="glyphicon glyphicon-download-alt"></span>
<h3>Download</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- NESTING ROW -->
<div class="row">
<div class="col-md-6 col-xs-6">
<h4>Responsive</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<p><a href="#">Read more >></a></p>
</div>
<div class="col-md-6 col-xs-6">
<h4>Simple</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<p><a href="#">Read more >></a></p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-2 col-lg-pull-6">
<span class="glyphicon glyphicon-bullhorn"></span>
<h3>Advertise</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- NESTING ROW -->
<div class="row">
<div class="col-md-6 col-xs-6">
<h4>Plain</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
<p><a href="#">Read more >></a></p>
</div>
<div class="col-md-6 col-xs-6">
<h4>Dynamic</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </p>
<p><a href="#">Read more >></a></p>
</div>
</div>
</div>
</div>
</div>
</section>
6カラムのグリッドサイズを使って、横列をネストしました。
終わりに
Bootstrapのグリッドシステムの基本を学んだ今、あなたはグリッドの可能性をスタディすることができます。もっと多くのclassの情報が必要な時は、下記ページをチェックしてください。
sponsors
