入社して早くも8ヶ月が経とうとしている、システムちーむのベンです。

今回はデザインが苦手なプログラマでも、
お手軽におしゃれなレイアウトが実装できるCSSフレームワーク
「Bootstrap」を紹介したいと思います。

バージョンは v4.0.0-alpha.5

Bootstrapのダウンロードなど初期準備については割愛させて頂きます。

サンプルページを作成し、

Bootstrapを使用前のBefore
Bootstrapを使用後のAfter

の流れで見ていきます。

Before

まずはBeforeページ

はい、コンセプトがよくわからないホームページです。

配置などはCSSで調整しました。
けっこう時間がかかりました。汗

Afterページを際立たせるためにかなり質素めに。

After

では次にAfterページ
Bootstrapを使用しデザインしなおしたものがこちら

どうでしょうか？
だいぶ垢抜けたかと思います。

さらに…

レスポンシブ化も行いました！

グリッドシステム

ではソースなどを見ていきましょう。

メニューバーとService Listの一覧部分は
「グリッドシステム」を使いレスポンシブ対応させています。

グリッドシステムに関しての説明は、
下記のサイトがわかりやすかったので、ご参照ください。

Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする

メニューバー

<nav id="menu" class="navbar navbar-light bg-success hidden-xs-down">
    <ul id="" class="nav navbar-nav">
        <li class="nav-item col-sm-3"><a class="nav-link" href="">Home</a></li>
        <li class="nav-item col-sm-3"><a class="nav-link" href="">About</a></li>
        <li class="nav-item col-sm-3"><a class="nav-link" href="">Menu</a></li>
        <li class="nav-item col-sm-3"><a class="nav-link" href="">Contact</a></li>
    </ul>
</nav>

メニュー項目が4つなので、
liのクラスをcol-sm-3と指定すると均等な幅になります。

Service List

Service Listでは項目が3つなので
col-sm-4を指定する事で均等な幅になります。

このようにグリッドシステムを使う事により、
ウィンドウ幅に合わせてサイズが変わるようになります。

装飾系

フォーム

<input class="form-control form-control-sm" type="text" placeholder="Search">
<input type="button" value="Search" class="btn btn-warning btn-sm">

フォーム用のクラスを追加するだけで、可愛らしいデザインにする事ができます。

Infomation

<span class="tag tag-warning">お知らせ</span>

tagを使うとタグ風にする事ができます。

その他の部分もBootstrapの機能を使い装飾をしてあります。

まとめ

以上の通り、classに追加してあげるだけで、
お手軽に今風おしゃれデザインやレスポンシブ対応を実装する事ができます。

紹介した以外にもたくさんの機能が備わっていますので、
デザインに自信がないという方は是非Bootstrapをご活用ください！