技術者ブログ – Bootstrapの利用 JS準備編


Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /export/sd215/www/jp/r/e/gmoserver/2/9/sd0971329/dandelions.co.jp/blog/wordpress-4.9.8-ja-jetpack_webfont-undernavicontrol/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
第9回はレスポンシブデザインをテーマにしている第0ユニットです。

前回第0ユニットでは、 Bootstrapを利用するための方法 としてCSSファイルを準備しました。 今回はJSファイルを用意していきます。

用意するファイル

用意するJSファイルは3つです。
bootstrap.js
jquery.js
popper.js

Bootstrap


bootstrap.jsは前回紹介した BootstrapのJSライブラリファイルです。
こちらも公式サイトからDLできまます。

jQuery

jQuery公式ページ

jquery.jsは、JavaScriptライブラリのデファクトスタンダードと呼ばれるくらい、有名なJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。

Popper

Popper.js公式ページ

マウスを載せた際などに表示されるツールチップのような吹き出しのパーツを
簡単に作れるJavaScriptのライブラリです。

JSファイルを呼び出す

JSファイルが用意できたらHTMLでファイルを読みこんでいきましょう。
JSの読み込みは<body>要素内で行います。

HTML記載例

JSファイルもCDNが利用できます。

今回は必要なJSライブラリの準備方法を紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに!