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

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

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

JQueryなどで気になったサイト

JQuery、webpack5、npmで気になったサイト

【bootstrap5】
https://bootstrap-guide.com/layout/grid

【JavaScriptのswitch】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/switch

【JavaScriptのthis】
https://www.webopixel.net/javascript/901.html

【JQueryのeachメソッド】
https://itsakura.com/jquery-each

【webpack5】
https://www.webdesignleaves.com/pr/css/sass_webpack.html

【node,npmでのバージョン確認】
https://dackdive.hateblo.jp/entry/2016/10/10/095800

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

bootstrapのリンク

bootstrapでリンクを作るとき、リンク範囲を広げたいときがある。そんな時は、下記をリンク先を参照すること。

https://bootstrap-guide.com/utilities/stretched-link

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

font awesomeで疑似要素だと表示されない

bootstrap4.1で、昨日までのエラー処理。
一つは、navbarの文字色の件で、
<ul class=”nav”>が間違いで、正解は<ul class=”navbar-nav”>だった。

もう一つ、navbarの挙動がページによって違う件で、
jquery-3.3.1.slim.min.jsとpopper.min.jsとbootstrap.min.jsがページによって正しく指定されていなかった。

bootstrap4.1で、今日嵌まったところ。
font awesomeで疑似要素だと表示されない件。
fa-chevron-rightだと表示されるのに、fa-twitterだと表示されなかった。


fa-chevron-rightでは、
.site::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
}
で
  font-family: "Font Awesome 5 Free";
を書き、
fa-twitterでは、
.site::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f105";
  font-weight: 400;
}
で
  font-family: "Font Awesome 5 Brands";
と書かなければならなかった。

【参考サイト】
https://niwaka-web.com/fontawsome5_css/

font-weightばかり気をとられ嵌まったな。

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

ul,liでbootstrapのwebアイコンを利用する方法

ul,liでbootstrapのwebアイコンを利用するときは、下記リンクを参照のこと

【参考サイト】
https://h2ham.net/font-awasome/

下記のように使う


 <ul class="fa-ul">
  <li><i class="fa fa-chevron-circle-right fa-li"></i>あああ</li>
 </ul>