NFTを始めるなら日本円で始められるHEXA

【毎日コツコツ】デイトラDay22 jQueyの実践課題!モーダルで拡大表示の方法!

上質な情報発信を続けてお役に立てるようサイト運営費用を賄うために、Googleアドセンス・アフィリエイト等を利用しており本記事はプロモーションを含みます。

デイトラ受講生のたくたくタックです。Webスキルを身に付けたく完全未経験から受講を始めています。

といっても、実はデイトラを開始したのは数年前….慣れないコードと向き合えなくなり挫折を繰り返しています。

こんな僕ですが、Webと関わるこの世の中では必須のスキルだと再認識して再起しました。

毎日コツコツ「必ず完走する」を目標に掲げ学んだ内容を記録に残します

過去に何度も挫折した私の記録はこちら→過去のブログ記事

タック
タック

ブログを書くことに時間をかけたり…計画性の無さを今では反省しています。

Web制作を学ぶ理由

僕がWeb制作を学ぶ理由は大きく分けて3つあります。

1,単純にWeb業界に興味がある

2,Web制作に関わる仕事で多くの人に喜んでもらいたい

3,現在中学受験を目指す息子が中学に上がった時にWeb制作の基本を教えたい

移り変わりの激しいWeb業界、変化をすることが当たり前であるという常識はサラリーマンではあまり常識ではありませんでした。ただ、Web制作を学ぶ中でプログラミングの常識を学ぶ事が出来ています。

もっと知識や実務経験を増やしたいと思っています。

【Web制作】jQueryの課題をこなそう

前回の記事ではjQueryの実践課題を2つこなしてきました。

Day21実践課題については以下にまとめています。

次の課題で最後になりますが、実践課題の3つ目を自分の力でこなしていきます。

早速ですがチャレンジしていきましょう!

【デイトラ実践課題】モーダルで画像の拡大を実装しよう!

この課題はWebページの画像をクリックすると、背景画像が現れてその中に画像が拡大されるといった内容です。

さらに細かい内容はコチラ

  • メニュー 一覧の画像をクリックすると
  • 縦画面いっぱいに薄いグレーの背景ボックスを表示
  • その枠の中心に拡大されたメニュー写真を表示
  • 画面のどこかをクリックすると拡大写真と背景ボックスを非表示
  • アニメーションはフェードイン、フェードアウト

こちらもSweet Delightのサイトを使って作っていきますね。

タック
タック

課題2つもクリアして一息つけると思いきや強敵が!w

Baby panda
Baby panda

焦らず、時間をかけてもいいので実装力を身につけようね♫

タック
タック

そうだね♪じゃあ早速実装していきます!

実装に失敗したコード

HTML
 <!-- ディスプレイをグレーカラーにする記述 -->
 <div class="gray-display"></div>

 <!-- 画像ををクリックした時に拡大で表示させるための記述 -->
    <li class="menu-item js-menu">
                <div class="js-menu-img-blueberry"><img src="イメージ画像" alt="新発売 ブルーベリーチーズケーキ" /></div>
               
              <div class="menu-img menu-img-blueberry "><img src="./img/menu2.png" alt="新発売 ブルーベリーチーズケーキ" /></div>
             
              <div class="menu-text-contents">

                <h3 class="menu-name">
                  <span class="menu-name-main">ブルーベリーチーズケーキ</span>
                  <span class="menu-name-sub">- Blueberry cheesecake -</span>
                </h3>
                <p class="menu-text"># フランス産チーズをブレンド</p>
              </div>
            </li>
タック
タック

画像の拡大をする方法がわからず画像の記述をもう一つ作りました

Baby panda
Baby panda

ん〜斬新と言うか、たぶん違うよねw

タック
タック

やっぱり…でも知らずに続けてCSSも作っていきました。

CSS

 /* 背景のCSS */
.gray-display{

  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%!important;
  height: 100%;
  background: rgba(0,0,0,0.45);
}

 /* 画像のCSS */
.js-menu-img-blueberry{
  width: 200%;
  position: relative;
  left: -100px;
  top: -100px;
  display: none;
}
タック
タック

次にjQueryでアニメーションを追加

jQuery
jQuery(".menu-img-blueberry").on("click",function(){
    jQuery(".gray-display").fadeIn();
    jQuery(".js-menu-img-blueberry").fadeIn();
});

