頼りすぎ注意!便利なBootstrapの隠れたデメリット

ウェブ業界の方々、Bootstrapを使っていますか?私はよーく使っています。とても便利なのでよく使うCMSではBootstrapを組み込んだテンプレートを自作しています。

しかし便利な反面、頼り過ぎると後々面倒なことになりそうな予感がしたので、Bootstrapの隠れたデメリットを自分なりに考えてみました。

そもそもBootstrapって何?

Bootstrapとはフロントエンド開発のフレームワーク。決まったパーツを組み合わせれば、誰でも簡単にPC、タブレット、スマートフォンに対応したレスポンシブなサイトを作れる超便利なツールです。

Bootstrapの特徴

グリッドレイアウトイメージ
12
カラム(列)のグリッドシステムを採用しています。グリッドシステムとは、画面を12列に区切ってデザイン要素を配置するという手法です。

2カラムのイメージ
例えば、横に50%:50%の幅で2つ要素を並べたいときは、12カラム幅の半分の6カラム幅と6カラム幅の要素を置くことで表現できます。

レスポンシブイメージ
さらに、スマートフォンでは1カラム表示(12カラム幅)、タブレットでは2カラム表示(6カラム幅×2)を、PCでは3カラム表示(4カラム幅×3)をするなど、端末サイズごとの表示をclassで指定するだけで実現できます。

HTMLではこんな感じで書きます

<div class="row">
 <div class="col-xs-12 col-sm-6 col-md-4">要素</div>
 <div class="col-xs-12 col-sm-6 col-md-4">要素</div>
 <div class="col-xs-12 col-sm-6 col-md-4">要素</div>
</div>

classのcol-xsがスマートフォンで12カラム幅、col-smがタブレットで6カラム幅、col-mdがPCで4カラム幅にする指定をしています。
たったこれでけでほぼ意図したレイアウトができてしまうのでとても便利です。

便利なのにどこが悪いの?

レイアウトをHTML上で決めている!

スタイルはもちろんCSSファイルに書かれていますが、スマートフォンでの表示の仕方、タブレットでの表示の仕方、PCでの表示の仕方をHTML内で決めています。つまりレイアウトを変えたい場合はCSSではなくHTMLを編集することになります。

コンテンツとレイアウトを分離するというHTML、CSSの概念に反しているのではないかと思います。
便利なら良いじゃないかと思いますが、ここに依存しすぎると将来後悔します。

どんなデメリットがあるか

Bootstrapの仕様が変わった時に崩れちゃう

.rowと.col-◯◯-◯◯の組み合わせで使うのですが、Bootstrapの仕様が変わってclass名や構造が変わった時にスタイルが適用されず表示が崩れる可能性があります。
実際、カラムのclass名はBootstrap2では.span◯◯で、Bootstrap3では.col-◯◯-◯◯なので全然違います。

もちろん古いバージョンのBootstrapを使い続ければ問題ありませんが、その古いバージョンのBootstrapが新しいブラウザや新しいスマートフォンに対応しておらず、新しい環境で表示が崩れるという危険があります。

その時はリニューアルすればいいでしょ?

サイトをまるごとリニューアルすれば解決します。でも、できればコンテンツは出来る限りそのまま持って行きたいです。. rowや.col-sm-6などの使わなくなったタグやclassを消す作業が発生します。あまりにもコンテンツが多い場合やCMSで構築されていてデータベース内にコンテンツが保存されていると手間がかかります。
自分のブログで過去の記事を直すハメになったら億劫ですね。

どうすればええんや?

自分の結論:コンテンツ部分ではBootstrapは使わない。

コンテンツ部分はとにかくシンプルで、できればclassも付けないでマークアップすることが重要だと思います。もしくはBootstrapとは別に、コンテンツ専用の将来的にも使い回せるCSSを作っておき、新しいフレームワークに変わった時にも再利用できるようにしておくと良いのではないでしょうか。

Bootstrapの書き方は、ヘッダーやフッター、メインとサイドエリアなど大枠のレイアウト、つまりテンプレートファイルのみに利用を限定しておけば、フレームワーク変更時にも最低限の組み直しで済みます。

まとめ

Bootstrapに限らず何かレームワークを使う場合は将来を見据えて利用し、コンテンツを資産として上手く残すように心がけたいです。

最後までお読み頂き、ありがとうございます。
この記事の内容が役に立ったと思ったら、ソーシャルメディアで共有してね。

Google+  B! はてブ  Pocket 

SNSでもご購読できます。