Bootstrapを使ってみた

この記事は最終更新から1年以上経過しています。

ねこづきあゆむです。
今日はBootstrapを使って「ニコニ広告ex.」のサイトをリニューアルしました。

Bootstarapとは?

Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワーク

https://techacademy.jp/magazine/6270

簡単に言うと、CSSファイルの集合体(たぶんちがう)です。
htmlファイルでクラス指定するだけで、Bootstrapのスタイルできれいな感じにしてくれます。

例えば…

index.html
1
2
3
<a href="#dl" class="btn btn-primary btn-lg" role="button" aria-pressed="true">
<i class="fas fa-download"></i>ダウンロード
</a>

こんな感じで、特定の class を指定してあげるだけできれいな感じにしてくれます。

使ってみて

一長一短でした。

メリット

要素を形にしやすい

思っていたとおりにクラス指定するだけで大部分ができるのでとても楽です。
ナビゲーションバーとかもサクッと作れてしまったのでびっくりしました

レスポンシブ対応がしやすい

自分が頑張らなくてもレスポンシブになるのでとても楽。

デメリット

オリジナリティを出しづらい

どうしても、オリジナリティを出しづらいです。
先程ダウンロードボタンの画像を貼りましたが、あのボタン色んな所にありそうですよね。
そんな感じでオリジナリティが出しづらいです。

作っていると既存サイトに引っ張られやすい

自分だけかな?
作ってて、これいいなあれいいなという感じで詰め込んでいったらN Airのサイトっぽくなってしまいました。(特にDLリンクより下の部分)
どうしてもパーツで似たのがあると引っ張られる感じがします。

総合評価

個人的にはうーん…っていう感じでした。
ただ、今後いろんなプロダクトを作っていくとどこかで確実に使うことになりそうなので多少の勉強はしておいたほうが良い気がします。

まぁ今後、趣味で作ったプロダクトのサイトには導入しません。

あと、Fontawesomeとマッチしすぎてやばいw

おわりに

2・3時間で完成させるつもりが、色々ハマってしまって結局まる1日かかりました。
家での自粛期間ももうそろそろ終わりそうなので、この間にできること・やりたいことをじゃんじゃんやりたいです。

記事をシェアする
記事を書いた人ねこづきあゆむ
Webエンジニア。Misskeyサーバー「みすほわいと」の管理人。
このブログでは、適当に日々の思いつきを書き連ねています。