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.jsは、JavaScriptライブラリのデファクトスタンダードと呼ばれるくらい、有名なJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。
Popper
マウスを載せた際などに表示されるツールチップのような吹き出しのパーツを
簡単に作れるJavaScriptのライブラリです。
JSファイルを呼び出す
JSファイルが用意できたらHTMLでファイルを読みこんでいきましょう。
JSの読み込みは<body>要素内で行います。
HTML記載例
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- ダウンロードしたファイルを以下のように読み込む --> <link rel="stylesheet" href="./css/bootstrap.min.css"/> </head> <body> <script src="./js/jquery-3.3.1.min.js"></script> <script src="./js/popper.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html> |
JSファイルもCDNが利用できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <!-- ダウンロードしたファイルを以下のように読み込む --> <link rel="stylesheet" href="./css/bootstrap.min.css"/> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> |
今回は必要なJSライブラリの準備方法を紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに!