web制作のしおり

日々の学習をアウトプットします。

31.Sassの便利な書き方を知る ~変数、関数~

昨日は

  • SassがCSSの拡張言語であること
  • CSS入れ子構造でかけること(HTMLの親子関係に似ている)
  • 疑似要素も入れ子でかけること

を学びました。

 

本日は変数、関数について学習していきます。

 

CSSなのに変数?

Sassでは変数が使えます。

先に具体例を書くと

 

$font-bigger : 32px;

 

.test{

font-size : $font-bigger;

}

 

では1つずつ見ていきます。

 

まず変数について

変数は$マークを付けて宣言します。

「なぜ$マークを付けるか」を噛み砕いて言うなら、

$がついていたら、この後の文字列は変数名ですよとお知らせするということです。

この例での変数の宣言は下記のとおりです。

$font-bigger

これは、「font-bigger」という名前の変数を使いますよ。という意味です。

 

そして変数名の後にコロンで区切り、変数に代入する値を記述します。

先程の例では下記の部分です。

: 32px;

 

$font-bigger : 32px;

まとめ確認すると、

「font-bigger」という名前の変数に「32px」という値を代入して、これから使いますよ。

という意味ですね。

 

そして変数の値を使用するには、

CSSでいう「バリュー」の部分に変数名をそのまま記載します。

font-size : $font-bigger;

 

上記はfont-sizeプロパティのバリューとして、変数font-biggerを使用しています。

 

$font-biggerには32pxが代入されているので、

SassからCSSを書き出すと

 

font-size : 32px;

 

になります。

 

ここまでをまとめると、

  • 変数は$マークをつけて宣言する
  • 変数に値を代入する時は=ではなく:コロンで区切る
  • 変数の値を使用するには、バリューの部分に$を付けて変数名をかく。

 

変数は特に難しいことはなさそうですね。

 

関数を使うには?

変数が使えるのはわかった。関数はどうやって使うの?

関数を使うには関数名と処理を先に記述します。

 

まずは関数の書き方を確認します。

@function メソッド名($引数名)

{

   処理内容

          @return 返り値

}

こんな形で書かれます。

関数を書く場合の注意点は

  • 頭に@functionをつけること
  • 引数名の頭にも変数と同様に$マークをつけること
  • 返り値の頭に@returnをつけること

ですね。

 

では具体例で定義方法と使用の仕方を見ていきましょう

@function halfSize($value){

 @return $value / 2;

};

 

.test{

font-size : halfSize(32px);

}

 

では1つずつ見ていきましょう

@function halfSize($value){ }

この部分は、

関数名がhalfSizeで、引数の変数名が$valueの関数を使うよという意味ですね。

そして{ }この間に書かれた

 

@return $value / 2;

これは $value変数 の値を 2で割った値 を返り値とするよ

という意味です。

因みに、変数に対して四則演算ができるので、軽く紹介しておきます。

足し算は「+」、引き算は「-」、掛け算は「*」、割り算は「/」の記号を使います。

 

まとめると、

halfSizeという名前で、引数$valueに代入された値を、2で割って返すという処理をもつ関数が定義された。

ということですね。

 

では使い方を見ていきましょう。

 

font-size : halfSize(32px);

 

ここで、引数が32px?それって計算できるの?と思ったそこのあなた。

私も同じでした。

そう、pxという単位が付属しているのに、

引数に代入して計算できるのか?

それが・・・できるのです。

それは「単位付きの数値も数値(number型)として扱う」というSassのデータ型のおかげです。

 

ただし、異なる単位での計算はできないので注意です。

 

色々テストした結果、下記の組み合わせは可能なようです。

 

同一単位の計算

例: 10px +2px、30px / 2px

 

片方に単位の記載が無い計算

例: 15px + 12、45px *3

などです。

 

15px  * 2%は計算不可です。

 

また、単位なし同士の計算は可能ですが、

返り値の使用先で単位指定が必要な場合には

エラーになるのでどちらかに単位を指定する必要があります。

 

これらを踏まえて関数を作る時には、

 

関数内部は単位なしの数値を使って処理を記述し、

引数には単位ありの数値を代入して使用する

 

こういうやり方が汎用性が高そうですね。

 

