Bootstrapの終焉

2019年06月24日

スマホ向けサイトを作るうえで、
「Twitter Bootstrap」というものが登場しました。

現在では 「Bootstrap」という名称になっていますが、
その名の通り Twitter社が制作したもので、
CSS3が浸透しきっていない時代、
レスポンシブ対応のサイトを作ることができるフレームワークです。

しかし、今となっては CSSのみでレスポンシブ対応が可能となってきており、
Bootstrap自体も 必要のないものと なってきました。

決してBootstrapを批判したいわけでは ありません。
ただ、『役目を終えた』のではないかと思うのです。

現在、Bootstrapを使う利点と言えば、
古いブラウザへの対応と、用意されたデザインの利用。
この2つが挙げられるでしょう。

古いブラウザへの対応ですが、
Chromeで「検証」してみたところ、
Bootstrapの場合、「display: flex;」ではなく、
「float」を使っている所を見受けられました。
つまり、CSS3に対応していない 古いInternet Explorerなどでも、
レスポンシブデザインが実現できる可能性も あります。

しかし、そのような古いブラウザに対応したところで、
あまり意味は ないでしょう。
第一、Googleの検索エンジンも 古いブラウザに対応させるよりも、
スマホに対応させていることを重要視しています
し、
スマホの標準ブラウザでさえも CSS3には対応しているでしょうし。

それに CSS3非対応ブラウザで レスポンシブを実現するには、
JavaScriptも それなりに動かしてる必要があり、
動作も重くなる要因となるでしょう。

また、Bootstrapを使うと、
どうしてもHTMLの入れ子構造が 多くなってしまい
可読性も欠いてしまう要因にもなります。

Bootstrapで用意されたデザインについても、
これも極力 CSSで自分で作るか、
ボタンなど CSS素材として配布してあるものを
使ったほうがいいでしょう。

配色に関しても Bootstrapでも いくつか用意されていますが、
黄色や赤を基調としたデザインにするため、
「bg-warning」や「bg-danger」などといった
クラスを使うかもしれませんが、
とくに警告でもないのに「warning」であったり、
危険でもないのに「danger」であったりするのでしょうか。
そんな些細ながらも 矛盾をなくすためにも、
要素の背景色を変更するCSSぐらいは 覚えたほうがよいでしょう。

また、これらのクラスで見た目を設定し続けていると、
CSSデザインのウリでもある 一括変更が出来なくなったり、
クラス自体が HTMLコードの肥大化を生む要因にもなります。

また、Bootstrapの有無に関係なく、
クラスでサイズや配色を行えるようにするのは、
やめておいたほうが いいです

例えば「mb10」「mb20」「mb30」などのクラスを たくさん作っておき、
それらに「margin-bottom: 10px;」「margin-bottom: 20px;」
「margin-bottom: 30px;」といったCSSを適用し、
つまりは「margin-bottom」の略に使っている事です。
それで自作フレームワークなどと言っているようでは、
ぶっちゃけて言うと 超ド素人だと思いますし、
それに、こんなスタイルの適用の仕方を行っていると、
デザインの大部分を変えようと思ったときに、
CSSを編集するだけでは 手に負えなくなります。
テキストを中央寄せにしたいぐらいなら まだいいかもしれませんが、
クラスをスタイル名に使うのは、使い方を間違えているでしょう。

逆に HTML側は極力シンプルにするべきです。
そうしておけば、CSSを編集するだけで
雰囲気そのものの変更にも 対応しやすくなりますし、
また、クラス名も極力意味を持つものとしておけば、
CSS側の どこを編集すればいいのかも わかりやすくなるはず。

Bootstrapの話に戻りますが、
個人的にも Bootstrapを使うよりも、リセットCSSを付けて、
後は スクラッチでCSSを書いていったほうがラクだと思いました。
昔もよく言われていたものです。
ホームページ作成ソフトを勉強するよりも、HTMLを勉強したほうが早いと。
まさに それと似ているのではないかと。

BootstrapはBootstrapで、CSS3が発展しきれていない時期において、
よく活躍してくれたものだと思います。
今となっては そのありがたみも感じながらも、
眠らせてあげるのが いいのかもしれません。

Pocket