WEBデザインにおけるJQueryの使い方をわかりやすく解説します。

動きのあるwebサイトを作ってみたいです。

こんな悩みを解決していきますね。

今日は右上のアイコンをクリックした時にサイドメニューを表示させるように作りたいと思う。今回は新たにJQueryを用いてコーディングするんじゃ。

JQueryはたしかjavascriptの簡易版(ライブラリ)で、動きのあるページを作る時に使う言語だワンね。

そのとおり!　まずはサイドメニューを作っていこう。

1. サイドメニューを表示させよう。
2. まとめ
3. 合わせて読みたい記事はこちら

サイドメニューを表示させよう。

以下のコードを.containerクラスの直下に追加してください。

<html>

<main>
         <div class="container">
            <div class="main__changemenu">
                <div class="main__changemenu-sidemenu">
                    <span>×</span>
                    <ul>
                        <li>
                            <a href="#">TOP</a>
                        </li>
                        <li>
                            <a href="#">ABOUT</a>
                        </li>
                        <li>
                            <a href="#">BUSINESS</a>
                        </li>
                        <li>
                            <a href="#">CONTACT</a>
                        </li>
                    </ul>
                </div>
            </div>
         </div>
</main>

<SCSS>

/* ここからサイドメニュー追加用CSS　*/
           .main__changemenu {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            right: 0;
            height: 100%;
            background-color: white;
            z-index: 1000;
            text-align: center;
            width: 30%;
        }       
        
           .main__changemenu-sidemenu {
            padding: 0;
            span {
                cursor: pointer;
                color: black;
                font-size: 50px;
            }
            li {
                padding: 30px 0;
                font-size: 40px;
                text-shadow: 1px 1px 1px black, 1px 1px 1px black, 1px 1px 1px black, 1px 1px 1px black;
            }
            a {
                text-decoration: none;
                color: black;
        }

サイドメニューをposition: fixedで固定させて、widthで幅の調整をしておるの。

display:noneを用いて表示を消そう!

このままだとずっと表示されたままだね。

そうじゃの。なので一旦CSSを用いてサイドメニューを消すんじゃ。消すプロパティは何だったか覚えているかの?

それはdisplay: none;ゴリね!

その通り。CSSに追加してみよう。

以下のCSSを追加してください。

.main__changemenu {
            display: none;
        }

これで表示が消えましたね! JQueryではこの表示のon/offを用いて動きをつけていきたいと思います。

JQueryを実装しよう!

JQueryはHTML/CSSよりプログラミング的思考が要求されるんじゃ。書き出す前にひとつひとつ順序を確認していこう。

以下の流れになります。

①アイコンをクリック

②サイドメニューが開く

➂時間差でメニューが現れるようにする

④”閉じる” ボタンを押すとサイドメニューが閉じる

実際に見ていきましょう。

<JQuery>

$(function() {

    $(".fa-bars").click(function() {・・・・・➀
        //　メニューバーを押したら処理開始//
        $(".main__changemenu").fadeIn(1000);・・・・・➁

        $(".main__changemenu ul li").hide();・・・・・➂
        // 繰り返し処理
        $(".main__changemenu ul li").each(function(i) {・・・・・➂

            // 遅延させてフェードイン
            $(this).delay(500 * i).fadeIn(1000);・・・・・➂

        });

    });
    $(".main__changemenu-sidemenu span").click(function() {・・・・・➃
        $(".main__changemenu").fadeOut(1000);・・・・・➃

    });



});

それぞれ対応している順番の番号を記載しました。　順番に見ていきましょう。

クリックイベントとは?　JQuery編

まずは基本の型から学んでいきましょう。この中にイベントなどを実装していきます。

$(function() {

    //ここにイベントを入力//
   



});

基本の型はこれだけじゃ。これは暗記しておこう。

続いてクリックイベントを実装していきます。

$(function() {

    $(".fa-bars").click(function() {・・・・・➀
    
             //この中にクリック後の処理を書く//
        $(".main__changemenu").fadeIn(1000);・・・・・➁

        $(".main__changemenu ul li").hide();・・・・・➂
        });

    });
   



});

クリックイベントは$(“.クラス名　または　#ID名”).click(function(){・・・});と続きます。この構文は暗記しましょう。

意味は.fa-barsクラスをクリックしたら~って事ですね。

クリック後の処理は、.main__changemenuクラスをfadeIn(フェードイン)させるワンね。

fadeInは徐々に表示させる効果がある。今回は数値で“1000”を指定しているから1秒かけて行うんじゃ。1000＝1秒と覚えておこう。
逆の処理はfadeOutで徐々に消えゆく効果がある。このように処理を命令させる構文はメソッドと呼ばれるんじゃ。これも覚えておこう。

.main__changemenu ul li をhideということは、ulとliに書かれている文を隠す意味ゴリね。

その通り。この後 “➂”の処理を行う為に一旦文字だけを隠す必要があるんじゃ。

繰り返しイベントとは?

 $(".main__changemenu ul li").each(function(i) {・・・・・➂

            // 遅延させてフェードイン
            $(this).delay(500 * i).fadeIn(1000);・・・・・➂

        });

繰り返しイベントは$(“.クラス名　または　#ID名”).each(function(i){・・・

});と続きます。この構文は暗記しましょう。

基本的に$(this)のthisはクリックした要素に特定の命令を行わせたい場合に用いるんじゃ。今回のように繰り返し処理と一緒に用いると個別に命令させることができる。

最後に×ボタンを押したらサイドメニューが閉じるように実装しましょう。

 $(".main__changemenu-sidemenu span").click(function() {・・・・・➃
        $(".main__changemenu").fadeOut(1000);・・・・・➃

まとめ

いかがでしたでしょうか。これでようやくサイトは完成です。続いてスマートフォン対応をするためにレスポンシブデザインについて学んでいきましょう!。

合わせて読みたい記事はこちら

Prev→→→【WEBデザイン】未経験向けに徹底解説!デザインの良いサイトの作り方➃

Next→→→【WEBデザイン】未経験向けに徹底解説!レスポンシブ対応実践編⑥

前の記事

レスポンシブWEBデザインとは?サンプルも交えてわかりやすく解説 2020.06.24
次の記事

フレックスボックス(flexbox)とは?【すぐ分かる】 2020.06.27