【プログラミング・Web制作勉強ログ#87】6/3の積み上げ成果

2022年6月4日

今日の積み上げ 175日目成果

#今日の積み上げ 175日目成果
娘の熱で保育園休み。とはいえ娘はぴんぴんしてるので、2時間ドライブコース。
作戦変更した割には進んだと考えよう！

①6/2日報⇒◎
②アニメーションエラー対応⇒ほぼ◎、ピクセルパーフェクト⇒✕
(隙間時間)インプット⇒3本
— おかつ🌱開業準備中 (@o_89965328_k) June 3, 2022

結局娘は23時半くらいまでぴんぴんしていました笑

＼宣言した内容はこちらです／

本日の学び

アニメーション：表示エラー修正対応

　昨日戦っていた表示エラーの修正対応をば。

①ハンバーガーメニュー：表示時の背景が実装できない
　⇒（解決法）Sassの構造（ネスト）を修正。
②ヘッダー文字色：FVのスライダー実装後、文字色が変更する位置が正しい位置（About以降）からずれてしまった
　（おそらくトリガーの位置が画像の追加2枚分下にずれている？）
　⇒（解決法）JavaScriptの記述漏れのため追記。
最初の２行目の「関数宣言」という、一番大事なところが記載漏れしてたｗ

　$(function() {
$(window).on(“scroll”, function() {

③モーダル：表示するとトップにスクロールしてしまう
　（aタグを使っているから？調査中）
　⇒（解決法）メンターさんに相談。
　　メンターさんによると、そもそもモーダルのクリックイベントに、記述していたaタグのリンクを使っていなかったそうで(;^ω^)
①HTMLで該当するaタグをdivタグに変更
②JavaScriptのIDを取得するための要素をaタグからdivタグに記載したクラス名に変更
によって解決。

　モーダルの最終コーディング結果はこちら。

<!-- Works -->
    <section id="works" class="works">
        <h2 class="title">WORKS</h2>
        <p class="title_ja">施工事例</p>
        <div class="container">
            <div class="works_flex_wrapper">
                <div class="works_box" data-aos="zoom-in" data-aos-duration="2000">
                    <div class="works_modal" id="modal_01">
                        <div class="works_box_imgarea">
                            <picture>
                                <source media="(min-width: 769px)" srcset="images/PC_WORKS_01.png 1x, images/PC_WORKS_01@2x.png 2x" alt="Works_01">
                                <source media="(max-width: 768px)" srcset="images/SP_WORKS_01.png 1x, images/SP_WORKS_01@2x.png 2x" alt="Works_01">
                                <img src="images/PC_WORKS_01.png 1x, images/PC_WORKS_01@2x.png 2x" alt="Works_01">
                            </picture>
                        </div>
                        <div class="works_box_txtarea">
                            <p>【新築】<br class="sp-none">長崎県T.O様自宅</p>
                        </div>
                    </div>
                </div>
                <div class="works_box" data-aos="zoom-in" data-aos-duration="2000">
                    <div class="works_modal" id="modal_02">
                        <div class="works_box_imgarea">
                            <picture>
                                <source media="(min-width: 769px)" srcset="images/PC_WORKS_02.png 1x, images/PC_WORKS_02@2x.png 2x" alt="Works_02">
                                <source media="(max-width: 768px)" srcset="images/SP_WORKS_02.png 1x, images/SP_WORKS_02@2x.png 2x" alt="Works_02">
                                <img src="images/PC_WORKS_02.png 1x, images/PC_WORKS_02@2x.png 2x" alt="Works_02">
                            </picture>
                        </div>
                        <div class="works_box_txtarea">
                            <p>【リノベーション】
                                <br>京都府カトリック丹波教会</p>
                        </div>
                    </div>
                </div>
                <div class="works_box" data-aos="zoom-in" data-aos-duration="2000">
                    <div class="works_modal" id="modal_03">
                        <div class="works_box_imgarea">
                            <picture>
                                <source media="(min-width: 769px)" srcset="images/PC_WORKS_03.png 1x, images/PC_WORKS_03@2x.png 2x" alt="Works_03">
                                <source media="(max-width: 768px)" srcset="images/SP_WORKS_03.png 1x, images/SP_WORKS_03@2x.png 2x" alt="Works_03">
                                <img src="images/PC_WORKS_03.png 1x, images/PC_WORKS_03@2x.png 2x" alt="Works_03">
                            </picture>
                        </div>
                        <div class="works_box_txtarea">
                            <p>【新築】<br>東京都A.F様自宅件事務所</p>
                        </div>
                    </div>
                </div>
                <div class="works_box" data-aos="zoom-in" data-aos-duration="2000">
                    <div class="works_modal" id="modal_04">
                        <div class="works_box_imgarea">
                            <picture>
                                <source media="(min-width: 769px)" srcset="images/PC_WORKS_04.png 1x, images/PC_WORKS_04@2x.png 2x" alt="Works_04">
                                <source media="(max-width: 768px)" srcset="images/SP_WORKS_04.png 1x, images/SP_WORKS_04@2x.png 2x" alt="Works_04">
                                <img src="images/PC_WORKS_04.png 1x, images/PC_WORKS_04@2x.png 2x" alt="Works_04">
                            </picture>
                        </div>
                        <div class="works_box_txtarea">
                            <p>【都市開発】<br>山形県銀山温泉協同組合</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-area">　　//モーダルエリアはここから
                <div class="modal-bg modal-close"></div>
                <div class="modal-content">
                    <div id="works_modal_01" class="modal-box modal-inner">
                        <img src="images/PC_WORKS_modal_01@2x.png" alt="長崎県T.O様自宅">
                        <p>【新築】
                            長崎県T.O様自宅</p>
                        <div class="modal-cancel modal-close"></div>
                    </div>
                    <div id="works_modal_02" class="modal-box modal-inner">
                        <img src="images/PC_WORKS_modal_02@2x.png" alt="京都府カトリック丹波教会">
                        <p>【リノベーション】
                            京都府カトリック丹波教会</p>
                        <div class="modal-cancel modal-close"></div>
                    </div>
                    <div id="works_modal_03" class="modal-box modal-inner">
                        <img src="images/PC_WORKS_modal_03@2x.png" alt="東京都A.F様自宅件事務所">
                        <p>【新築】
                            東京都A.F様自宅件事務所</p>
                        <div class="modal-cancel modal-close"></div>
                    </div>
                    <div id="works_modal_04" class="modal-box modal-inner">
                        <img src="images/PC_WORKS_modal_04@2x.png" alt="山形県銀山温泉協同組合">
                        <p>【都市開発】
                            山形県銀山温泉協同組合</p>
                        <div class="modal-cancel modal-close"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

/* ------------
works
-------------- */
#works {
    padding: {
        bottom: 75px;
        right: 40px;
        left: 40px;
    }
    @include mq(sp) {
        padding: {
            bottom: 50px;
            right: 30px;
            left: 30px;
        }
    }
    .title_ja {
        font-size: 2rem;
        text-align: center;
        letter-spacing: 1.5rem;
    }
    .works_flex_wrapper {
        margin-top: 73px;
        display: flex;
        gap: 40px;
        @include mq(sp) {
            margin-top: 43px;
            flex-direction: column;
        }
        .works_box {
            width: 25%;
            @include mq(sp) {
                width: 100%;
            }
            .works_box_imgarea img {
                width: 100%;
                cursor: pointer;
            }
            .works_box_txtarea {
                p {
                    font-size: 1.6rem;
                    letter-spacing: 0;
                    text-align: left;
                    margin-top: 20px;
                    cursor: pointer;
                }
            }
        }
    }
    //モーダル
    .modal-area {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        transition: all .7s;
        .modal-bg {
            width: 100vw;
            height: 100vh;
            background: #000;
            opacity: 0.4;
        }
        .modal-content {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 450px;
            height: auto;
            text-align: left;
            background: #fff;
            padding: 15px;
            @include mq(sp) {
                width: 84%;
                padding: 20px;
            }
            .modal-box {
                width: 420px;
                @include mq(sp) {
                    width: 100%;
                }
                img {
                    width: 100%;
                }
                p {
                    margin-top: 10px;
                    font-size: 1.6rem;
                }
                .modal-cancel {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 15px;
                    cursor: pointer;
                    &::before {
                        content: "";
                        position: absolute;
                        width: 1px;
                        height: 15px;
                        background-color: #000;
                        top: 50%;
                        left: 50%;
                        -webkit-transform: translateX(-50%) rotate(45deg);
                        transform: translateX(-50%) rotate(45deg);
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        width: 1px;
                        height: 15px;
                        background-color: #000;
                        top: 50%;
                        left: 50%;
                        -webkit-transform: translateX(-50%) rotate(-45deg);
                        transform: translateX(-50%) rotate(-45deg);
                    }
                }
            }
            .modal-inner {
                display: none;
                &.active {
                    display: block;
                }
            }
        }
    }
}

//works（画像またはテキストをタップしたらモーダルで画像を表示させる）//
$(".works_box").click(
    function () {
      const modalId = $(this).children('.works_modal').attr("id");
      console.log(modalId);
      $('body').css('overflow-y', 'hidden');  // 縦スクロール操作を無効
      // 閉じたタブの.activeクラスを削除
      $(".modal-inner").removeClass("active");  
      // 開いたタブに.activeクラスを付与
      $(".modal-content").find("#works_" + modalId).addClass("active");
      $(".modal-area").show()
    }
  );
  $(".modal-close").click(
    function () {
      $(".modal-area").hide()
      $('body').css('overflow-y', 'auto');  // 縦スクロール操作無効を解除
    }
  );