今日のまとめ

  • 変数は$変数名で宣言、:と値を書いて代入。使う時は$変数名
  • 関数は@functionと@return、引数に$変数名を使って記述
  • 関数内部の処理の数値には単位を付けない方が汎用性が高そう

 

今日はSassの変数と関数について学習しました。

 

明日も楽しみです。

 

では、また。

30.Sassって何だ? ~イカしたスタイルシート、CSSの上位互換~

本日からSassの学習に入っていきます。

どうやら楽しそうな内容です。

まず、Sassとは何なのでしょうか?

 

Sassとは

お決まりの略語説明から入っていきます。

Sassとは「Syntactically Awesome Style Sheets」の頭文字です。

構造的にイカしたスタイルシートという事らしいです。

スタイルシートといえば、CSS。もちろんSassと大いに関連があります。

 

Sassを使う目的は一言で言うとCSSをより楽に書くため」です。

Sassで書いた内容が、最終的にCSSとして出力される。そんなイメージです。

Sassはscssファイルとして保存され、実際のページで使用する際はcssを出力(コンパイル)して使う必要があります。

 

SassにはCSSではなかった変数やメソッドが存在します。

色々な処理や書き方が追加されたCSSくらいの捉え方で良いと思います。

(拡張言語というそうです。)

なにやら便利そうな匂いがしてきますね。

早速やっていきましょう。

 

入れ子で書く

HTMLの親子関係覚えていますか?

確認の為に1つ例を出しておきます。

<div>

     <p></p>

</div>

このような形でdiv要素で囲まれたp要素。

この場合、divが親で、pが子です。

 

CSSは通常入れ子構造を取ることはできません。

例えば、testクラスの中のp要素やa要素を指定する場合は

 

.test p{

スタイル内容1

}

.test a{

スタイル内容2

}

のようにセレクタ部分で該当要素を指定する必要がありました。

 

しかしSassであれば、

 

.test{

     p{スタイル内容1}

     a(スタイル内容2)

}

 

このように書くことができます。

あくまでSassファイル(拡張子.scssファイル)の記述内容です。

このSassファイルをCSSファイルに変換すると

最初の例で出した通り、

.test p{

スタイル内容1

}

.test a{

スタイル内容2

}

このように記述されて、ファイル出力されるわけです。

結果物が同じでも、かかる時間はSassの方が少ないですよね。

あと、見やすさや手直しのしやすさもSassの方が良いと思います。

 

疑似要素も入れ子で書ける

個人的にはこれ、わかりやすくていいなと思いました。

それが疑似要素を子要素のように記述できるです。

疑似要素とは:hoverとか::afterとかですね。

 

今回はaタグを例に出して比較確認します。

通常のCSSでは

a{

スタイル内容1

}

 

a:hover{

aにマウスが乗った時のスタイル内容

}

 

とわざわざ分けて記述する必要がありました。

これがSassであれば

 

a{

 スタイル内容1

 &:hover{

  aにマウスが乗った時のスタイル内容

 }

}

 

このように、&を使って疑似要素:hoverを入れ子構造のように書くことができます。

 

floatを解除する為の記述もこれを使えば

 

&::after{

content : "";

clear : both;

display : block;

}

 

上記の塊をクラスの中に入れることで実現できます。

 

そして思いませんか…?

こうした塊が1行で書けたら、もっと便利じゃないか…

その機能あります。

 

それはまた次回ということで。

 

今日のまとめ

  • SassはCSSの拡張言語、CSSを便利に楽に早く書ける。
  • セレクタ入れ子で記述できる
  • 疑似要素の指定も入れ子でかけるので、見やすくわかりやすい。

 

今日は新しくSassについて学習しました。

これは面白くなってきましたね。

ただ、毎度新しいこと学ぶ度に思いますが、

つまるところHTMLとCSSの操作なんだなと。

やはり基礎が大切と言う事ですね。

 

では、また。

29.jQuery実践課題④ ~モーダルで画像拡大表示-2~

jQueryで動きをつける

