web戦略等の情報や、WEB構築に役立つ情報を発信

人気フレームワーク「Bootstrap」をデザインしてみよう!

最近「Bootstrap」を利用しているサイトが増えてきました。Bootstrapとは一言で言うとCSSの便利なフレームワークのことです。見た目がある程度整っているため、ボタンや入力フィールド等をそのまま利用しているサイトも多くあります。最近「どのサイトの見た目も似たり寄ったりだな…」と感じるのは、おそらく皆が「Bootstrap」をそのまま利用しているからかもしれません。しかし、「SASS」を使えば「Bootstrap」の見た目を簡単に変更することができるんです。今回は、その変更の方法を解説していきます。

そのまま使うより、SASSでカスタマイズ

BootstrapのフレームワークはSASSから作られているため、設定ファイルのようなものが存在しています。設定ファイルの中ではボタン、テーマ、パネル、入力フィールド等、様々な変更が可能で、Bootstrapを使ったサイトをまったく別もののように見せかけることもできます。

早速カスタマイズしてみよう

テーマの基本色

$blue:    #102e70 !default;
$indigo#6610f2 !default;
$purple#6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange#ffe9b2 !default;
$mikan:   #ff8400 !default;
$primary:       $blue !default;
$secondary:     $yellow !default;
$success:       $green !default;
$info:          $gray-400 !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $white !default;
$dark:          $gray-800 !default;
 
$theme-colors: () !default;
$theme-colors: map-merge((
  “primary”:    $primary,
  “secondary”$secondary,
  “orange”:     $mikan,
  “success”:    $success,
  “info”:       $info,
  “warning”:    $warning,
  “mikan”:      $mikan,
  “danger”:     $danger,
  “light”:      $light,
  “dark”:       $dark,
  “gray”:       $gray-200
), $theme-colors);

上記のコードのように、基本色を変更することができます。また、作りたいサイトによっては、色の数を追加することが可能です。例えば「orange」の色を設定したけど、これとは別に色味が少し異なるオレンジ色を使いたい場合、「mikan」というような色を追加することもできます。

では「mikan」の色を使ってHTMLのclassを追加してみましょう。

<div class=“container bg-mikan p-5”>
    <p class=“text-white”>
        みかん色の背景とみかん色のテクストです!
        <button type=“button” class=“btn btn-mikan”>みかんボタン!</button>
    </p>
</div>

これで背景、テキスト、ボタン等を使うことができます。しかもエフェクト等はBootstrapのSASSで自動計算されるため、きれいに表示されます。

テーマの基本形

ボタンのボーダーや半径、サイトの幅や行のスペース等を細かく設定できます。

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px
) !default;

サイトの幅(レスポンシブ)

$grid-columns:               12 !default;
$grid-gutter-width:          1rem !default;

コラムの間の空間

$border-radius:              .70rem !default;
$border-radius-lg:           .80rem !default;
$border-radius-sm:           .95rem !default;

基本半径

様々な設定ができます。さらに細かく設定することもできます。

$btn-border-radius:          $border-radius !default;
$btn-border-radius-lg:       0.25rem !default;
$btn-border-radius-sm:       0.15rem !default;

全体と同じ設定にもできますが、ボタンのみの半径等も設定できます。

テーマの基本フォント

フォントの設定もできます。PCで表示するフォントの大きさ、スマホで表示するフォントの大きさ、といった設定もできます。

$font-family-base:            “Meiryo”, メイリオ, “MS PGothic”, “MS Pゴシック, $font-family-sans-serif !default;
$font-size-base:              1rem !default;
$font-size-lg:                ($font-size-base * 1.25) !default;
$font-size-sm:                ($font-size-base * .875) !default;
$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size:                $font-size-base * 2 !default;

おわりに

Bootstrapは全部で500行まで設定・変更が可能で、自分の好みやクライアントの要望に合わせた色やフォントを指定することができます。またレスポンシブ対応を考慮して、スマホ・PCのどちらでもきれいに表示できるよう、細かな設定もできます。皆さんもぜひ使ってみてはいかがでしょうか?

by
ウェブ中心のシステム開発をするスウェーデン人です。