0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTMLにjQueryUIの動作環境を作る

Posted at

手順

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/

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?