【web制作、JavaScript、jQuery学習】よくあるパーツを解答

Web制作において必須であるJavaScriptとjQueryの学習においてどこまで勉強するか悩みますよね。
もちろん多くのことをしっているに越したことはないのですが、学習にさけられる時間は限られています。
そんな中で効率よく学習したい方のために、今回は最低限知っておきたい頻出パーツをご紹介いたします。

学習必須の頻出パーツ

ハンバーガーメニュー

ハンバーガーメニューは、特にスマートフォンやタブレットのような小さな画面で使用され、ナビゲーションメニューをコンパクトに表示するための手法です。
名前の由来は、3本の横線がハンバーガーのパンと具材のように見えることから来ています。

記述方法例は以下になります。（jQery使用）

See the Pen Untitled by masahiro mitani (@tami-1313) on CodePen.

スライドショー

スライドショーは、複数の画像やコンテンツを限られた領域で順番に表示するための手法です。
よくある例としては矢印クリックや画像スワイプなどで表示される画像が変わっていくものです。

記述方法は様々ですが、今回はプラグインを使用した記述例を紹介いたします。
また、スライドショーのプラグインで代表的なものとして、「Slick」「bxslider」「Swiper」があります。
その中で「Swipr」を今回は使用いたします。

【前提】headタグに専用のCSSとCDNを記述

<!-------------- Swiper CSS ------------------------------------------------------------->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<!-------------- Swiper JS -------------------------------------------------------------->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

See the Pen Untitled by masahiro mitani (@tami-1313) on CodePen.

swiperを使用する際の注意点として、
以下のような.swiper > .swiper-wrapper > .swiper-slide の構造は守る必要があります。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">imgタグなど</div>
    <div class="swiper-slide">imgタグなど</div>
    <div class="swiper-slide">imgタグなど</div>
  </div>
</div>

swiperが動かない場合

下記のことが理由に考えられます。

• swiper未対応の古いブラウザを使っている
• headタグの中、もしくはbodyタグの直前にswiperのCDNを記述していない

タブメニュー

タブメニューは、複数のコンテンツをタブで切り替える方法です。

記述方法例は以下になります。（jQery使用）

See the Pen Untitled by masahiro mitani (@tami-1313) on CodePen.

モーダルウィンドウ

モーダルウィンドウは、ページの上に表示されるポップアップウィンドウです。
Modaalやfancyboxなどのプラグインを用いて実装する方法もありますが、プラグイン無しでも実装できるようにしておく方が良いです。

記述方法例は以下になります。（jQery使用）

See the Pen Untitled by masahiro mitani (@tami-1313) on CodePen.

ドロップダウンメニュー

ドロップダウンメニューは、メニューの項目にクリックもしくはホバーするとさらに選択肢が表示されるメニューです。メインメニューが横に広がっており、メニューをホバーすると下にサブメニューが表示される形が多く利用されています。

See the Pen Untitled by masahiro mitani (@tami-1313) on CodePen.

スクロールアニメーション

スクロールアニメーションは、スクロールに応じて要素がアニメーションする効果のことです。
表示領域に入ったらふわっと表示させる。図形が拡大する。など様々なアニメーションと組み合わせて、ページに遊び心を加えられます。

例えば表示領域にはいったらふわっと表示させるアニメーションの記述方法例は以下になります。（jQery使用）

See the Pen Untitled by masahiro mitani (@tami-1313) on CodePen.

スムーススクロール

スムーススクロールは、リンクをクリックしたときにページ内の指定位置までスムーズにスクロールする効果です。
ページTOPにもどるボタンや目次などで使われていることが多いですね。

記述方法例は以下になります。（jQery使用）

See the Pen Untitled by masahiro mitani (@tami-1313) on CodePen.

アコーディオンメニュー

アコーディオンメニューは、クリックするとコンテンツが展開されるメニューです。
ドロップダウンメニューは他要素に干渉せずメニューが上に重なるが、アコーディオンメニューは他要素を押し出すように展開するものです。

記述方法例は以下になります。（jQery使用）

See the Pen Untitled by masahiro mitani (@tami-1313) on CodePen.

まとめ

ここで紹介したパーツは多くのWEBサイトで必要とされます。ただコピペで使いまわすのではなく、どのような要素を設置し、どのような処理が行われているのかをしっかりしながら、実装していきましょう。
とにかくいろいろなWEBサイトをみて、これらのパーツの応用をインプットし、実装できるバリエーションを増やしておくと、コーディングだけでなくデザイン制作の幅もかなり広がります。