【 WEBデザイン】 jQueryの基礎と、よく使う機能を簡単実装　FirE♯540

S.A.P.Studio

2022年9月29日 20:39

jQueryはオワコンだと言われて久しいですが、やはりまだ普通に使ってるじゃないかということで、よく使う機能をまとめました。

【 jQuery 】

JavaScriptのライブラリのひとつ。
HTML、CSSの知識があれば、わかりやすい記法で書くことができ、CSS実装できない動きを実装可能。

■ jQueryの導入

CDNで読み込むの簡単です。
CDNとは、ネットからファイルを読み込む方法です。

■Google CDN

こちらで、jQueryを選択してCDNをコピペして使用することができます。

jQueryのオフィシャルサイトからも取得できます。

■　プラグイン

jQueryには、多くのプラグインが存在します。

オープンソースで公開されており、無料で自由に使うことができます。

その際に注意が必要なのは、jQueryのバージョンです。

プラグインの環境が旧バージョンのみ対応しているものもありますので、

うまく動かない場合は、バージョンを確認してましょう。

■ jQueryの記法

例：<p>タグのテキストを赤に変える

このような処理を書いてみましょう。

▶︎ 一般的な記法

<script>

　　　　　$(function(){

　　　　　　　　　　$("p").css({"color","red"});

　　　　　　});

</script>

▶ CSSライクな記法

<script>

  $(function(){

     $("p").css({

           "color":"red"

       });
    });

</script>

【 jQuery実装するよく使う機能】

jQuery実装で簡単に実装できる機能のコードをまとめます。

■ アコーディオンメニュ

クリックすると、リストが降りてくる動きを実装します。

HTML & JS

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>アコーディオンメニュー</title>
  <link rel="stylesheet" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>



</head>

<body>
  <div class="wrapper">
    <h1>アコーディオンメニュー</h1>
    <h2 class="accordion">> jsを利用したアコーディオンメニュー</h2>
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
    </ul>
    <h2 class="accordion">> jsを利用したアコーディオンメニュー</h2>
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
    </ul>
    <h2 class="accordion">> jsを利用したアコーディオンメニュー</h2>
    <ul>
      <li><a href="#">menu1</a></li>
      <li><a href="#">menu2</a></li>
      <li><a href="#">menu3</a></li>
      <li><a href="#">menu4</a></li>
      <li><a href="#">menu5</a></li>
    </ul>
  </div>


  <script>
    $(function() {
      $(".accordion+ul").hide();

      $(".accordion").click(function() {
        $(this).next().slideToggle();

      });
    });
  </script>

</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

h2 {
  padding: 0.5em 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  font-size: 24px;
}

.accordion+ul li {
  list-style-type: none;
  border-bottom: 1px solid #ccc;
}

.accordion+ul li a {
  display: block;
  padding: 0.5em 0 0.5em 1em;
  color: #333;
  text-decoration: none;
  transition: 0.5s;
}

.accordion+ul li a:hover {
  background-color: dodgerblue;
  color: #fff;

}

■スクロールイベント

スクロール値に応じて、ボタンの表示非表示を切り替えます。

JSを別フォルダに格納するパターンです。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>スクロールイベント</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div class="wrapper">
    <h1>スクロールイベント</h1>
  </div>
  <div class="pagetop_btn"><a href="#">↑</a></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <script src="scroll.js"></script>

</body>

</html>l

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: deepskyblue;
}

.wrapper {
  width: 80%;
  height: 2000px;
  background-color: #fff;
  margin: 0 auto;
}

h1 {
  margin: 1em 0;
}

.pagetop_btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

.pagetop_btn a {
  display: block;
  width: 50px;
  background-color: #fff;
  border-radius: 3px;
  color: deepskyblue;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
}

var topBtn=$(".pagetop_btn");

topBtn.hide();

$(window).scroll(function(){
  if($(this).scrollTop() > 100){
     topBtn.fadeIn();
}else{
     topBtn.fadeOut();

  };

});

■ スライダー bxslider

bxsliderを使ってスライダーを実装します。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>スライダー[bxslider]</title>
  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" href="jquery.bxslider.css">

</head>

<body>
  <div class="wrapper">
    <h1>スライダー[bxslider]</h1>

    <ul class="bxslider">
      <li><img src="img/slider01.jpg"></li>
      <li><img src="img/slider02.jpg"></li>
      <li><img src="img/slider03.jpg"></li>
    </ul>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js" integrity="sha512-p55Bpm5gf7tvTsmkwyszUe4oVMwxJMoff7Jq3J/oHaBk+tNQvDKNz9/gLxn9vyCjgd6SAoqLnL13fnuZzCYAUA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>
    $(".bxslider").bxSlider({

      auto: true,
      pause: 4000,

    });
  </script>
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: deepskyblue;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

h1 {
  margin: 1em 0;
}

■モーダルウィンドウ　lightbox

lightbox2を使ってモーダルウィンドウを実装します。

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>モーダルウィンドウ[Lightbox2 ][bxslider]</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <div class="wrapper">
    <h1>モーダルウィンドウ[Lightbox2 ]</h1>
    <p><a href="images/photo01.jpg" data-lightbox="groupname" data-title="Mycaption"><img src="images/photo01_thumb.jpg" alt=""></a>

    </p>
    <ul>
      <li>
        <a href="images/photo02.jpg" data-lightbox="groupname" data-title="画像2">
          <img src="images/photo02_thumb.jpg" alt="">
        </a>
      </li>

      <li>
        <a href="images/photo03.jpg" data-lightbox="groupname" data-title="画像3">
          <img src="images/photo03_thumb.jpg" alt="">
        </a>
      </li>

      <li>
        <a href="images/photo04.jpg" data-lightbox="groupname" data-title="画像4">
          <img src="images/photo04_thumb.jpg" alt="">
        </a>
      </li>
    </ul>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

h1 {
  margin: 1em 0;
}

ul li {
  list-style-type: none;
  display: inline-block;
}

【まとめ】

今回は、備忘録的にコードをまとめました。

最も基本的な形なので、カスタマイズして使いまわしましょう。

この記事が気に入ったらサポートをしてみませんか？

【 WEBデザイン 】 jQueryの基礎と、よく使う機能を簡単実装 FirE♯540

【 jQuery 】

■ jQueryの導入

■Google CDN

■ プラグイン

■ jQueryの記法

【 jQuery実装するよく使う機能 】

■ アコーディオンメニュ

■スクロールイベント

■ スライダー bxslider

■モーダルウィンドウ lightbox

【 まとめ 】

【 WEBデザイン】 jQueryの基礎と、よく使う機能を簡単実装　FirE♯540

■　プラグイン

【 jQuery実装するよく使う機能】

■モーダルウィンドウ　lightbox

【まとめ】