【デイトラ学習記録】WEB制作コース中級編DAY６ jQuery実践課題 モーダルで画像の拡大表示

WEB
2022.11.08

こんにちは！管理人ピスカです（@rina_pisca）！

只今デイトラのWEB制作コースを始め、100日目が経過しました。

（初級編は１ヶ月ほどで終わり、その後学習記録の執筆に１ヶ月ほどかかってしまいましたが…）

初級編ではHTMLとCSS、Bootstrapを学びました。

難しくも理解していくのが楽しかった初級編でしたが、中級編に入り、JavaScript、jQueryがとても難しく感じ、早くも心が折れそうになりました；；；

JavaScriptとjQuery学習編クリアまでに１ヶ月くらいかかってしまいました(*´-`)

DAY5からの実装課題では初級編で作成したデイトラ簡易サイトにjQueryのアニメーションを実装していきます。

前回はWEBサイトなどでお馴染みのドロワーメニューとページトップボタンを自分で調べて実装していきました。

【デイトラ学習記録】WEB制作コース中級編DAY5 jQuery実践課題 ドロワーメニューとページトップボタンの実装
DAY5での jQuery実装課題では初級編で作成したデイトラ簡易サイトに、WEBサイトなどでお馴染みのドロワーメニューとページトップボタンを自分で調べて実装していきます。私のコードも載せていますので答え合わせにでも使ってください♪
piscapisca.blog
2022.11.05

今回はモーダルというアニメーションを実装していきます。

そしてつまづいたのがこのモーダルでした。

ここでどうしてもうまくいかず原因もわからず、何回もJavaScriptの基礎から学び直し、ノートにまとめ頭の中を整理したり、２〜３週間くらいは詰まっていたと思います。笑

成功した私のコードも載せていますのでよかったら答え合わせに使ってください♪

ピスカ
ピスカ

管理人ピスカです。

１９９０年大阪市生まれ
3年間エステ、5年間美容皮膚科カウンセラー
その後、保育士資格を取得し３年間保育士として勤務

長男11時間保育園に預けるフルタイムワーキングママ

育休中に在宅ワークを目指してWEBスキル習得中です！

デイトラとは

筆者は以前少しだけワードプレスでのブログ運営はしておりましたがすぐに挫折し、ほぼWEBスキル0からのスタートです。

まず、HTML、CSS、コーディングって何？のレベルから始めました。

デイトラWEB制作コースはそんな全くの未経験でも初級編だけで月5万のスキルが身に付くという内容の“未経験でも・迷わず・楽しく”学べるオンラインスクールです。

中級、上級レベルになると本業でバリバリやっていけるスキルが身につきそうです。

【高価】自己投資！オンラインスクールデイトラを選んだ理由
現在育休中なのですが、育休中にWEB制作のフリーランサーを目指してオンラインスクール”デイトラ”でWEB制作コースを受講することにしました。無料で数ある情報を手に入れやすい環境の中で、わざわざお金を払ってオンラインスクールを受講する理由と、たくさんのオンラインスクールの中からデイトラを選んだ理由をまとめました。これからオンラインスクールでの受講を考えている方へ、少しでも参考になれば嬉しいです。
piscapisca.blog
2022.10.05

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

モーダルとは画像などをクリックすると画面いっぱいに画像が表示されるjQueryのアニメーションです。

デイトラの課題条件は

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

そこでお世話になった記事がこちら

ごんゾウ太郎@ちゃんころ
記事がありません
ishitoblog.com

こちらの記事がすごくわかりやすかったので、私の解説は不要かと思います。笑

私のコードはこちら

<section class="course section">
        <div class="container">
            <h2 class="section-title">コース一覧</h2>
            <div class="course-wrapper">
                <div class="course-item">
                    <a href=""><img src="./practice/img/web_first.png" alt="デイトラ初級編"></a>
                    <p>HTML / CSS / Bootstrap</p>
                </div>
                <div class="course-item">
                    <a href=""><img src="./practice/img/web_second.png" alt="デイトラ中級編"></a>
                    <p>HTML / CSS / JavaScript / jQuery</p>
                </div>
                <div class="course-item">
                    <a href=""><img src="./practice/img/web_third.png" alt="デイトラ上級編"></a>
                    <p>PHP / WordPress</p>
                </div>
            </div>
        </div>
    </section>

    <div class="modal">
          <div class="bigimg"><img src="" alt=""></div>
          <p class="close-btn"><a href="">×</a></p>
    </div>

元のHTMLからは、course-itemのimgを<a href=””></a>で囲っています。

元のコードはこちら
【デイトラ学習記録】WEB制作コース初級編DAY６ ゼロからサイトを作ってみよう②メインコンテンツ編

のちに、hoverしてクリックできるようにする為です。

そして</section>の下に<div class=”modal”>を追加しています。

これがモーダルのHTMLの部分です。

img要素にbigimgのクラス名を、開いた時のクローズボタン（×）にclose-btnのクラス名をつけています。

そして追加したCSSがこちら

.course-item a:hover {
    opacity: 0.8;
}

.course-item a img {
    width: 100%;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}

.bigimg {
    position: absolute;
    width: 80%;
    max-width: 800px;
    top: 250px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
}

.close-btn {
    color: #fff;
    font-size: 40px;
    position: absolute;
    right: 20px;
    top: 0;
}

.close-btn a {
    color: #fff;
    text-decoration: none;
}

CSSでデイトラの課題条件の

  • 縦横画面いっぱいに薄いグレーの背景ボックスを表示
  • その枠の中心に拡大されたコース写真を表示

を表現しています。

続いて jQueryです。

//course-item modal

$(function() {
$('.course-item a').click(function() {　　　//course-item a　をクリックしたら
        var imgSrc = $(this).children().attr('src');　　//クリックした画像の子要素(img)のsrc属性をimgSrcの変数に設定
        $('.bigimg').children().attr('src', imgSrc); //bigimg内の子要素(img)のsrc属性を、imgSrcに書き換える
        $('.modal').fadeIn(); //モーダルをfadeInで表示させたら
        $('body,html').css('overflow-y', 'hidden');　　//画面の縦スクロールをさせないようにする
        return false　　//aタグの遷移を無効化
      });

$('.close-btn').click(function() {  //course-btn　をクリックしたら
        $('.modal').fadeOut();    //モーダルが非表示になる
        $('body,html').css('overflow-y', 'visible');　　　//モーダルを表示した際に無効化していた縦スクロールを再度有効にする
        return false   //aタグの遷移を無効化
      });
});

モーダルで画像の拡大表示のコードの記述は以上です。

今回つまづいたところ

トグルやページトップボタンの実装はうまくいったのですが、モーダルがどうしても表示されず、JavaScriptと jQueryの基礎から学び直し、いろんなサイトを見ていろんな方法を試みたのですが、自分では解決できず、メンターさんに自分のコードを見てもらいました。

回答くださったのが、 jQueryでは

$('.course-item a').click(function() { ・・・

とあるのに、HTMLに”course-item a”が存在していない、とご回答いただきました。

course-itemのimgを<a href=””></a>で囲っていなかったのですね。

何週間も詰まっていたところが、メンターさんに聞けばあっという間に解決しました♪

すぐに問題点を見つけれるメンターさんすごすぎです。。。

そしてこんなに初歩的なミスにもすごく丁寧で親切なのです(*´-`)