こちらもまずはコードを

 

  $(function(){

  const modal = $("#js-modal");
  const overlay = $("#js-overlay");
  const overImg =$('#open-img');
  const miniImg =$('.js-open');

 

  miniImg.click(function(){
     const index = miniImg.index(this);
     overImg.attr('src',$(miniImg[index]).attr('src'));
     modal.fadeIn('slow');
     overlay.fadeIn('slow');
     return false;
 });

 

 $(window).click(function () {
         modal.fadeOut('slow');
         overlay.fadeOut('slow');
         return false;
       });

 

今回はほぼゼロから自分で書きました。まとめてみると何がなんだかという感じですが、やっていることはカンタンです。

いつも通り、ひとつずつ見ていきましょう。

 

 

miniImg.clickの処理

まずは、変数を定義して要素を取得していきます。

  const modal = $("#js-modal");
  const overlay = $("#js-overlay");
  const overImg =$('#open-img');
  const miniImg =$('.js-open');

 

最後の「miniImg」のみ、クラス名で要素を取得しているので、配列になっている事に注意してください。

 

 

  miniImg.click(function(){

///処理///
 });

 

miniImgのクリックを監視して、クリックされたら、処理を実行します。

miniImgは先ほどのクラス名「.js-open」で取得した要素達ですので、

その要素のいずれかがクリックされた場合に処理を実行します。

 

 

const index = $(miniImg).index(this);

.index(this);のthisはクリックされた要素を指定しています。

 

そして、.index()メソッドは引数に指定した要素が

配列の何番目なのかを数値で返してくれます。

 

つまり、この部分のコードは「.js-open」クラス名で取得した配列の中で、クリックされた要素が何番目なのかという数値をindex変数に代入する。

という事を行っています。

 

 


overImg.attr('src',$(miniImg[index]).attr('src'));

ここが今回の山場ですね。

まず、.attr(引数1、引数2)メソッドは、引数1に設定したい属性名、引数2に引数1で指定した属性に設定したい値を代入します。

ここでは、

引数1に「src」、引数2に「$(miniImg[index]).attr('src')」を指定しています。

 

$(miniImg[index]).attr('src')

ここでは、miniImg配列の要素をインデックスで指定して、.attr()メソッドでその要素の指定した属性(ここではsrc)を取得します。

間接的にクリックされた画像のsrcという事になります。

 

overImgは拡大表示するImg要素を代入しています。

そのsrc属性にクリックされた画像のsrcを設定する。

こうすることで、拡大表示される部分にクリックされた画像と同じファイルが指定されることになります。

設定はされていますが、まだ非表示なので表示されません。

 

 

modal.fadeIn('slow');
overlay.fadeIn('slow');

fadeIn()メソッドは前回も使いましたね。display:noneの要素を徐々に表示させるメソッドです。

ここまでの処理で準備の整った要素を表示させるわけです。

 

$(window).clickの処理

残りのコードについても見ていきましょう。

 $(window).click(function () {
         modal.fadeOut('slow');
         overlay.fadeOut('slow');
         return false;
       });

 

$(window).click(function () {});

これは、ウィンドウのクリックを監視して、

クリックされたら引数に設定されたメソッドを実行します。

 

modal.fadeOut('slow');
overlay.fadeOut('slow');

fadeInの反対で、displayプロパティがnone以外の要素を徐々に非表示にするメソッドですね。

 

全体を改めて確認

拡大表示する処理

まず、変数に各要素を取得します。

拡大表示する処理

画像クリックを監視。クリックされたら、その画像のsrc属性を、「拡大表示するimg要素のsrc属性に設定」します。この段階ではまだdisplay:noneなので表示されません。

そして、設定が終わったら背景用のボックス要素とimg要素をfadeIn()メソッドで表示します。

 

画面をクリックするとモーダルを閉じる処理

ウィンドウのクリックを監視。クリックされたときに背景用のボックス要素とimg要素が表示されていたらfadeOut()メソッドで非表示にする。

 

2記事に渡って長々とHTMLとCSSjQueryと書いてきましたがやっていることはこれだけですね。

 

今日のまとめ

  • クラス指定で拡大表示するimg要素を配列で取得できる
  • クリックされたimg要素が配列の何番目かを知るにはthisを使う
  • srcを差し替えることで、拡大表示用の要素は1つで済む
  • どこでもいいのでクリックされたらという処理は$(window).clickで実現可能

 

やりたかったクラス指定で処理することができました。これで後から画像が追加になっても、削除になってもid指定とは違い柔軟に対応できると思います。

 

とはいえ、こうしたよく使う機能は「プラグイン」?があるそうなので自分で0から書くこと自体はないと思います。

今回の課題で少し実力がついているなと実感できました。

 

では、また。

28.jQuery実践課題③ ~モーダルで画像拡大表示-1~

昨日に引き続きjQueryの実践課題③と言うことで、

 

モーダルで画像拡大表示

 

をやっていきたいと思います。

プラグイン?は使用禁止だそうなので、jQuery単品での実装です。

 

実装の条件

  • 画像をクリックすると
  • 縦横画面いっぱいに薄いグレーの背景ボックスを表示
  • その枠の中心に拡大された画像を表示
  • 画面のどこかをクリックすると拡大写真と背景ボックスを非表示
  • アニメーションはフェードイン・フェードアウト

 

やり方を調べていると、なんだか難しいことをしている記事が多い…。

もっと楽にできるのでは?

と思い、先人の知恵を参考にしつつも自分で書きました。

 

やりたいことを書きだす。

まずは、自分がやりたいことを書き出します。

画像表示用のボックスは1つ、その中にクリックされた画像を切り替えて表示する。

画像は追加・削除に対応しやすいようにidで判別しないで、クラス指定にする。

後は、実装条件を満たします。

 

 

まずはHTMLから


            <div class="course-item">
                <img src="./img/web_first.png" alt="" class="js-open">
            </div>

            <div class="course-item">
                <img src="./img/web_first.png" alt="" class="js-open">
            </div>

            <div class="course-item">
                <img src="./img/web_first.png" alt="" class="js-open">
            </div>
            <div class="overlay" id="js-overlay"></div>
            <div class="modal" id="js-modal">
                <img src="" alt="" id="open-img">
            </div>

 

1つずつ見ていきましょう。

 

            <div class="course-item">
                <img src="./img/web_first.png" alt="" class="js-open">
            </div>

この部分には決まったサイズで並べて表示したい画像を設定します。

この画像が拡大表示のもとになる画像です。

並べたい数だけ用意して、画像を差し替えれば使用できます。

 

img要素がクリックされたかを監視するためにclass="js-open"

を設定しておきます。

画像が1つならidでもいいと思いますが、今回は複数かつ変動の可能性を考えてクラスにします。

 

 

<div class="overlay" id="js-overlay"></div>

 

この部分は背景にグレーを表示する為のボックス要素です。

class="overlay"はCSSを適用する為に、

 id="js-overlay"はjQueryで操作する為にそれぞれ設定しています。

 

 

<div class="modal" id="js-modal">
 <img src="" alt="" id="open-img">
</div>

 

ここが画像が拡大表示されるボックス要素と、img要素ですね。

class="modal"はCSSを適用する為に、

id="js-modal"はjQueryで操作する為にそれぞれ設定しています。

また、id="open-img"は拡大表示する画像を設定するimg要素を特定する為に

設定しています。

 

これでHTMLはひとまず完成です。

 

 

CSSを書く

 

  .modal {
    width: 98%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 1;
  }

  #open-img img {
    width: 100%;
  }

  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: grey;
    opacity: .6;
    z-index: 0;
    top: 0;
    left: 0;
    display: none;
  }

 

