T03：JavaScript

公開日:2021年11月09日

講座情報

テンプレート作成

JavaScriptファイルを読み込む

tmp_base.html

<body>
   :
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/googlefonts.js"></script>
</body>

ページ内リンクをスムーススクロールさせる

js/common.js

window.addEventListener('load', function () {
  jQuery(function ($) {
    /*
    スムーススクロール
    */
    $('a[href^="#"]').click(function () {
      /* 固定ヘッダの高さ */
      var fixed_header = 0;
      /* スピード */
      var speed = 500;
      var href = $(this).attr("href");
      var target = $(href == "#" || href == "#top" || href == "" ? 'html' : href);
      var position = target.offset().top - fixed_header;
      $("html, body").animate({
        scrollTop: position
      }, speed, "swing");
      return false;
    });
  });
});

GoogleFontsを読み込む

js/googlefonts.js

// GoogleFonts 読み込み
window.WebFontConfig = {
  google: {
    families: [
      'Raleway',
      'Noto Serif JP',
      'M PLUS Rounded 1c',
      'Sriracha',
    ]
  },
  active: function () {
    sessionStorage.fonts = true;
  }
};

(function () {
  var wf = document.createElement('script');
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();

css/_common.css

/* Webフォントによるちらつきをなくす */
html {
  visibility: hidden;
}
html.wf-active {
  visibility: visible;
}

/* 基本デザイン */
     :

WebFontsを利用したメインタイトルデザイン

tmp_base.html

<div class="Box_header">
  <div class="Box_inner">
    <h1 class="Box_mainTitle">メインタイトル</h1>
  </div>
</div>

css/_Box.css

/* Box */
.Box_header {
    :
}

.Box_mainTitle {
  font-family:
    "Noto Serif JP",
    "Times New Roman",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif;
  font-size: 2.5em;
  font-weight: 700;
  text-align: center;
}

.Box_body {
    :
}