前回はReactを用いてサーバサイドの画面を作成しました。

次に、レイアウトに特化したBootStrapを用いて画面を作成しました。

 

１．BootStrapとは

Webサイトのレイアウトを簡単にかつ綺麗に作ることができる外部ツールです。

元は米Twitter社が開発したものですが、日本語のドキュメントも充実しているため、「こんなレイアウトにしたい」「ボタンの色はこれがいい」等、簡単に調べることができます。

※HTMLの基礎知識は必要になってくるので、完全初心者には理解しにくいかもしれません

公式サイト

 

２．バージョンによって記述方法が全く異なる

BootStrapを使う上で最も気をつけなければならないこと、それはバージョンです！

2023年3月30日時点で最新のバージョンは5ですが、ネットでサンプルを探すとバージョン3やバージョン4のものが結構出てきます。しかも、バージョンによって書き方が違っていたり、旧バージョンの書き方では動かなかったりします。

＜例＞

ボタンを左端と右端に配置したい場合

①バージョン4の場合

text-left/text-right

 

②バージョン5の場合

text-start/text-end

 

そのため、自分が使うBootStrapのバージョンが何なのか、しっかり確認するようにしましょう！

 

３．アイコンもあります

なんと、BootStrapでアイコンも表示できるようになりました。

アイコンといえば有名なのは「Font Awesome」ですが、BootStrapもそこに負けじとアイコンを作成したという印象です。

公式サイトにたくさんのアイコンがあり、そこからアイコンのリンクをコピペするだけで簡単に使えるのでとても便利でした。

BootStrap Icons

 

４．まとめ

今回はBootStrapについて、使ってみた感想をざっくりと記載しました。

ちょっとおしゃれなレイアウトを簡単に実装したい、という方はぜひ一度お試しを。

 

ちなみに、BootStrapの学習として本は色々出ていますが、バージョンアップのテンポが早いため、まずはネットやYoutube等を入り口に学んでみるのが良いかと思います。

 

いや〜〜、技術の進歩は早いっ！！

 

以上