あまり特筆すべき点はないですが、

画像の拡大表示した位置調整(ここでは.modalクラス)について説明します。

 

positionとtransformで要素の位置がどうなっているのか

 

position:fixedでtop,leftに50%を設定すると、

図中の「画像中心が来てほしい点」まで画像の左上が移動します。

 

このままでは画像が画面中央に表示されないので、

transformプロパティ taranslateで要素を移動させます。

 

transformプロパティで要素を操作する際の基準は、要素の中心です。

 

その為、translate(-50%,-50%)とすることで、

xとy方向に-50%(要素サイズ基準)移動します。

すると、図中の画像中心が来てほしい点と

画像の中心が一致するのです。

 

これからjQueryで動きをつけていきましょう。

 

…と思いましたが、記事が長すぎるので、明日の分に回したいと思います。

 

では、また。

27.jQuery実践課題② ~調べながら実装する~

昨日に引き続きjQueryの実践課題②と言うことで、

 

ページトップへ戻るボタンを付ける

 

をやっていきたいと思います。

 

実装の条件

  • トップから80pxスクロールしたら
  • 300ms(0.3秒)かけて
  • フェードイン・フェードアウトで表示
  • 表示してる間はボタンはページ右下に固定
  • ボタンを押したら500ms(0.5秒)かけてページトップへ戻る

 

