【iSara模写コーディング】プログラミング歴1ヶ月の初心者が挑戦してみた!⑪

今回、模写する部分はこちらになります!
コーディングも掲載しているのでぜひ参考にしてみて下さい。

お手本

今回でiSaraの模写コーディングはほぼ完成になります!
しかし、最後にある『よくある質問』では、jqueryが登場します。

ぶーた

あー、プロゲートでやったような?やってないような?

私は完全に忘れてしまっていたので、progateのjqueryコースを1周してきました。

復習になりますし、1周することで『よくある質問』も攻略することができます。

しかし、今回の記事を読むことでも攻略できますよ!

模写コーディングの様子を最初から見たい方はこちらの記事からどうぞ!

目次

この画面のつまずきポイント

① jqueryの読み込み準備

この画面の最大の難関はjqueryが出てくることです。
jqueryを利用するためにはまず準備が必要です。

まずはフォルダの中にscript.jsというファイルを追加しましょう。

ファイルの準備ができたら、htmlでscript.jsとjqueryの読み込みするための記述を書きます。

   <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> //jqueryの読み込み
    <script src="script.js"></script> //script.jsの読み込み
 </body>
</html>

上のようにbodyタグが閉じる直前に記述しましょう。
これでjqueryが読み込まれ、script,jsで記述されたコードが反映されます!

② どのような処理で実装するか

上のような処理によってh4を表示させたり、非表示にさせたりしようと思います。
そのために使用するのは以下のメソッドです。

toggleClass … 指定したクラスがあるなら削除し、ないなら追加する。
click … クリックされたら処理を実行する。
hasClass … 指定したクラスを持っているか判断する。
next … 同じ階層の次の要素を取得(今回はh3の次の要素であるh4を取得)
slideDown(slideUp) … スライドしながら表示(非表示)

実際に挑戦してみよう!

デスクトップデザイン(main-20)

ぶーた作

jqueryは複雑で難しかったですが、なんとか実装させることができました。

右側のプルダウンマークはtransform: rotate(); で要素を回転させることによって作り出せましたね。

以下にコードを載せておくので参考にしてみて下さい。

<div class="main-20">
      <h2>よくある質問</h2>
      <div class="question">
          <div class="pointer"></div>
          <h3>プログラミングスキルは必要ですか?</h3>
          <h4>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを実施し、場合によってはお断りをしております。この点だけはご了承ください。</h4>
      </div>
      <div class="question">
          <div class="pointer"></div>
          <h3>参加費以上に稼げなかったらどうなりますか?</h3>
          <h4>参加費である258,000円以上の金額をトータルで稼ぐまで、無期限でサポート延長いたします。(講座参加後、週30時間以上の実践をすることと、週1回の実践報告をすることが延長条件です。)きちんと学び実践すれば、フリーランスでも収入を作ることは十分に可能です。</h4>
     </div>
//(省略)  
     <div class="question">
          <div class="pointer"></div>
          <h3>パソコンは必要ですか?</h3>
          <h4>Macをご準備ください。</h4>
    </div>
</div>
.main-20 h2 {
    font-size: 2rem;
    padding: 60px 0 30px 0;
}

.main-20 .question {
    border: 6px rgb(239, 239, 239) solid;
    width: 85%;
    margin: 2vh 0;
    position: relative;
}

.main-20 .question:last-child {
    margin-bottom: 6vh;
}

.main-20 h3 {
    font-size: 1.1rem;
    text-align: left;
    padding: 1.5vh 1vh;
}

.main-20 .pointer {
    position: absolute;
    top: 45%;
    right: 1vh;
    width: 10px;
    height: 10px;
    border-bottom: 3px rgb(239, 239, 239) solid;
    border-left: 3px rgb(239, 239, 239) solid;
    transform: rotate(-45deg);
}

.main-20 h3:hover {
    cursor: pointer;
    text-decoration: underline;
}

.main-20 h4 {
    display: none;
    font-size: 1rem;
    width: 98%;
    text-align: left;
}
$(function() {
    $('.main-20 h3').toggleClass('active') //最初にactiveクラスを追加する

    $('.main-20 h3').click(function() {   //h3がクリックされたら以下の式が実行される
        if ($(this).hasClass("active")) {  //activeクラスを持っているか判断
            $(this).next().slideDown(); //持っていた場合、h3の次の要素を表示
        } else {
            $(this).next().slideUp(); //持っていなかった場合、h3の次の要素を非表示
        }
        $(this).toggleClass('active'); //activeクラスを追加または削除
    });
});

レスポンシブデザイン(main-20)

ぶーた作

画面幅を小さくしたからといって、jqueryの記述を変更する場所はないのでレスポンシブデザインは簡単でした!

@media screen and (max-width:800px) {
    .main-20 h3 {
        font-size: 0.9rem;
    }
    .main-20 h4 {
        font-size: 0.7rem;
        width: 30vw;
        margin-right: 47vw;
        padding-left: 0;
    }
}

以上でjqueryを使用したmain-20 は終わりです!

ぶーた

この画面が一番難しかったのだ!

残すはフッターや細かい場所だけなので、実質ほぼ終わりです!!

広告

よかったらシェアしてね!
  • URL Copied!
  • URL Copied!

コメント

コメントする

目次
閉じる