各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

BootstrapでレスポンシブWebデザインを簡単に作る方法(第2回)

  • publish_advertise
2013/11/19

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

前回は、「レスポンシブWebデザイン」を採用したウェブページが簡単に作れるフレームワーク「Bootstrap」を使うための準備と、サンプルページをご紹介いたしました。今回は、具体的な記述方法をご紹介いたします。

 

◆画面サイズの4区分

 

Bootstrapでは、画面サイズの区分として、以下の4種類を定義しています。

 1. 「Extra small devices」(スマートフォン) :768px未満
 2. 「Small devices」 (タブレット) :768px~991px
 3. 「Medium devices」(並のデスクトップ) :992px~1199px
 4. 「Large devices」 (広いデスクトップ) :1200px以上

この4種類の環境(=閲覧領域の横幅)に対して、別々のデザインを提供できます。

 

◆12分割のグリッド

 

Bootstrapでは、描画領域の横幅を12分割したグリッドを用意しています。

 

このグリッドに対して、「何個分を使うか」を指定することで、簡単に段組構成が作れます。

 

例えば、以下のように記述すると、4つのdiv要素がそれぞれグリッドを「3個分」ずつ占有した「4段組」が作れます。

 


<div class=”row”>

<div class=”col-xs-3″>《第1段》</div>

<div class=”col-xs-3″>《第2段》</div>

<div class=”col-xs-3″>《第3段》</div>

<div class=”col-xs-3″>《第4段》</div>

</div>


 

以下のように記述すると、両端に「2個分」ずつ占有した段(サブ段)を設け、中央に「8個分」を占有した段(メイン段)を設けた「3段組」が作れます。

 


<div class=”row”>

<div class=”col-xs-2″>《サブ段1》</div>

<div class=”col-xs-8″>《メイン段》</div>

<div class=”col-xs-2″>《サブ段2》</div>

</div>


 

このように、何段の段組構成にする場合でも、合計が12になるように分配します。

 

 

◆レスポンシブWebデザインを作る

 

上記では、ボックスに対して「col-xs-2」や「col-xs-3」などのclass名を記述しました。

これらは、実は「Extra small devices」(スマートフォン)用の指定を意味しています。「xs」は「Extra Small」の略です。「Extra small devices」よりも大きな画面サイズに対する指定を省略しているため、結果的に「すべての画面サイズ」に対して適用されます。Bootstrapでは、レスポンシブWebデザインを作るために、以下ようなclass名が用意されています。(「NN」の部分には1~12の数字が入ります。)

 


 col-xs-NN :「Extra small devices」(スマートフォン)以上に適用
 col-sm-NN :「Small devices」 (タブレット)以上に適用
 col-md-NN :「Medium devices」(並のデスクトップ)以上に適用
 col-lg-NN :「Large devices」 (広いデスクトップ)以上に適用


 

◆レスポンシブWebデザインを作る例1

 

例えば、以下のように記述すると、「スマートフォンでは段組を解除するが、

それより広い画面なら3段組で表示する」というデザインが作れます。

 


<div class=”row”>

<div class=”col-xs-12 col-sm-4″>《第1段》</div>

<div class=”col-xs-12 col-sm-4″>《第2段》</div>

<div class=”col-xs-12 col-sm-4″>《第3段》</div>

</div>


 

上記では、3つのdiv要素のclass名に「col-xs-12」と「col-sm-4」の2つを指定しています。これによって、以下の2種類のデザインが適用されます。

 

●1つ目の「col-xs-12」によって実現するデザイン

 

「Extra small devices」(スマートフォン)では、各段とも「12個分」のグリッドを占有して表示されます。Bootstrapでは横幅全体を12個に分割していますから、「12個分占有する」とは、「横幅いっぱいに表示する」という意味になります。つまり、「段組構造を作らない」ということになります。

 

●2つ目の「col-sm-4」によって実現するデザイン

 

「Small devices」(タブレット)以上の環境では、各段とも「4個分」のグリッドを占有して表示されます。つまり、「3段組」になります。

 

◆レスポンシブWebデザインを作る例2

 

 下記のソースでは、4つのdiv要素に対して、細かく条件を指定しています。

 


<div class=”row”>

<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-3″>《第1段》</div>

<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-3″>《第2段》</div>

<div class=”col-xs-12 col-sm-6 col-md-4 col-lg-3″>《第3段》</div>

<div class=”col-xs-12 col-sm-6 col-md-12 col-lg-3″>《第4段》</div>

</div>


 

この場合は、

・スマートフォンでは、段組を解除。(4つのボックスが縦に並ぶ)

・タブレットでは、2段組。(2つの段組が、縦に2つ並ぶ)

・並のデスクトップでは、3段組。(4段目だけは段組を解除して表示)

・広いデスクトップでは、4段組。

 

というデザインで表示されます。

今回ご紹介した2つの例は、前回にもご紹介した以下のサンプルページに掲載しています。

ブラウザでアクセスして、どのように表示されるのかを確認してみてください。

サンプルページ

 

このように、Bootstrapを使うと、閲覧者の環境に合わせて、簡単にレイアウトを変化させられます。

 

環境別にウェブサイトを分ける必要はありません。

Bootstrapには、他にも様々な機能が用意されています。ぜひ、活用してみてください。

 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
<<前の記事に戻る  
続編
2013.11.12
BootstrapでレスポンシブWebデザインを簡単に作る方法(第1回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る