のーとそーだこーど。

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

のーとそーだこーど。

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

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

WEB制作 デイトラ

 

前回に引き続きjQueryの実践を行っていきます。

 

 

本日の課題

 

■モーダルでの画像の拡大表示■
  1. メニュー一覧の画像をクリックすると縦横画面いっぱいに薄いグレーの背景ボックスを表示
  2. その枠の中心に拡大されたメニュー写真を表示
  3. 画面のどこかをクリックすると拡大写真と背景ボックスを非表示
  4. アニメーションはフェードイン・フェードアウト
  5. メニューの拡大表示中は記事のスクロールが出来ないよう設定
    ※こちらは課題にはありませんでしたが、実装した際に必要に感じたため追加しています！

 

では実際に実装していきます。

下記はコードの記録と反省および追加で覚えておきたいことをメモします。

 

≪HTML≫

まとめ※一部省略
      <h3 class="menu-list-img">
      　<img src="〇〇〇" class="js-modal" alt="おすすめ" />
　　</h3>
    <h3 class="menu-list-img">
      　<img src="〇〇〇" class="js-modal" alt="新発売" />
　　</h3>
    <h3 class="menu-list-img">
      　<img src="〇〇〇 class="js-modal" alt="おすすめ②" />
　　</h3>
  <div id="gray-display"></div>
  • imgタグにクラス名を追加
  • 画像をクリックした際に表示される背景グレーを作成するためにDiv　#gray-displayを追加

 

≪CSS≫

まとめ
/* モーダル */
#gray-display{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(100, 100, 100, 0.8);
display: none;
}

#gray-display img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 90%;
  max-height: 90%;
}

.is-active{
  overflow: hidden;
}
 
@media screen and (min-width: 768px) {
  #gray-display img{
    max-width: 30%;
  }
  • #gray-display
    • 画面いっぱいに表示（width,heightを100％）させ、画像を浮かせて固定する（display fixed）
    • 背景色の指定
    • 通常最初は表示されないので、非表示に
  • #gray-display img（id #gray-display 内のimgタグに適用）
    • 画像位置の固定。今回が画面に合わせて変化するので親要素からの位置は０で、ほかで指定をしている
    • 表示画像の大きさを90％に（max-width、max-height）ここで画像の大きさを調整できる
    • marginで画像の余白を調整することで真ん中に配置される
  • .is-active
    #gray-displayが開いたときに、Bodyのスクロールが行えないようにするため、overflow: hidden;で制御している。htmlに初期設定はついていないが、jQuery内で突け外しをする。
  • レスポンシブ対応
    表示される画像が大きすぎたためmax-width: 30%;へ変更

 

反省点
  • #gray-displayにてbackground-colorでグレーに、opacityで透明化させたら表示させるimgまで透過されてしまった。background-colorでrgbaにて設定したところ背景のみ透過された。opacityは設定することですべてに適用されてしまい、逆にbackground-colorで設定した場合は背景のみが透過となる違いを覚えておく。

 

覚えておきたいこと
 
■スクロールの制御■
今回はcssをもとから適用させたclassをjQueryを使用してつけ外しを行うことでスクロールの制御をおこなった。

必要なコード：
  • overflow: hidden;
 
 
復習（position　fixedとabsoluteについて）
 

 

≪jQuery≫

まとめ
// モーダル
jQuery(".js-modal").on("click",function(){
    jQuery("#gray-display").html(jQuery(this).prop("outerHTML"));
    jQuery("#gray-display").fadeIn(300);
    jQuery("body").addClass("is-active");
});
jQuery("#gray-display,#gray-display img").on("click",function(){
    jQuery("#gray-display").fadeOut(300);
    jQuery("body").removeClass("is-active");
});
  • .js-modal画像をクリックした際の処理
    • #gray-displayのHTMLに.js-modalのHTML情報propを使用し取得、追加
      <div id="gray-display">
        <img src="〇〇〇" class="js-modal" alt="おすすめ" />
      </div>
    • #gray-displayをフェードインで表示
    • Bodyタグにclass.is-activeを追加する
  • 開いた画像の#gray-display,#gray-display imgをクリックした際の処理
    • #gray-displayをフェードアウトで非表示
    • Bodyタグのclass.is-activeを削除する

 

覚えておきたいこと
■.prop(‘outerHTML’)■
自分を含めたHTMLを取得する
通常jQuery(セレクタ).html();でhtmlを取得できるが、それはセレクタ内のhtmlの取得となる。自身を含めたhrmlを取得する際にpropが使用される

 

👇こちらのサイトを参考にさせていただきました。ありがとうございます。👇

black-flag.net

 

 

完成

 

 

無事実装が出来ました！

ここまででjQueryの実践課題を終了します٩( ''ω'' )و

 

 

これからコードを書くに当たって

  • 調べる力を身につける
  • コードのストックを作る（Notionがおすすめ）
  • アニメーションの引き出しを増やす
    • ググってみて、ソースコードの読解
    • テンプレートの購入
    • codepenの使用

 

経験を増やしながらストックも増やす術も同時に学んでいきたいですね！

 

 

今日はここまで！お疲れさまでした♫