Fire Engine

化学の修士号→消防士→ITエンジニア(2016年11月〜)

Bootstrapのグリッドシステムとサムネイルを使ってポートフォリオのデザインを整える

 個人でWebサイトやWebアプリケーションを作るときには、HTMLやCSSなどのフロントエンドの知識は必ず必要となります。しかし、独学でHTMLやCSSを勉強してもなんかデザインがいまいち、、(そもそも、技術云々の前にデザインのセンスがないから無理だ。)ということはよくあります。とはいえ、Webデザイナを目指すわけじゃないからできればフロントエンドに割く時間を最小限にしてサーバサイドの勉強に専念したい!そういうときに最適なのがBootstrapだと思います。

getbootstrap.com

目次

今回作ったもの www.hirotsuru.sakura.ne.jp

今回やること

 今回は、以前私が作成したポートフォリオにBootstrapを適用し、デザインを整える過程を書いていきたいと思います。

hirotsuru.hatenablog.com

 今回導入する技術は、グリッドシステムとサムネイルの2つだけです。

  Bootstrapに関する説明と使用する準備については以前の記事に少し書いていますので、こちらも合わせて参考にして下さい。

hirotsuru.hatenablog.com

グリッドシステム

グリッドシステムとは

 グリッドシステムは,画面のレイアウトを格子状に分割し、コンテンツを配置するデザイン手法です。つまり、下のようにコンテンツを横に並べたいときには、このグリッドシステムが有効です。

f:id:hirotsuru314:20160609200614p:plain

 Bootstrapにおけるグリッドシステムでは、画面を縦に12分割し、12個のカラムとして取り扱う手法が採用されています。さらに、Bootstrapのグリッドシステムを用いることで、コンテンツを自由に配置できるだけでなく、簡単にレスポンシブなWebデザインを作成できるという大きなメリットもあります。

http://getbootstrap.com/css/#grid

使用ルール

 使い方は簡単で、以下のルールを基づきclass属性を書くだけです。

1.class=”container”か”container-fluid”の中に

(containerとcontainer-fluidの違いはこちらを参照)

2.class=”row”の中に

3.class=”col-{prefix}-{columns}”の形式でクラス名を書く

 ここで、{columns}は合計が12になるように指定しなければなりません。

 また、prefixの部分は、ブレイクポイントを決定しており、レスポンシブなデザインにするために非常です。ブレイクポイントとは、画面サイズに応じてレイアウト切り替わるポイントのことであり、すなわちコンテンツが横並びから縦並びに切り替わるポイントとなります。Bootstrapでは、このブレイクポイントを「スマホ」「タブレット」「デスクトップ」「大画面デスクトップ」の4つに分けて指定することができ、それぞれのデバイスに対応するレイアウトを作成することができます。

f:id:hirotsuru314:20160609201400p:plain

画面を12分割するイメージとしてはこんな感じです。

f:id:hirotsuru314:20160609201518p:plain

http://getbootstrap.com/css/#grid より引用)

使用例

 実際に使ってみた例を見た方がわかりやすいと思うので、以下に示します。

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2" style="background-color:red;">Red</div>
    <div class="col-sm-8" style="background-color:blue;">Blue</div>
    <div class="col-sm-2" style="background-color:yellow;">Yellow</div>
  </div>
</div>

f:id:hirotsuru314:20160609202815p:plain

このように1:4:1に分割されたレイアウトができます。(合計を12にしないといけないので、コード上では2:8:2と書かなければならない。) そして、このようなレイアウトは画面がタブレットサイズ(768px以下)になると、

f:id:hirotsuru314:20160609202818p:plain

このように自動で縦並びに切り替わります。

ポートフォリオに導入する。

 以前作成したポートフォリオにグリッドシステムに導入してみました。(6:6で半分に分割して横並びに配置しました。)

f:id:hirotsuru314:20160609202921p:plain

 実はこれは見た目は導入前と全く変わりません。以前は、floatプロパティを使ってコンテンツを横並びにしていました。素人の私はこれにけっこう苦労しました。floatプロパティを指定すると、コンテンツを浮動ボックスとして扱えるため、コンテンツを自由に配置できるわけですが、意図しない位置にボックスが入り込んだりしてレイアウトがぐちゃぐちゃになったりとけっこう苦労しました。そんなときに学んだのが「clearfix(クリアフィックス)」というテクニックです。詳細は解説しませんが、clearfixを正しく理解して導入することで、レイアウトを自在に操ることができます。ほんとにWebデザインって奥が深いなーと思いました。しかし、Bootstrapのグリッドシステムを使えば、floatがどうとか、clearfixがどうとか全然考えなくてもclassを指定するだけで、コンテンツを自由に配置できます。さらにマルチデバイスにも対応できるのが非常に助かります。ただ、一度Bootstrapを用いずに実装してみるのも、CSSレイアウトの勉強になるのでいいかなーと個人的には思います。

サムネイル

サムネイルとは

 サムネイルは、多数の画像を一覧表示するために、本来のサイズより大幅に縮小された画像のことです。イメージとして、下のようなAmazonなどの商品一覧のページを考えるとわかりやすいかと思います。

f:id:hirotsuru314:20160609203051p:plain

 実は、サムネイルを作成するには上記のグリッドシステムを使います。小さなボックスを横に並べるイメージです。ただし、Bootstrapにはサムネイルを簡単に作成する便利ツールが用意されているので、それを使ってみたいと思います。

http://getbootstrap.com/components/#thumbnails

使用ルール

 さきほどのグリッドシステムの使用ルールに加えて「class=“thumbnail"」を入れるだけです。要は、ほぼグリッドシステムなのですが、クラス名に”thumbnail”を付けるだけで、下のようなBootstrapのthumbnailにデフォルトで、設定されているものが適用されます。

.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.428571429;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  -webkit-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}

デフォルトの状態で角が丸くなった白背景のボックスができるため、そこに写真を埋め込むというイメージです。また、class="caption" とするだけで、写真の説明文を入れることができます。

ポートフォリオに導入する。

 以前作成したポートフォリオのWorksの部分にサムネイルを導入しました。こんな感じになります。

f:id:hirotsuru314:20160609203428p:plain

 もちろん、Bootstrapを用いなくても、前述したfloatプロパティを使ってデザインすることもできます。私は、Bootstrap導入前は、このWorksの部分はpositionプロパティの「absolute」と「relative」(絶対位置と相対位置)を用いて、書いていました。floatプロパティとの違いは、positionプロパティを用いたものでは、Z軸方向にボックスを重ねて表示している点です。しかし、その手法ではレスポンシブなデザインにすることは難しいため、今回のようにサムネイルにしました。私のポートフォリオではまだ2つしかボックスがありませんが、前に示したAmazonの商品一覧ページのようにコンテンツの数が多くなるほどサムネイルは有効です。それは、Bootstrapのclass=”col-{prefix}-{columns}”の部分を適切に設定するだけで、画面によって縦4列に並べ、画面が小さくなると2列、さらに小さくなると縦1列に並べるといった画面サイズに応じてどのように表示するかも柔軟に設定しやすくなるためです。

 Webアプリケーションを作ってみたいけど、HTMLやCSSまでマスターしようと思うとけっこう骨が折れるなーと思っている方は、Bootstrapを積極的に活用してみてもいいと思います。