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

2024-11-102024-12-04

はじめに

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

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

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

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

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

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

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

初級編DAY22の押さえておきたいポイント

カンニング上等！

プログラマーの実装力とは「＝書ける力」ではなく、「調べれば作れる力」も含めて”実装力”。

どんどん調べて、カンニングして、使えるコードは再利用していこう！

（Day21で考えていたことがまさに書いてあった・・・）

模写コーディング

引き出しを増やすために、模写コーディングがおすすめ！

HTMLのテンプレートを購入して練習する方法もある。

なお、増やした引き出しはしっかりスニペットやNotionでまとめて自分のものにすること！！！

参考サイト（HTMLテンプレートを購入できる）
Envato Market

Trial and Error memo

モーダルで画像の拡大表示

最初にやってみた実装は、イメージをクリックしたタイミングでclassをつけ外しして
モーダルを表示／非表示のコントロール！

ただ、この実装だとフェードイン、フェードアウトの要件が実現できておらず・・・実装し直し！

参考サイト（classつけ外しする方法）
https://zero-plus.io/media/jquery-modal/

モーダルを表示したり非表示にする方法は、classをつけ外しする方法のほかに
.fadeIn()、.fadeOut()で操作する方法がある！

今回の課題はフェードイン、フェードアウトを要件として指定されているので、後者の方がよい！

参考サイト（フェードイン、フェードアウト版）
https://orange-log.com/jquery-modal/

実装結果

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

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

<!-- HTML -->
      <div class="overlay js-close" id="js-overlay"></div>
      
      <div class="modal" id="js-modal">
        <img src="./img/menu2.png" alt="" class="js-"/>
      </div>

/* CSS　タブレットPC */
  .modal {
    width: 65%;
    height: 65%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
  }

  .modal img {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

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

  .overlay.open {
    display: block;
  }
  .modal.open {
    display: block;
  }

// jQuery
const modal = $("#js-modal");
const overlay = $("#js-overlay");
const open = $("#js-open");
const close = $(".js-close")

jQuery(function(){
    open.on("click", function(){
        modal.fadeIn();
        overlay.fadeIn();
    });
    close.on("click", function(){
        modal.fadeOut();
        overlay.fadeOut();
    });
});