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
特に強調したい部分がある場合に、ラベルによる装飾を行っています。 バッジとの違いは、角の丸さ加減? だけだと思いますw
バッジやラベルは、タグだけでイラスト的な要を組み込むことができるので、強調したいときに非常に簡単に利用できることがいいところです。
優勝 → <span class="label label-info">優勝</span>
ベスト32 → <span class="label label-important">ベスト32</span>
プログレスバー Progress bars
これは、試合の勝率を示す部分に使っています。 progress-striped というクラスを指定するだけで、バーが流れて見れるようになり ページ自体に動きが出るので、印象度が高くなると思います。 たった3行ですが 効果が高い装飾です。
<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サイトは 少年野球のサイトですが、それに限らず 様々な用途でこの仕組みを活用することができます。