jQuery(".gray-display, .js-menu-img-blueberry").on("click",function(){
    jQuery(".gray-display").fadeOut();
    jQuery(".js-menu-img-blueberry").fadeOut();
})
タック
タック

一通り完成したものはコチラです。

デイトラ
タック
タック

元の画像が下に移動して画面が崩れました…

タック
タック

次に元にdisplay:noneを入れるとその要素自体が消えてまたまた画像が崩れる現象…そりゃそうだといったところでしょうか。

Baby panda
Baby panda

あららー諦めず次の方法を探していこう!

【デイトラ実践課題】モーダルで画像の拡大を実装しよう!【完成編】

実は失敗を繰り返し全く進ま無い日が実は続きました。

しかし、何度か作り直しているとなんとか完成することができたので実際に書いたコードを紹介します。

タック
タック

もっといい書き方があるんだろと思いながらなんとか実装できた感じです

HTML
  <!-- デイトラDay22 モーダルの記述 -->
    <div class="modal-1">
      <div class="modal-img">
       <img src="./img/menu1.png" alt="" class="mordal-menu-img-straberry">
      </div>
    </div>
    <div class="modal-2">
      <div class="modal-img">
       <img src="./img/menu2.png" alt="" class="mordal-menu-img-straberry">
      </div>
    </div>
    <div class="modal-3">
      <div class="modal-img">
       <img src="./img/menu3.png" alt="" class="mordal-menu-img-straberry">
      </div>
    </div>

※menuにid名を追加しています
 <div class="menu-img" id="modal-1"><img src="./img/menu1.png" alt="おすすめ ストロベリーケーキ" /></div>
 <div class="menu-img" id="modal-2"><img src="./img/menu2.png" alt="新発売 ブルーベリーチーズケーキ" /></div>
 <div class="menu-img" id="modal-3"><img src="./img/menu3.png" alt="おすすめ チョコレートケーキ" /></div>
CSS
/* モーダル セクション */

.modal-1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(23, 22, 21, 0.5);
  z-index: 1;
  display: none;
}
.modal-img{
  text-align: center;
  padding-top: 300px;
  z-index: 2;
  display: none;
}
.modal-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(23, 22, 21, 0.5);
  z-index: 1;
  
  display: none;
}
.modal-3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(23, 22, 21, 0.5);
  z-index: 1;
  
  display: none;
}
jQuery
jQuery("#modal-1").on("click",function(){
    jQuery(".modal-1").fadeIn();
    jQuery(".modal-img").fadeIn();
    jQuery("body").css("overflow","hidden")
})


jQuery(".modal-1, .modal-img").on("click",function(){
    jQuery(".modal-1").fadeOut();
    jQuery(".modal-img").fadeOut();
    jQuery("body").css("overflow","");

})

jQuery("#modal-2").on("click",function(){
    jQuery(".modal-2").fadeIn();
    jQuery(".modal-img").fadeIn();
    jQuery("body").css("overflow","hidden")
})


jQuery(".modal-2, .modal-img").on("click",function(){
    jQuery(".modal-2").fadeOut();
    jQuery(".modal-img").fadeOut();
    jQuery("body").css("overflow","");

})

jQuery("#modal-3").on("click",function(){
    jQuery(".modal-3").fadeIn();
    jQuery(".modal-img").fadeIn();
    jQuery("body").css("overflow","hidden")
})


jQuery(".modal-3, .modal-img").on("click",function(){
    jQuery(".modal-3").fadeOut();
    jQuery(".modal-img").fadeOut();
    jQuery("body").css("overflow","");

})
タック
タック

これからもっと勉強して他の方法も研究していきたいと思います

【デイトラWeb制作】day22モーダルを実装しよう!まとめ

今回も自分の力で調べて実装するといった大事な講義でした。今回実装した内容は、

記事まとめ
  • モーダルの実装

今回の実装はjQueryの操作の講義だったにもかかわらずCSSやHTMLといった基礎の設置に苦戦しました。

画面が大きく崩れたり、思ったところに配置出来なかったりと、基礎ができていないことが痛感できた講義でした。

このまま講義を進めても躓くことが予想できますが、今回はなんとか実装することができてホッとしています。

タック
タック

全体を通して毎日少しでも諦めなかったところがよかったと思います。

こんな自分が本当にコーディングの仕事ができるのかとてもとても不安ですが、しっかり決めた目標「最後までやりきる」を達成できるようにこれからも頑張っていきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA