【受講記録】デイトラWeb制作コース初級編DAY21

2024-11-102024-12-04

はじめに

2024年10月からデイトラのWeb制作コースの受講をスタートしました。

アウトプットをしてしっかり知識として定着できるよう、記事に残しながら進めています。

OneNoteにメモしながら受講したものを記事にまとめていますので、
実際の受講日と記事の公開には若干のタイムラグがあります。
なるべくリアルタイムになるように心がけますが、受講優先のためご容赦ください。

この記事はこんな人に参考になるかも？

これからデイトラWEB制作コースの受講を考えている方
　実際に受講した記録になりますので、雰囲気や大変度合いを測っていただけるかと思います！

現在進行形でWEB制作コース受講中の方
　一緒に頑張っていければうれしいです！X（旧Twitter）などで交流しませんか！

卒業生の先輩方
　懐かしんでいただければ・・・笑　
　　自分なりに調べた記録も付加していますが、もし間違ってるよー！等ございましたらこっそり教えていただけますと嬉しいです。

Trial and Error memo

ドロワーメニューの実装

ドロワーメニュー自体はul,liでリスト作成
SPページではulタグまるごとdisplay:none;で非表示。
それっぽくはできたと思ったら・・・liのリストは表示されてしまう。
liもdisplay:none;で非表示にして、PC版でdisplay: block;（liタグの初期値はblockだから）で表示されるようにした。

参考サイト
https://saruwakakun.com/html-css/basic/display

position: relative; とposition:absolute;を使う
でもどこを親子関係で定義したら良いかがわからず。すっごく悩んでnavタグを親にした。

参考サイト
https://saruwakakun.com/html-css/basic/relative-absolute-fixed#section5

#menuへのリンク（遷移）はスマホ以外は無効化したい。
pointer-events: none;を使えばリンクが無効化できると見てやってみたけど、これを設定するとJavaScriptのclickイベントも無効化されてしまう。。。
JavaScriptでaタグのhref書き換えをする・・・？
下記参考サイトを見たが「スマホのときだけ」という条件が適用できずに、常にリンクが書き換えられてしまいそう。

参考サイト
https://qiita.com/soboro1207/items/72d7dc8ee94eddf5ec43

詰んでしまったので、メンターさんにヘルプ！
jQueryで画面サイズごとに書き換えをすればよいようだが、課題の範疇は超えているとのこと。

課題としてはレスポンシブまでは求められておらず、
PCでドロワーが表示され、#menuを#だけに書き換えるレベルでOKとのこと。

自分の力量にも合わない雰囲気をひしひしと感じるため、いったんスキップしてまた追って戻ってくることにします！

実装結果

わたしなりの実装結果は以下です。

ご覧いただいている方で、私はこうしたよ！とか、
もっとこうした方がいいよ！等ございましたら、ぜひXにて教えてください！！

<!-- HTML navタグだけ抜粋 -->
        <nav class="header-nav" id="js-drawer">
          <ul class="header-nav-list">
            <li class="header-nav-item">
              <a href="#about" class="header-nav-link">About</a>
            </li>
            <li class="header-nav-item">
              <a href="#menu" class="header-nav-link" id="js-drawer-menu">Menu</a>
              <ul class="drawer">
                <li class="drawer-item">
                  <a href="" class="drawr-link">新発売</a>
                </li>
                <li class="drawer-item">
                  <a href="" class="drawr-link">おすすめ</a>
                </li>
                <li class="drawer-item">
                  <a href="" class="drawr-link">期間限定</a>
                </li>
              </ul>
            </li>
            <li class="header-nav-item">
              <a href="#shop" class="header-nav-link">Shop</a>
            </li>
          </ul>
        </nav>

/* CSS　SP */
.drawer {
  display: none;
}

.drawer-item {
  display: none;
}

/* CSS　タブレットPC */

  #js-drawer {
    position: relative;
  }

  .drawer {
    display: none;
    width: 90px;
    height: 100px;
    background-color: rgba(34, 34, 34, 0.5);
    padding: 10px 8px 8px 8px;
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
  }

  .drawer-item {
    display: block;
    font-size: 16px;
    color: #fff;
  }

// jQuery
jQuery("#js-drawer-menu").on("click", function () {
  jQuery(this).next().slideToggle();
});

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

自力でトップへ戻るボタン自体の作成とjQueryをつかったトップへ戻るアクションは設定できた！
・・・が、フェードイン、フェードアウトなどは全くわからないので、参考サイトを元に実装。

参考にしたサイト
https://otamunote.com/pagetop-installation

.hide()メソッドで一番最初のページ読み込み時、この要素を非表示にする。
80pxスクロールしたら・・・という条件は、scrolltopメソッドを使って取得する。
フェードインは.fadein()、フェードアウトはfadeout()を使う。
()内はイン／アウトの時間をミリ秒で指定可能。

Scrolltopメソッドとは
https://logical-studio.com/develop/frontend/20200522-scroll-event/

実装結果

わたしなりの実装結果は以下です。

ご覧いただいている方で、私はこうしたよ！とか、
もっとこうした方がいいよ！等ございましたら、ぜひXにて教えてください！！

<!-- HTML -->
    <div class="gotop">
      <button type="button" class="gotop-btn" id="js-gotop">TOP</button>
    </div>

/* CSS　SP(タブレットPCでの個別設定なし) */
.gotop-btn {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  border: none;
  background-color: #fff;
  opacity: 0.7;
  font-family: "Josefin Sans", "Noto Sans JP", sans-serif;
  color: #3c301e;
  position: fixed;
  right: 30px;
  bottom: 40px;
}

// jQuery
jQuery(function () {
  var pagetop = jQuery("#js-gotop");
  pagetop.hide();
  jQuery(window).on("scroll", function () {
    if (jQuery(this).scrollTop() > 80) {
      pagetop.fadeIn(300);
    } else {
      pagetop.fadeOut(300);
    }
  });
  pagetop.on("click", function () {
    jQuery("body, html").animate({ scrollTop: 0 }, 500);
    return false;
  });
})