のーとそーだこーど。

2023-9-4デイトラWEB制作コース開始┃勉強ノート┃日々のアウトプット┃コーダーへの道┃”想いをカタチに”┃よろしくお願いいたします。

のーとそーだこーど。

2023-9-4デイトラWEB制作コース開始┃勉強ノート┃日々のアウトプット┃コーダーへの道┃”想いをカタチに”┃よろしくお願いいたします。

【初級編DAY19】【調べながら実装しよう】jQuery実践課題①

WEB制作 デイトラ jQuery JavaScript HTML CSS ChatGPT

 

HTML・cssの課題で作成したサイトに動きを付けてみましょう！

 

下記は復習と、新しく覚えたいことを記録しておきます。

手探りでの作成なので、きっとコードがごちゃごちゃで、お恥ずかしいですが、記録として残しておきます。お気づきの点がありましたら教えて頂けたら嬉しいです！

 

 

 

01. 課題①：ドロワーメニューの実装

まず、こちらのサイトを参考にしながら作成をしました。

 

👇とても分かり易く、作成が行えました。ありがとうございます。👇

gorigoricode.com

≪HTML≫

まとめ
            <li class="header-nav-item"  id="toggle">
              <span class="header-nav-link">
                <span>Menu</span>
              </span>
              <ul class="toggle-list">
                <li><a href="#">新発売</a></li>
                <li><a href="#">おすすめ</a></li>
                <li><a href="#">期間限定</a></li>
              </ul>
            </li>
  • 親である.header-nav-itemにはidとして#toggleを追加
  • ドロワーメニューとして表示したい要素の次にリストのタグを入れる（今回でいうとMenuの下に表示したかったので、ナビゲーションリスト内のMenuの下に記述をしました。）
  • MenuをリンクタグからSpanに変更

 

≪ＣＳＳ≫

まとめ
/* ドロワーメニュー */

#toggle{
  position: relative;
}

.toggle-list{
  display: none;
  width: 80px;
  height: auto;
  position: absolute;
  top: 38px;
  left: -13px;
  background-color: rgba(0,0,0, 0.25);
  font-size: 13px;
  text-align: center;
  padding: 10px;
  color: rgba(255, 255, 255, 0.9);
}

.toggle-list>li{
  padding-top: 10px;
}
  • position　relativeとabsoluteの使用（下記詳細記載）
  • display none で通常ページから見えなくし、jQuerで表示させる

 

新しく覚えておきたいこと

position　relativeとabsoluteについて

  • セットで使用する
  • relativeは親要素、absoluteは子要素へ
  • relativeは元ある場所からどれだけ動かすか（相対位置）
  • absoluteは親要素を基準としてどれだけ動かすか（絶対位置）

👇こちらのサイト記事を参考にさせて頂きました。大変分かり易かったです！👇

zero-plus.io

 

≪jQuer≫

まとめ
// アコーディオンメニュー
jQuery("#toggle").on("click", function () {
  jQuery(".toggle-list").slideToggle();
});

 

 

課題②：ページトップへ戻るボタンを付ける

≪HTML≫

まとめ
    <button class="pagetop"><a href="#header">TOP</a></button>
  • 今回HTMLをいれた場所はBodyのすぐ下。
  • どこでもいいのかもしれないけど、分かるように。
  • pタグなどで実装しているところもあったがボタンを押す、ので、buttonタグにした

 

≪CSS≫

まとめ
/* PageTop */
.pagetop{
  position: fixed;
  right: 20px;
  bottom: 20px;

  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: solid 1.5px #3c301e;

  display: none;

}

.pagetop a {
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
font-size: 12px;
font-weight: bold;
margin: auto;
}
  • position fixedでどこに配置するかを指定（右下）
  • buttonの形を丸にする。上下の大きさを同じにして丸に（border-radius: 50%;）
  • TOPの文字について
    フォントが適用されていないようだったので、追記し、太字にした
  • なんだかいまいちちゃんと真ん中になっているんだろうかという不安がある

 

≪jQuer≫

まとめ
// クリックされたら飛ぶ
jQuery(".pagetop").on("click",function(){
jQuery("html,body").animate({
    scrollTop:0},500);
});
  • .pagetopがクリックされたとき
  • animateを使用して、html,bodyのトップ０まで移動する

 

// windowsがスクロールされたときの処理
jQuery(window).scroll(function(){
// もしWindowのスクロール位置が80pxより上だったときボタンを表示
if (jQuery(window).scrollTop() > 80)
　 {jQuery(".pagetop").fadeIn(300);}
// 80pxより下のときはボタンを消す
else
　 {jQuery(".pagetop").fadeOut(300);}
});
  • jQuery(window).scroll(function・・・
    Windowがスクロールされたときに発火する関数が記載されている
  • if (jQuery(window).scrollTop() > 80)
    jQuery(window).scrollTop()でWindowのスクロール位置を取得している。>80とすることで「もし、80pxよりスクロールしていたとき」、となる。
  • true（真）として {jQuery(".pagetop").fadeIn(300);}で.pagetopを300ms（0.3秒）かけてフェードインで表示
  • else　そうでなかったとき
  • false（偽）として、 {jQuery(".pagetop").fadeOut(300);}で.pagetopを300ms（0.3秒）かけてフェードアウトで非表示に。

 

覚えておきたいこと

 

■jQuery(window).scroll(function()■
Windowがスクロールのイベントがあったときに発火する

 

■jQuery(window).scrollTop()■
Windowのスクロール位置が取得できる
 

 

今まで勉強してきたことを踏まえ、サイトやchatGPTを使用しながら実際にサイトに動きを付けてみました。

 

まずはHTMLで土台を作り、cssで装飾、そしてJavaSprict・jQuerで動きをつけるこれまでの流れが見えてきましたね！

 

今回もっとも躓いたのはjQuerでの；を付け忘れ・・しょーもないミスで時間がかかりました。そんなときにやっぱり活用したのがchatGPT様！

 

一発で私のミスを指摘してくださいました・・(笑)

 

これからもAIを活用しつつ、自分で調べつつ、精進していきます。

 

今日はここまでにします٩( ''ω'' )وお疲れ様でした。