Bootstrap初心者が効率的に習得するためのツールとは

HTMLとCSSの基礎を一通り学習したので、Bootstrapを勉強し始めて、公式サイトなどを見つつ、ちょろっと使ってみたけど、どうも使いづらいなあ。Bootstrapの各種コードを一覧で見れるまとまった情報がないかなあ？という疑問にお答えします。

Bootstrapってあまり情報が無いですね。

公式サイトをはじめとするBootstrapについてのサイトや記事は、辞書的に使ったり、学習するには良さげですが、実際に手を動かしつつBootstrapを使う際には、必要な情報にアプローチしづらいですね。

そこで、Bootstrapを使う際に便利な、コードと使用例が一覧になったシートをご紹介します。

そのシートとは、「 Cheat Sheet 」です。

正式には、「 Bootstrap4 Cheat Sheet 」といいます。

Bootstrap4 Cheat Sheetの使い方

それではまず、cheat sheetの場所をご紹介します。

Cheat Sheetは、下記のリンクにあります。

Cheat Sheetにアクセスした画面です。

「 collapse all 」を選択して、各機能の見出しだけ表示されている状態です。

ここから見出しをクリックすると、アコーディオンパネルのように内容が展開されます。

画像では、「 Alerts 」の見出しをクリックしたので、詳細が展開されていますね。

「 collapse all 」の左側にある、「 Expand all 」をクリックすると、全ての見出しの詳細が展開された状態に表示されます。

お好みに応じて、表示を使い分けられる感じですね。

画像では、alert-primaryという値を選択しています。

すると、画面下の方にコードの使用例である「 Code snippet 」と、実行するとどんな表示になるかを表す「 Preview 」が表示されます。

「 Copy 」をクリックすると、使用例のコードがコピーできますので、練習用に自分の使っているテキストエディタなどに貼り付けて、いろいろ試せます。

どうでしょうか？とても便利ですね。

Bootstrapを使い始めたら、ぜひ知っておきたいCheat Sheetをご紹介しました。