Bootstrap 4 CSS customization

ja | en

ホーム

⇒ カスタマイズの方法

目次

チュートリアルについて

この短いチュートリアルはBootstrap 4のスタイルをカスタマイズする方法についての解説です。Bootstrap CSSはSassで記述されており、拡張コードを書き加えることによりカスタマイズすることができます(通常Bootstrapのライブラリソースコードを書き換える必要はありません)。

このチュートリアルはpugで記述し、node.js上のnpmでビルドしています。ソースコードはGitHub、サイトはGitHub Pagesで公開しています。

ビルドの方法

Bootstrap 4をカスタマイズするには開発環境の設定が必要ですが、本チュートリアルはそれ自身が開発環境のデモサンプルにもなっており、実際に環境をセットアップして自分でビルドできます。詳しくはチュートリアルのビルドをご覧下さい。

Sassの学習

BootstrapのカスタマイズにはSassの知識が必要ですが、BootstrapのソースコードはSassを学ぶための良い教材にもなります。コードを読みドキュメントを参照しながら自然にSassを学習することができます。

Sassは始めRubyで作られましたが、その後様々な環境や言語へ移植されています(Wikipediaを参照)。公式サイトが扱う実装もRuby、C++、Dartの3種類あります。

Sassの主要な公開ドキュメントは次の通りです。実装はたくさん種類がありますが言語仕様の詳しい解説はRuby版しかありません。ただし基本的な言語仕様に違いはないのでRuby版ドキュメントを読めば理解できます。

⇒ カスタマイズの方法