プログラミング

プログラミング

CSSとSASSを使ってBootstrap4 (ブートストラップ)でデザインを効率よく簡単にカスタマイズする方法

UX Planet

UX Planet is a one-stop resource for everything related to user experience.

本記事は、How to Customize Bootstrap Custom themes for Bootstrap 4 with CSS or SASS
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

125 views

読了時間 : 約11分42秒

ブートストラップをカスタマイズするには様々な理由があります。

  • 色、フォント、ボーダーなどの現存しているブートストラップの変化
  • ブレークポイントやガターの幅などのブートストラップのグリッドレイアウトの変化
  • 新しいカスタムを伴うブートストラップの拡張

 

理由はなんであれ、ブートストラップをカスタマイズするには2つの方法があります。CSSを使っている簡単な方法から初めて、SASSを使う発展した方法を説明します。

 

1. Simple CSS Overrides

この方法は、オーバーライドスタイルを作るブーストラップのCSSルールを定義することによって使うことができます。この方法を使うのは簡単で、あなた独自のカスタマイズスタイルを壊すことなくまだ目新しいバージョンにアップグレイドさせてくれます。

 

CSSでは、順番が関係してきます。CSSルールの最後の定義はCSSセレクターと資産がマッチするルールをオーバーライドすることです。

 

この記事は、どのようにCSSのオーバーライドカスタマイズ法が働くのかを説明しています。

 

私たちの紹介するCSSカスタマイズはcustom.cssファイルの中に位置されます。そのため、bootstrap.cssはそのまま修正されないでおいておきます。custom.cssへの参照はオーバーライドを可能にするbootstrap.cssのあとに続きます。

 

<link rel=”stylesheet” type=”text/css” href=”bootstrap.min.css”> <link rel=”stylesheet” type=”text/css” href=”custom.css”>

 

custom.cssファイルのなかに必要とされる変化はすべて付け加えられます。例えば、カード、ボタン、フォームインプットから丸角を取り除きたいとします。

 

custom.cssのなかでCSSルールを付け加えて…

 

/* remove rounding from cards, buttons and inputs */
.card, .btn, .form-control { border-radius: 0; }

 

このシンプルなCSS変換と共に、カード、ボタン、フォームインプットはこのように角を持った形をしています。

 

 

ここにCodeplyの制作デモがあります。

How to Customize Bootstrap – UX Planet

 

 

 

CSS Specificity is Important.

カスタマイズを作るときに、CSS Specificityの理解が必要となってきます。

 

custom.cssのオーバーライドはbootstrap.cssと同じように特殊なセレクターを使う必要があります。下にブーストラップ4のnav-linkの例があります。

 

 

.navbar-dark .navbar-nav .nav-link {
 color: rgba(255, 255, 255, 0.5);

 

nav-linkカラーをオーバーライドするために、これは機能しません。

 

.navbar-dark .nav-link {
 color: silver;
}

 

custom.cssの中のセレクターはブーストストラップセレクターとマッチさせる必要があります。

 

.navbar-dark .navbar-nav .nav-link {
 color: silver;
}

 

もちろん、もっと特殊なセレクターを使うこともできます。例えば、nav-linkカラーをid=”#navbar1”ととって変えたいならば…

 

 

#navbar1 .navbar-nav .nav-link {
 color: silver;
}

 

 

を使います。

 

メモ:ブーストラップ活用をオーバーライドしない限り、CSSで!importantを使う必要はありません。

 

CSS Specificityはいつも一つのCSSクラスから別のクラスにオーバーライドするときに機能します。

 

custom.cssですべてのブーストラップのオーバーライドを付けることによって、簡単に変更を追跡でき、必要ならば元に戻すこともできます。もしbootstrap.cssスタイルシートに直接変更を書き込みたいならば、変更の追跡することが難しくなります。

 

ブートストラップのバージョンへの小さなアップブレードはcustom.cssでカスタマイズスタイルを変更することなく、bootstrap.cssを簡単にスワップアウトすることでできます。

 

CSSオーバーライドを使用はブーストストラップのカスタマイズに有効ですが、もっと複雑な変更のときはSASSがより使いやすいでしょう。例えば、ブーストラップでブルーから他の色に変えたいとします。その場合CSSオーバーライドを下記のように作ることができます。

 

 

.btn-primary { background-color: red; }

 

 