さらに jQueryがうまく動作しない時に、、、と紹介してくださったのがこちらの記事

【WEB制作】JavaScriptが動かないときの原因特定方法
この記事ではJavaScriptが動かないときの解決手順を、WEBサイト制作のスクールでコーディング講師をしているコーサク（@bouru_02）が解説していきます。JavaScriptが思ったように動かないんだけど、こんなときはどうやって解
webkosaku.com

質問して毎回思うのですが、デイトラを受講してよかったと心から思います(*´-`)

まとめ

DAY５とDAY６で定番の jQueryの実装を３つ習得しました。

他にももっとたくさんjQueryのアニメーションのライブラリがあるので、これからどんどん習得していきたいです。

覚えたコードはBoost Noteでメモして使いまわしていきましょう！

これで中級編のJavaScriptとjQueryはクリアです♪

おつかれさまでした〜！！！！

次回はSassという、CSSの時短術を習得していきます！

【デイトラ学習記録】WEB制作コース中級編DAY７〜８　CSSの上位互換！Sassでコーディングを効率的に！
SassとはCSSの拡張言語です。今まではズラーーっと書いていたCSSがSassを使うと効率的に、かつ管理しやすく、コード量も減らせてとても便利です。学習の中で初学者のつまづきポイントがコンパイルエラー。私も頭を抱えましたが解決した内容とヒントもまとめています。
piscapisca.blog
2022.11.10

ここもつまずいてかなり時間を使いました！w

最後までご覧いただきありがとうございました♪

タイトルとURLをコピーしました