★前回の記事
はじめに、bootstrapとjQuery, jQuery-UIのライブラリを読み込んでおきましょう。 ひな形をbootstrapのページからコピーします。前回までの内容は一旦全て削除します。
Introduction · Bootstrap のページ内のStarter Templeteをコピーします。
index.html
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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>
jQueryのライブラリとbootstrapのライブラリが読み込めました。
表示はこのようになりました。
jQuery-UIも読み込んでおきましょう。バージョンは2019年8月時点での安定版の1.12.1にしています。ここで1つ注意点があります。boostrapで読み込んでいるのは、jquery-3.3.1.slim.min.js
です。slim
と付いているのは、jQueryのコアな機能のみを提供しているためです。jQuery-UIを使用するには、slim
の機能だけでは足りないので、jQueryの全ての機能が入ったjquery-3.3.1.min.js
を使用するように変更します。
<!-- 前略 --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <! -- 変更 --> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 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> <! -- 追加 --> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> </body> </html>
最後に、lang="en"
の部分を直しましょう。lang="en"
は、"このページは英語で書かれている"という意味なので、日本語を表すlang="ja"
に変更します。また、タイトルも"KATAMINO SOLVER"に変更しておきましょう。
<!doctype html> <html lang="ja"><! -- 変更 --> <head> <!-- 中略 --> <title>KATAMINO SOLVER</title> </head> <!-- 以下略 -->
画面とデベロッパーコンソールを表示して、エラーが出ていないことを確認します。
以上でbootstrapとjQuery, jQuery-UIの設定をしたhtmlファイルの準備が整いました。
★次回の記事
★目次