【J3サイト一覧】
http://toushin.konjiki.jp/
旧
- bootstrap 4.6.0
- jquery 3.5.1
- popper 1.16.1
- webpack 5.2.2
main.jsとsub.jsに別れていた。main.js 622kbで重い。
新
- bootstrap 5.1.3
- jquery 3.6.1
- popper@core 2.10.2
- webpack 5.6.0
main.jsに一本化。main.jsを軽くする。
- ヘッダー、activeの書く位置が移動。
- ハンバーガーメニューが開かない、動かない。
- デフォルトのフォントが変化。
- テーブルのth,tdの境界線の色が変化。
- リンクにアンダーバーが付いた。
これらを旧タイプのデザインに近づける。
main.jsとstyle.cssの分離する作業をする。
旧main.jsでの点数。622kb。
新main.jsでの点数。448kb。
新main.jsとstyle.cssに分離する。167kb、93kb。
jsとcssを分離したら、点数が悪くなったけど、やりたかった作業なので、そのままにした。
【webpack5の参考サイト】
https://yumegori.com/webpack5-setting-method
【npm install後のパッケージ確認】
https://dackdive.hateblo.jp/entry/2016/10/10/095800
【javascriptのimport】
https://qiita.com/TakamiChie/items/4d92c7e80a9d4cce0178
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
【フォントの設定方法】
https://willcloud.jp/knowhow/font-family/
【bootstrap5の最低限取り入れ】
https://qiita.com/shouchida/items/2c3fc4586de66a067dfd
https://bootstrap-guide.com/customize/sass
【bootstrap5のナブバー、ナブトグル】
https://bttb.jp/bootstrap5/index.php?strkey=navbar%20navbar-expand-lg%20navbar-dark%20bg-dark
【aria-current=”page”の意味】
https://temari.co.jp/blog/2021/07/12/aria-current-2/
次回はクリックカウンターを付けたい。google apps scriptでなんとかなりそう。