手順
1 VSCodeにHTMLの雛形を作成
VSCodeを起動して、Emmet記法を利用して、! + EnterでHTMLの雛形を作る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2 jQueryの公式サイトよりCDNを記述
jQueryの公式サイトを参照する。
Download-Using jQuery with a CDNから、To see all available files and versions, visit https://code.jquery.comのリンクを参照する。使いたいjQueryのバージョンを指定して、CDNをコピーしてHTMLに貼り付ける。(テストで使う分には、最新のバージョンのuncompressedを選択でOK)
コピーしたCDNをHTMLのbodyの直下の部分に貼り付ける。bodyの直下に書くのが今のトレンド。
上記と同じサイトに、jQueryUIのリンクも同じようにコピーして、HTMLのbodyの直下に貼り付ける。
jquery-3.5.1.jsが、jQuery本体で、jquery-ui.jsがjQueryUIとなる。
<body>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
</body>
3 jQueryUIのCSSファイルのリンク先を記述
上記のjQueryのCDNのリンクサイト内に、jQueryのThemes(テーマ)があるので、好きなテーマを選んで、CSSのリンクをHTMLにコピペする。コピーする方法は、JSファイルのように、CDNのリンク先がコピーできるようになっていないため、Themesのリンクを右クリックして、リンクのアドレスをコピーとしてから、HTMLファイルに貼り付けるといった手順になる。(詳細はここに詳しい http://vdeep.net/jquery-jqueryui-cdn)
ヘッダに書くか、ボディに書くかは迷うところだが、body部の、jsファイルのCDNを記述している行の上でOK。
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="コピペする部分"> # サンプル
</body>
4 スクリプトを書く
スクリプトを書く場合は、必ず、CDNを組み込んだ部分の下に書くこと。
<body>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
// ひと昔は全てこの内部に書いていた
// readyはHTML全体が読み込まれた後に実行するメソッド
$(document).ready(function(){
});
//今の書き方
$(function(){
});
</script>
</body>
jQueryUIとは
jQueryUIとは、jQueryのUI(ユーザーインターフェース)系ライブラリのプラグインの事。色々なthemes(テーマ)が用意されている。テーマとはデザインの事で、テーマを差し替えるだけで、デザインの印象を変える事ができる。jQueryUIを導入するには、jquery-ui.jsとjquery-ui.cssの2つのファイルが必要になる。cssファイルがテーマファイルになる。
どのテーマがどのようなデザインになっているかを調べるサイト
https://javascript.programmer-reference.com/jqueryui-theme/