細かい処理を除けば、

ページの頭から下にスクロールすると、

ボタンが現れて、ボタンをクリックするとページの頭に移動する。

そういうボタンを作っていきます。

 

ボタンをHTMLで作成する

ブロック要素のpタグを使って作成します。

    <p id="page-top">上へ戻る</p>

 

pタグにCSSを指定する為に、idを設定します。

今回のHTMLはこれだけです。

 

jQueryで動きをつける

まずはコードから

$(function(){
    const pagetop = $('#page-top');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 80) {
            pagetop.fadeIn(300);
       } else {
            pagetop.fadeOut(300);
       }
    });
    pagetop.click(function () {
       $('body, html').animate({ scrollTop: 0 }, 500);
     return false;
    });
  });

 

この後、一つずつ確認していきましょう。

 

バラして内容を確認する

const pagetop =$('#page-top');

まずはidにpage-topが設定されている要素を取得してpagetop変数に代入します。

 

 

$(window).scroll(function(){}})

windowのスクロールを監視して、スクロールされたら

引数に設定されているメソッドが実行されます。

 

 

 if ($(this).scrollTop() > 80){
     pagetop.fadeIn(300);

}

else {

    pagetop.fadeOut(300);

}

scrollTop()メソッドはブラウザのスクロール量を取得します。

ここでのthisはscrollイベントが発生した要素のwindowを指しています。

なので、

もし、スクロール量が80を超えるなら、

pagetop.fadeIn();

そうでなければ

pagetop.fadeOut();

が実行されます。

 

 

pagetop.fadeIn(300);

pagetop.fadeOut(300);

fadeIn()メソッドとfadeOut()メソッドは、

CSSのdisplayプロパティの値に従って動作が変化します。

fadeInはdisplay:noneの時、引数(ミリ秒)に従って徐々に表示されます。

fadeOutはその逆でdisplayがnoneでない時に、引数(ミリ秒)に従って徐々に非表示になります。

 

ここまでで、実装条件の3つ

  • トップから80pxスクロールしたら
  • 300ms(0.3秒)かけて
  • フェードイン・フェードアウトで表示

を達成できました。

引き続き見ていきましょう。

 

ボタンがクリックされたら処理を実行する

pagetop.click(function () {    });

id属性にpage-topが設定されている要素のクリックを監視し、

クリックされたら引数内部の関数が実行されます。

 

 

$('body, html').animate({ scrollTop: 0 }, 500);
body,htmlの2つの要素に対して、スクロール量が0になるように500ミリ秒の時間を掛けて移動します。

 

return false;

これを書くと、これ以降のメソッド内の処理は行われません。

 

これで実装条件

  • ボタンを押したら500ms(0.5秒)かけてページトップへ戻る

が達成です。

jQueryで何をやっているか整理する

$(function(){
    const pagetop = $('#page-top');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 80) {
            pagetop.fadeIn(300);
       } else {
            pagetop.fadeOut(300);
       }
    });
    pagetop.click(function () {
       $('body, html').animate({ scrollTop: 0 }, 500);
     return false;
    });
  });

 

jQueryコードで行っている事を整理すると、

windowがスクロールされる度に、スクロール量が80を超えるか判定し、

80を超える場合はid属性がpage-topの要素を0.3秒かけて表示させ、

80以下の場合はid属性がpagetopの要素を0.3秒かけて非表示にする。

 

また、表示されたid属性がpage-topの要素がクリックされたら、スクロール量が0になるように500ミリ秒をかけてスクロールします。

 

最後にボタンの位置を右下に固定する

残りはデザイン部分なので、CSSの記述ですね。

 

必要最低限の量を書くと下記のようになります。

 

#page-top{

   position : fixed:

   bottom : 30px;

   right : 30px;

   z-index : 99;

}

 

position : fixed;で常に位置を固定

画面の下から30px

画面の右から30px

そして、全ての要素の上になるようにz-index を99

にしています。

 

