CSSフレームワーク Bootstrap 4 チートシート

2020年4月12日

2020年8月19日

WEBサイトのコーディングで幅広く利用されているCSSフレームワークのBootstrapですが、個人的にはフロントではほとんど利用しませんが、そこまでデザインを気にしないシステムの管理画面で大変お世話になっています。

あくまで管理画面などで簡易に利用する場合ですが、非常に便利なサイトを見つけたので記事にしてみました。

フレームワークとは？

CSSフレームワークとは、よく利用される「パーツ」や「機能」などがまとめられ、制作時の手間を省くことができ、コーダーは決められたコーディングルールに従うことで、複数人のチームで作業した場合でも統一性のあるコーディングが可能になるライブラリのようなものです。

BootstrapはCSSフレームワークの一つで、JavaScript・jQueryなどを読み込み、アニメーションなど、ダイナミックなWebサイトを制作するのに便利なライブラリです。

Bootstrapを利用するにあたり、システムの管理画面に利用することを前提にしますが、レスポンシブに対応、UIもそこそこデザイン可能、見た目の統一、Classの命名規則の統一などに、大変重宝します。

Bootstrapをより簡単に利用するためにまとめられたサイトがあります。
Bootstrap 4 Cheat Sheetです。

このようにClass名が機能別に記載されています。
かなりの量のサンプルがあります。

利用したいクラスをクリックするとサンプルコードとプレビューが表示されます。

ここで紹介されてる配色は8種類程度ですが、管理画面で利用する分には十分だと思います。
下記はその一部機能です。

複雑なレイアウトやレスポンシブデザインも簡単に実装できるので、HTML、CSSのコードを書く手間を大幅に減らす事ができるので、プログラミングにより時間をかける事ができるのでプログラマーにはおすすめのサイトです。

S.E->シェア;