Bootstrapを使ってみた
ねこづきあゆむです。今日はBootstrapを使って「ニコニ広告ex.」のサイトをリニューアルしました。
Bootstarapとは？
Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワーク
https://techacademy.jp/magazine/6270
簡単に言うと、CSSファイルの集合体（たぶんちがう）です。htmlファイルでクラス指定するだけで、Bootstrapのスタイルできれいな感じにしてくれます。
例えば…
index.html123<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とマッチしすぎてやばいｗ
おわりに２・３時間で完成させるつもりが、色々ハマってしまって結局まる1日かかりました。家での自粛期間ももうそろそろ終わりそうなので、この間にできること・やりたいことをじゃんじゃんやりたいです。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});