これは、.btn-primaryボタンを赤色に変更することを表しています。しかし、”:hover”, “:active” や “disabled”などの他のbtn-primaryの含む言葉は変わりません。また、.alert-primary, .text-primary, .bg-primary, .btn-outline-primary, .badge-primaryなどの全体的なCSSを通して主な色に変化はありません。

 

 

2. Customize Bootstrap using SASS

まず初めに、SASSについて説明し、それがどのようにブーストラップに関係しているのか見ていきましょう。

 

 

  • SASSは言語シートであり、CSSの前段階である
  • SASSはウェブブラウザ―により理解されるためにCSS内で構成されている
  • SASSで書かれているファイルは通常、.scssを使っている
  • 全体的なブーストラップ 4 CSSソースはSASS内に記述されている

 

 

全体的なブーストラップ4CSSソースはSASS言語で書かれているため、ブーストラップ4CSSファイルはSASS 構成を駆使して構成されています。それゆえ、SASS はおすすめのブートストラップカスタマイズ方法だと言えます。

 

 

 

Project Structure

初めに、ブートストラップ4SASS ファイルとそのフォルダー構造について考えてみましょう。

 

 

|– \bootstrap
| |– \scss
| | |– \mixins
| | |– \utilities
| | |– _functions.scss
| | |– _mixins.scss
| | |– _variables.scss
| | |– (…more bootstrap scss source files)
| | |– bootstrap-grid.scss
| | |– bootstrap-reboot.scss
| | |– bootstrap.scss

 

 

ブートストラップSASSソースファイルについて知っておくべきこと

 

 

  • bootstrap.scssファイルは@import “..”というSASSを使っている他の全てのSCSSのファイルを参照するメインファイルです
  • _variables.scssファイルはカスタマイズやオーバーライド可能なすべてのSASSを含んでいます
  • _variables.scssは_functions.scssと_mixins.scssファイルによって多様性があります
  • ブーストラップCSSはbootstrap-grid.scssやbootstrap-reboot.scssから構成されています

 

 

ブートストラップSASSマップの一般的な使い方

ブーストラップを知ることでSASSの使い方の多様性が広がります。よく使われるものをご紹介します。

 

 

テーマカラー

ブーストラップの見かけのことについてですが、カラーパレットの変更は一番初めに疑問に思うことですよね。これらの色を変更することは$theme-colorsのSASSマップを使います。

 

 

$theme-colors: (
 “primary”:    ..,
 “secondary”:  ..,
 “success”:    ..,
 “info”:       ..,
 “warning”:    ..,
 “danger”:     ..,
 “light”:      ..,
 “dark”:       ..
);

 

 

Enable…

説明的なtrue/falseはこのように表されます。

 

 

$enable-rounded: true;
$enable-shadows: true;
$enable-gradients: false;
$enable-grid-classes: true;
$enable-print-styles: true;

 

 

Grid Breakpoints

ブレークポイントは典型的なデバイスの幅が基本とされており、必要ならば変更されます。

 

$grid-breakpointsのSASSマップの変更はその他のクラスと同じくグリッドブレーキングポイントを変えます。

 

 

$grid-breakpoints: (
 xs: 0,
 sm: 576px,
 md: 768px,
 lg: 992px,
 xl: 1200px
);

 

Vertical and Horizontal Spacing

 

スペーサーは多くのブーストラップCSSで間隔を空けるときの基本として使われます。

次の言語を追加することでスペースを取ることができます。

 

$spacer: 1rem;

ブーストラップドキュメントでの説明として、カスタマイズはブートストラップSASSソースファイルの外にあるcustom.scssファイルに保存されなければなりません。

custom.scssを作るときに、参照のため_variables.scssを保存してください。

 

|– \bootstrap
| |– \scss
| | |– \mixins
| | |– \utilities
| | |– (…more bootstrap .scss source files)
| custom.scss <– changes go here outside bootstrap’s SASS source

 

冒頭のCSSオーバーライドの説明と似ていますが、custom.scssファイルを使うことで、ブーストラップソースには直接影響しない変更を加えることができます。

 

Customize!

初めに話しましたが、自身のスタイルを用いて変更したりオーバーライドしたりできるブーストラップの違ったアプローチ方法があります。それぞれの例をご紹介します。

 

Change an existing style such as colors, fonts, or borders…

 

 

初めに作ったbtn-primaryを変更してみましょう。

btn-primaryを変える代わりに、全体のCSSを通してprimaryテーマカラーを変えたいとします。ここにそれをどのようにするかを書いてみます。

 

 

