bootstrap3でのサイト作成時の所感

ゲームの紹介サイトを作成している際に気になったことを共有します。

bootstrap3を活用すると、スマートフォン、タブレット、PCのどれでも見やすいサイトが作成できます。

作成しましたサイトはこちらとなります。
- 世界は今日も夢を見る。
http://plus.next-soft.net/SekaYume/

bootstrap3について

2014年11月現在。Currently v3.3.1
http://getbootstrap.com/
なお、2013-08 にbootstrap 3はリリースされています。

移行時に気になったこと

以前にbootstrap2でおおよその枠組みを作っていましたが、bootstrap3が主流になってしまったので急遽差し替えました。

bootstrap3になって、設置方法、cssでの呼び出し方について大幅刷新されたため、
基本コンセプト以外はすべて覚えなおしと思っても差し支えないぐらい変化しました。
たとえば、アイコンマークを示す機能一つを取っても、以下のような具合で異なります。
旧
<i class="icon-star"></i>

新
<span class="glyphicon glyphicon-star"></span>


参考：
http://cccabinet.jpn.org/bootstrap3/components1.php

要素自体はあまり変わらない物の記述はそのまま流用できないため、タグを適宜置き換えていく形となりました。

ルール付けについては似通っているので、移行作業自体は置き換えに近いです。

bootstrapの新機能

bootstrap3では機能が加わって、bootstrap単体機能でも実用的なモジュールが追加されました。
画面を秒数ごとに切り換えるスライダーの実装、lightboxなどに代表されるmordalウィンドウの実装が行われており、
試しに使ってみましたが、おおよそ必要な機能は備えているのでまずは使うことを検討してもいいのではと考えます。

リキッドレイアウトについてもbootstrap2と比べてもcssへの追加記述なしで実施できますが、
レイアウトはよいとしても注意点としては、文字サイズについては実装が豊かではないので、
cssで直接メディアサイズごとに切り換える方法で書いて分けるほうが良いようです。

自分で実装したほうが良い項目

また、背景色、画像などの色彩については、設定できない個所は、まずはcssで置き換えを検討するほうがよいようです。
css入れ替えを検討するには元のcssの分量が多いこともあり変更する量が極めて大きいため、
基本のbootstrapのcssを入れた後、最小限の個所を差し替えるスタイルとしました。

以下はメディアサイズ毎にフォントを差し替えた例となります。

cssの抜粋。

/* レスポンシブのフォントサイズ指定 */

@media screen and (min-width: 0px) and (max-width : 767px){
    * {
        font-size:12px;
    }
    h1,h2 {
        font-size: 1.5em;
    }
    h3,h4 {
        font-size: 1.3em;
    }
    p,div, .panel-title, .form-control {
        font-size: 1em;
    }
    p.story  {
        font-size: 1.0em;
    }
    .copyright{
        font-size: 0.7em;
    }
}

@media screen and (min-width: 768px) and (max-width : 991px){
    * {
        font-size:14px;
    }
    .copyright{
        font-size:14px;
    }
    p.story  {
        font-size:14px;
        line-height: 1.8;
    }

}

@media screen and (min-width : 992px) {
    * {
        font-size:16px;
    }
    .copyright{
        font-size:18px;
    }
    p.story  {
        font-size:18px;
        line-height: 1.8;
    }

}

作業の際にはこちらを大変参考にしました。
http://cccabinet.jpn.org/bootstrap3/css.php