これで、実装条件

  • 表示してる間はボタンはページ右下に固定

が達成されました。

 

全ての実装条件を満たしたので、

後はデザインを調整して、体裁を整えれば完成ですね。

 

今日のまとめ

  • $('window').scroll()でスクロールイベントを監視できる
  • スクロール量を判定に使って、ボタンの表示・非表示を切り替えられる
  • 「スクロール量を0にする」という処理でページの先頭に移動できる
  • ボタンの固定はcssで行う(position:fixedとz-indexを使う)

 

本日はスクロールボタンの実装の課題に取り組みました。

この他にも色々な実装の仕方がありそうですね。

 

では、また。

26.jQuery実践課題① ~調べながら実装する~

本日からjQueryの実践課題と言うことで、

 

ドロワーメニューの実装

 

をやっていきたいと思います。

色々な情報を自分で拾い集めて、実装できる…解決力を養うことが目的の課題ですね。

 

本題に入る前に、「実装」について調べたので書いておきます。

「実装」とは「じっそう」と読み、

新しいものを作ったり、機能を追加したりすることだそうです。

いつもながら、しつこく調べていくスタイルですw

 

では、気を取り直して進んでいきます。

 

ドロワーメニューの実装

そもそも、ドロワーメニューって何でしょうか。

 

ドロワーとは「引き出し」の意味で、

ドロワーメニューはクリックした時に

「引き出し」のような動きで開閉するメニューのことだそうです。

ゴリゴリコードさんのページが分かりやすかったです。

参考までに下記を御覧下さい。

ゴリゴリコード様(引用元)

 

上記のメニューを作ります。

下記は引用させていただいたHTMLです。

<nav class="header-nav">
  <ul class="header-nav-list">
      <li class="header-nav-item" id="toggle"><a herf="#">メニュー1</a>
          <ul class="toggle-list">
            <li><a href="#">テキスト1</a></li>
            <li><a href="#">テキスト2</a></li>
            <li><a href="#">テキスト3</a></li>
          </ul>
      </li>
      <li class="header-nav-item"><a href="#">メニュー2</a></li>
      <li class="header-nav-item"><a href="#">メニュー3</a></li>
  </ul>
</nav>

ゴリゴリコード様(引用元)

 

 

処理を言葉にすると

  • メニュー1がクリックされたら、
  • テキスト1~3を含むリストをアニメーションをつけて開閉させる

です。

1つずつ見ていきましょう。

 

クリックされたことを知りたい要素にid属性を設定

ここでは「メニュー1」がクリックされた事を知りたいので、

ページに1つしか存在できないid属性を使って、要素を特定します。

今回は「メニュー1」のテキストが書かれている「li」タグに「id="toggle"」を設定。

 

そして、この段階でjQueryに落とし込むと下記のようになります。

$('#toggle').click(function(){});

 

言葉にすると、

id属性がtoggleの要素がクリックされたら、処理を実行。

ですね。

 

必要なCSSを設定

親要素と子要素にCSSのpositionプロパティを設定

さらに子要素は最初は非表示にしたいのでdisplayプロパティを設定します。

ここでは開閉メニューの表示をざっくり整えます。

子要素はテキスト1~3を含む「ul」タグです。

ulタグにクラス「toggle-list」を設定して、クラスに対してCSSを適用します。

CSSの内容は

.toggle-list{

position : absolute;

left : 0px;

top : 40px;

display : none;

}

 

です。

そして親要素の「li」タグにも「position」プロパティを設定します。

#toggle{

position : rerative;

}

 

これで、

親要素に対して左側寄せで

上から40pxの位置に表示される

最初は非表示状態のリスト

CSSが適用できました。

positionプロパティについてはこちらのサイト様がおすすめです。

saruwakakun.com

 

開閉動作をjQueryで記述

最後に、クリックされた時の開閉動作の処理をjQueryで記述します。

開閉させたい部分はクラス「toggle-list」が設定されている「ul」タグです。

ですので、

$('.toggle-list')で要素を取得して、

要素の開閉動作をさせるメソッドslideToggle()を使います。

slideToggle()メソッドは、

指定した要素が非表示の場合はスライドダウンのメソッドを

指定した要素が表示されている場合はスライドアップのメソッドを