custom.scss
/* import only the necessary Bootstrap files */
@import “bootstrap/scss/functions”;
@import “bootstrap/scss/variables”;
/* ——-begin customization——– */
/* change the primary theme color to red */
$theme-colors: (
 primary: red;
);
/* ——-end customization——– */
/* finally, import Bootstrap to set the changes! */
@import “bootstrap”;

 

 

メモ:@importはcustom.scssと関係しており、プロジェクトによって異なります。

 

 

custom.scssの中に見られるように、オーバーライドに必要とされるブーストラップがいります。@import “bootstrap”と変更してください。@import “bootstrap”の前に変更することが大切です。ここに別の例を用意してみました。

 

 

Add a new theme color (btn-purple, bg-purple, text-purple, etc..)…

 

 

custom.scss
/* import only the necessary Bootstrap files */
@import “bootstrap/scss/functions”;
@import “bootstrap/scss/variables”;
/* ——-begin customization——– */
/* change the primary theme color, and add a new theme color */
$theme-colors: (
 primary: red;
 purple: $purple; // $purple is defined in _variables.scss
);
/* ——-end customization——– */
/* finally, import Bootstrap to set the changes! */
@import “bootstrap”;

 

 

 

Change the grid layout breakpoints…

 

 

custom.scss
/* import only the necessary Bootstrap files */
@import “bootstrap/scss/functions”;
@import “bootstrap/scss/variables”;
/* — begin customization —- */
/* change the primary theme color to red */
$theme-colors: (
 primary: red;
);
/* increase the width of the grid lg and xl breakpoints */
$grid-breakpoints: (
 lg: 1024px,
 xl: 1366px
);
/* increase container width for the wider lg and xl breakpoints */
$container-max-widths: (
 lg: 1050px,
 xl: 1400px
);
/* — end customization —— */
/* finally, import Bootstrap to set the changes! */
@import “bootstrap”;

 

 

Extend Bootstrap classes with new custom classes (ie: row-dark)…

 

新しいカスタムクラスを作るために存在しているブーストラップクラスを拡張することができます。

 

例えば、下に表示されているのはブーストラップ.rowクラスを拡張した.row-darkクラスです。そして、背景の色を付け加えます。どのようなカスタマイズが@import bootstrap.cssの後に来るのか見てみましょう。

 

 

custom.scss
/* 1. import only the necessary Bootstrap files */
@import “bootstrap/scss/functions”;
@import “bootstrap/scss/variables”;
/* 2. begin customization —- */
(variable changes as before here…)
/* — end customization —— */
/* 3. import Bootstrap to set the changes! */
@import “bootstrap”;
/* 4. add @mixin or @extend customizations here */
/* create new custom classes from existing classes */
.row-dark {
   @extend .row;
   background-color: #333333;
   color: #ffffff;
}
/* use @mixins */
.btn-custom {
 @include button-variant(red, white, red, red);
}

 

 

custom.scssは適切なカスタマイズを含んでいるので、CSSの結果を調節するためにSASSを集める必要があります。

 

3. Compile the SASS

CSSのなかでSASSを集めるために使われるツールがあります。

ウェブブラウザーはSASSを把握できないので、全てのツールはウェブサーバー上で運営されます。こちらに有名なSASSツールを並べてみます。

 

Node SASS

 

Gulp SASS

 

Webpack SASS

 

SASSカスタマイズまとめ

1 custom.scss内にセットされているカスタムはブーストラップ、_variables.scssの中に設定されている!defaultを持つ変数をオーバーライドする。

 

2 ブーストラップはSASSが全てのCSSを調節できるようにインポート(@import “bootstrap”)される。

 

3 最後に@extendブーストラップクラスの追加カスタムクラスは@import “bootstrap”の後に定義される。これらはステップ2からのカスタマイズされたブーストラップクラスの後にCSSに追加される。

 

もし直接SASSソースを使うことを好まないのであれば、もっと簡単な方法があります。

Themestr.appは変更するため分かりやすいウェブベースのUIを提供してくれます。また、ダウンロードできるようにcustom.scssやcustom.cssを調節してくれるのです。

 

さあ、準備はできました! ブーストラップを使いこなすことは難しいのですが、カスタマイズはとても大切な作業です。CSSやSASSを使ってブーストラップ4をあなたらしいユニークな仕上がりにしてみてはいかがでしょうか。

 

おすすめ新着記事

おすすめタグ