Twitter Bootstrap について

ページ装飾を容易にするために、CSS ( Cascading Style Sheets：カスケーディング・スタイル・シート ) の一つである Twitter Bootstrap を用いて表現を行っています。

CSS とは、Webページのスタイルを指定するための仕組みで、これを利用することによって、様々な表現を簡単なコードで実現することができます。

例えば、ソースコードは1本ながらも スマホとPCで 共に見栄えよくレイアウトすることや、 A B C や、優勝　ベスト32 などの装飾を、この仕組みを用いて実現しています。

使い方はいたって簡単で、各ページの上部と下部に それぞれ以下のように入れることで、Twitter Bootstrap による表現を使うことができます。
本サイトでは、bootstrap-glyphicons.css、bootstrap.min.css、bootstrap.min.js、jquery.min.js を利用していますが、それぞれ CDN(Contents Delivery NW) にあるファイルを指定しています。　サーバにインストールすることも可能ですが、html に記載するだけで簡単に利用できるので、現在は CDN 上にある css を用いています。

上部
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
下部
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">

ちなみに、Bootstrap のバージョンは、2.3.2 を利用しています。 現在の最新版は 3系 なのですが、フラットデザイン的な感じが 個人的にいまいち・・・なので、あえて 2系 のものを利用しています。 アイコン(bootstrap-glyphicons.css)だけは、3系ですが・・・

＃TOPページなど、3系をお試し中です。

レスポンシブ デザイン　Responsive Design

本Webサイトは、スマホからの閲覧を意識してレイアウト構成を行っていますが、PCから見ても それなりの表現ができるようにしています。

スマホとPCで最も異なる部分は、表示領域における「横幅」です。　最近スマホも大画面化・高解像度化していますが、それでもやはりPCと比較すると 横幅(px数)は小さいです。

旧来、モバイル環境向けには PC用とは別サイトを用意して、それに特化したサイトを作成することが よくある事例でしたが、その場合の弊害として PC用とモバイル用の両方の更新作業が必要となるため、メンテナンスが非効率なものとなっていました。

このような ソースの2重管理を解消してくれるのが、レスポンシブ デザイン のいいところです。つまり、1つのソースコートで PC用とモバイル用(スマホ用) の両方をまかないつつも、それぞれの特性にあわせて出力形態を変える・・・そのようなことを行ってくれる仕組みです。

グリッドシステム　Grid System

レスポンシブ デザイン の中核をなす仕組みです。イメージしやすい形で 簡単に言えば、

・横方向の「1つの並び」を「12個のGrid」として定義する。
・その Grid を いくつか束ねてグループ化(span)して、その中に置くコンテンツを作成する。
・そのグループ化されたGridを、ブラウザの横サイズに合わせて 横に並べたり縦に並べたり を自動でしてくれることで、様々な横幅を持つデバイスに合わせて出力してくれる。

というものです。(大幅に端折っています・・・詳細は本家サイトをご覧ください)

これをうまく活用することで、スマホ用ページとPC用ページを分ける必要が無くなり、ソースを1本化することができるので、更新やメンテナンスが より簡単になると思います。

「Mobile First」 という言葉にあるように、『まず、モバイル環境(スマホ)で見たときの構成を考える』という点においては、旧来のWebサイトの構成方法 ( まずPC向けのサイトがあり、それをモバイル向けに作り変える ) という流れと逆の発想となりますので、サイト作成者は頭を少し切り替えて考える必要はあります。

下記は Grid system を利用して、横軸約300pxの塊を中心に構成した事例です。　ブラウザの横サイズに応じて、各ニュースの並びが 横方向・縦方向 に自動で切り替わります。　もし Grid System を使わなければ、スマホで閲覧した場合、拡大・縮小・横スクロール を行う必要が出てくるので、閲覧に関する利便性を極端に損なうことになると思います。

装飾表現

Twitter Bootstrap では、様々な装飾を行うことができますが、実際に使用している表現をいくつか解説します。

バッジ　Badges

試合は、6年以下、5年以下、4年以下 で それぞれ A/B/C チームを編成しています。 どのチームの試合かを示すために、この バッジ(Badges) による表現を利用しています。

A　→　<span class="badge badge-success">A</span>
B　→　<span class="badge badge-important">B</span>
C　→　<span class="badge badge-info">C</span>

ラベル　Labels

特に強調したい部分がある場合に、ラベルによる装飾を行っています。　バッジとの違いは、角の丸さ加減？ だけだと思いますｗ
バッジやラベルは、タグだけでイラスト的な要を組み込むことができるので、強調したいときに非常に簡単に利用できることがいいところです。

優勝　→　<span class="label label-info">優勝</span>
ベスト32　→　<span class="label label-important">ベスト32</span>

プログレスバー　Progress bars

これは、試合の勝率を示す部分に使っています。　progress-striped というクラスを指定するだけで、バーが流れて見れるようになり ページ自体に動きが出るので、印象度が高くなると思います。　たった3行ですが 効果が高い装飾です。

勝率：8割1分2厘
<div class="progress progress-striped progress-info active">
  <div class="bar" style="width: 81.2%;">勝率：8割1分2厘</div>
</div>

カルーセル　Carousel

いわゆる スライド式の画像 です。　画像をたくさん並べると ページの面積を多く取ることになるので、1枚の画像領域に複数枚の画像を順に表示することで、ページ全体をコンパクトにまとめることができます。　あまり多用すると、煩わしいページ・・・になってしまうので、1ページあたり1箇所までがよいと思います。


<center>
<div id="myCarousel2" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="active item">
<img src="/wp-content/uploads/2013/12/bosyu2014.jpg" alt=""></div>
<div class="item">
<img src="/wp-content/uploads/2013/03/20130323_02.jpg" alt=""></div>
<div class="item">
<img src="/wp-content/uploads/2013/03/20130323_03.jpg" alt=""></div>
</div>
</div>
</center>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.carousel').carousel({
  		interval: 5000
  	})
});
</script>

アイコン　Icons

予め定義されているアイコンを、タグ指定のみで呼び出すことができます。　本サイトでは、　くらいしか使っていませんが、かなり多数のアイコンが用意されています。

　→　<i class="glyphicon glyphicon-glass"></i>
　→　<i class="glyphicon glyphicon-ok"></i>
　→　<i class="glyphicon glyphicon-home"></i>
　→　<i class="glyphicon glyphicon-flag"></i>
　→　<i class="glyphicon glyphicon-book"></i>

このように、予め規定されている表現を html タグによって呼び出し、見栄えの良いページを容易に作成することができます。　本Webサイトは 少年野球のサイトですが、それに限らず 様々な用途でこの仕組みを活用することができます。