実行するという、優れたメソッドです。

 

自分で書くとしたら、

指定したdisplayの値を取得して、その値が~だったら~する

みたいな処理を書かないといけないんですよね…。

jQuery様々です。

 

ということで、最終的なjQueryのコードは

 

$('#toggle').click(function(){ $('.toggle-list').slideToggle() });

となります。

 

言葉で説明すると、

 

id属性にtoggleが設定されている要素がクリックされたら、

クラス名がtoggle-listの要素を取得し、そのdisplay値に従って、

スライドダウン、スライドアップを実行する。

 

となります。

動きの部分はこれで終了です。必要なデザインはCSSを追記していくだけですね。

 

今日のまとめ

  • ドロワーメニューとは「引き出し」の様な動きをするメニュー
  • slideToggle()メソッドを使って、開閉の両方の動作を実現できる
  • slideToggleメソッドは指定した要素のdisplayプロパティで動作が変わる

 

今日はドロワーメニュー実装について学習しました。

ページに動きがついてくると俄然面白くなってきますね!

 

では、また。

25.jQueryの使い方 ~イベント監視とアニメーション~

引き続きjQueryについて学習しましたので、整理します。

中でも「イベント監視」と「アニメーション」についてやっていきます。

 

イベント監視

JavaScriptの所でもやりました、イベント監視。

状態の変化があった時に何らかの処理をさせたい

時に使うものでしたね。

 

今回もJavaScriptと比較しつつ確認していきます。

 

要素のクリックを検出して処理を実行

次の処理を行うコードを書きます

 

ブラウザに読み込まれたHTMLの

id属性にtestが設定されている要素が

クリックされた時に

処理を実行する

 

まずはJavaScriptから

 

document.getElementById('test').addEventListener('click',function(){実行させたい処理});

 

これをjQueryで書くと

 

$('#test').click(function(){実行させたい処理});

 

こうなります。

超短いですね。

どちらも「実行させたい処理」を省略して書いてますが、

ここの内部処理の書き方でもコード量に差が出てくるはずです。

 

要素にカーソルが乗ったときの処理

次の処理を行うコードを書きます

 

ブラウザに読み込まれたHTMLの

id属性にtestが設定されている要素に

マススカーソルが乗った時に

処理を実行する

 

まずはJavaScriptから

 

document.getElementById('test').addEventListener('mouseover', function() {実行させたい処理});

 

引数が違うだけで、クリックと一緒ですね。

 

jQueryで書くと、

$('#test').hover(function(){実行させたい処理1},function(){実行させたい処理2});

 

こうなります。

いやいや、なんか処理2つ書いてるんですけど、コード量増えてるんですけどと思ったそこのあなた!

私も同じ思いでした。

これは実は

引数1の処理がマウスが乗った時の処理

引数2の処理がマウスが外れた時の処理

を書いています。

 

つまり、JavaScriptで言うところのこの2つの処理

document.getElementById('test').addEventListener('mouseover', function() {実行させたい処理});

document.getElementById('test').addEventListener('mouseleave', function() {実行させたい処理});

$('#test').hover(function(){実行させたい処理1},function(){実行させたい処理2});

この1行で済ませているわけです。

ヤバくないですか!(語彙力のなさw

 

jQueryで要素にアニメーションを付ける

とは言っても何も難しい事はありません。

何故なら、全てメソッドとして用意されているからです。

すばらしい。

Effects | jQuery API Documentation

公式のアニメーション一覧です。

 

例えば要素をフワっと表示させたり、フワッと消したりしたい場合は

 

フワっと表示

$('#test').fadeIn();

 

フワっと非表示

$('#test').fadeOut();

 

これ、だけです。

自分で0から書こうとしたら、

CSSを操作するコードを結構書く必要がありそうなものですが、

たったこれだけで素敵な動きが付けられるなんて感動ですよね。

 

今日のまとめ

  • イベントの監視やアニメーションも殆ど要素指定+メソッドで完結
  • jQueryが使えるだけでも時間短縮に大きな貢献がある

 

ここまで学習してきて、JavaScriptjQueryも色々な処理を書いていますが、HTMLの要素や属性とCSSを動的に変化させているだけなんですね。

それがページに動きをつけられるという意味と、今更理解したわけです。

 

では、また。