カテゴリー
ホームページ製作

J3サイトの修正作業まとめ

【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でなんとかなりそう。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です