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

【毎日コツコツ】デイトラDay21 jQueyの実践課題!今までの学習成果は!?

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

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

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

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

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

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

タック
タック

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

Web制作を学ぶ理由

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

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

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

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

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

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

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

この講義と次の講義はこれまで学んできたjQueryの実践となります。

デイトラから出題された内容を自分の力で解決するといった内容です。

タック
タック

ふ…不安しかないょΣ(´∀`;)ブルブル

それでは早速ですが課題を実装していきましょう!

この内容はこれからデイトラが学習を進める方にとってはネタバレとなりますので、自分が実装したあとの見比べ程度に使ってください。(僕が間違っている可能性は十分あるのでご注意を!)

【デイトラ】ドロワーメニューを実装しよう!

HTMLとCSSで書き上げたSweet Delightを使って今回jQueryを実装します。

【課題はコチラ】

  • menuをクリックすると
  • 新発売・おすすめ・期間限定メニューを表示
  • 開閉時間指定なし

このようになっています。

以下の赤枠「menu」にドロワーメニューを付ける課題です。

タック
タック

早速作っていきますね。(会話形式でここは実装してみます)

Baby panda
Baby panda

まずはどこに注目すればいいだろうね?

タック
タック

まずはHTMLじゃないかな!どのセクションがmenuに該当するか見ないとね!

タック
タック

たしか、headerの中で定義した気がするんだよね。

HTML
 <header class="header">
      <div class="header-inner">
        <h1 class="header-logo"><img src="./img/logo.svg" alt="Sweet Delight" /></h1>
       
        <nav class="header-nav">
          <ul class="header-nav-list">
            <li class="header-nav-item">
              <a href="#about" class="header-nav-link">About</a>
            </li>
            <li class="header-nav-item">
              <a href="#menu" class="header-nav-link">Menu</a>
            </li>
            <li class="header-nav-item">
              <a href="#shop" class="header-nav-link">Shop</a>
            </li>
          </ul>
        </nav>

      </div>
    </header>
Baby panda
Baby panda

おお!本当だ!でもここからどうしたらいいのかな?

タック
タック

menuがクリックした時にドロワーメニューが必要なんだよね….だからクリックアクション(jQuery)とドロワーメニューのリスト(HTML)がまず必要な気がする。

HTML
 <header class="header">
      <div class="header-inner">
        <h1 class="header-logo"><img src="./img/logo.svg" alt="Sweet Delight" /></h1>
        <nav class="header-nav">
          <ul class="header-nav-list">
            <li class="header-nav-item">
              <a href="#about" class="header-nav-link">About</a>
            </li>
            <li class="header-nav-item header-nav-toggle">
              <a href="#" class="header-nav-link" id="js-toggle">Menu</a>
                <!-- ドロワーメニュー -->
                <ul class="header-nav-sub-list">
                  <li class="header-nav-sub-item">新発売</li>
                  <li class="header-nav-sub-item">おすすめ</li>
                  <li class="header-nav-sub-item">期間限定</li>
                </ul>
            </li>
            <li class="header-nav-item">
              <a href="#shop" class="header-nav-link">Shop</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
タック
タック

ドロワーメニューの部分の記述を追加したよ。

Baby panda
Baby panda

class名の追加とID名の追加しているのもポイントだね!

タック
タック

HTMLを書き終えたので、次はCSSで装飾していこう!

CSS
/* ドロワー */
.header-nav-item{
  color: #f1eee4;
}
.header-nav-toggle{
  position: relative;

}
.header-nav-sub-list{

position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: #00000045;
 padding: 10px;
 border: 1px solid #fff;
 white-space:nowrap;
 display: none;
}
  • position: relative: 要素を相対位置に設定します。相対位置を設定すると、子要素の絶対位置指定(position: absolute)に対して基準となる位置が設定されます。このクラスはドロワーメニューをトグル(開閉)するボタンやリンクに適用されることが多いです。
  • position: absolute: 親要素(position: relativeが設定されている)の基準に対して絶対位置に配置されます。
  • top: 100%: 親要素の下端に配置されます。親要素の高さの100%の位置です。
  • left: 50%: 親要素の左端から50%の位置に配置されます。
  • transform: translateX(-50%): 要素を左に50%移動させます。これにより、要素の左端が親要素の中心に位置するように調整されます(要素が中央に揃えられる)。
  • background-color: #00000045: 背景色を半透明の黒(45%の透明度)に設定します。
  • padding: 10px: 内側の余白を10ピクセルに設定します。
  • border: 1px solid #fff: 白い1ピクセルの実線の枠を設定します。
  • white-space: nowrap: テキストの改行を防ぎ、一行に収めます。リスト項目が改行されないようにします。
  • display: none: 初期状態では要素を非表示にします。この設定により、ドロワーメニューが初期状態で見えなくなり、JavaScript(例えば、slideToggle)で表示・非表示を切り替えることができます。

このCSSコードは、ドロワーメニューの項目、トグルボタン、サブリストをスタイル設定しています。header-nav-itemはメニューの項目のテキスト色を設定し、header-nav-toggleはトグルボタンを相対位置に設定することでサブリストの絶対位置指定の基準とします。header-nav-sub-listは、ドロワーメニューのサブリストを絶対位置に設定し、初期状態では非表示にして、表示時にはスタイルが適用されるようにします。

タック
タック

装飾が完了したのでボタンクリックした時に表示・非表示するアニメーションをつけていきます。

Baby panda
Baby panda

開閉するブロックのdisplay: noneは非表示しておこうね

タック
タック

jQueryライブラリを読み込むための記述とjQueryを記述します

HTML
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="../JS/script.js"></script>
jQuery
jQuery("#js-toggle").on("click",function(){
jQuery(".header-nav-sub-list").slideToggle();

});
  • jQuery("#js-toggle"): IDがjs-toggleの要素を選択します。
  • .on("click", function() {...}): その要素にクリックイベントリスナーを追加します。
  • jQuery(".header-nav-sub-list").slideToggle(): クラスheader-nav-sub-listを持つ要素の表示・非表示をスライド効果とともに切り替えます。
タック
タック

これで一通りの記述は完成!

Baby panda
Baby panda

1つ目の課題は完了だね!お疲れ様でした。

Baby panda
Baby panda

少しブレイクタイムを取って次の課題に進もう!

【デイトラ】トップへ戻るボタンを実装しよう

次の実装もjQueryを使ったアニメーション作成です。

  • トップから80pxスクロールしたら
  • 0.3秒かけて
  • フェードイン・フェードアウトで表示・非表示
  • 表示している間はボタン右下に固定
  • ボタンを押したら0.5秒かけてトップページへ戻る
タック
タック

いや、ちょっと待ってΣ(´∀`;)難しくない?

Baby panda
Baby panda

初めてだとそうなるよね。でもどのWebページでも実装されているものなのでしっかり覚えよう

タック
タック

じゃあ前の課題同様でHTMLから書き上げてきましょう

赤枠(画面右下)に「TOP」と書いて丸いボタンを記述します。

HTML
 <!-- TOPボタン -->
    <section class="top-btn" id="js-top-btn">

        <p class="top-btn-nav-text">TOP</p>
    </section>
タック
タック

HTMLを作ったけどもっと良い書き方はありそう…とりあえず進みます。

CSS
.top-btn{
 
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #ffffff;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: solid 1.5px #3c301e;
  display: none;

}

.top-btn-nav-text{
 margin-top: 17px;
 margin-left: 16%;
 

}
タック
タック

なんとかボタンは作ったけど、.top-btn-nav-textの記述がもっといいのがありそう…無理やり位置調整してる感じなんだよね。

Baby panda
Baby panda

ん〜なんとも言えない。w

Baby panda
Baby panda

デイトラ生の方はどんな記述になったんだろうね?

タック
タック

よかったらコメント欄で教えていただけたら嬉しいです。

タック
タック

次はjQueryの記述をしていきます。HTMLにjQueryライブラリを読み込む記述をするのを忘れないでね。

jQuery

jQuery(window).scroll(function(){
    if(jQuery(window).scrollTop()>80)
        {jQuery("#js-top-btn").fadeIn(300);}

    else
    {
        jQuery("#js-top-btn").fadeOut(300);
    }
})
  • jQuery(window).scroll(function(){ ... }):スクロールするたびにこの関数内のコードが実行されます
  • if(jQuery(window).scrollTop() > 80):スクロール一が80pxより大きい場合「true(真)」となります
  • Query("#js-top-btn").fadeIn(300);:この要素を0.3秒かけてフェードインします
  • else { jQuery("#js-top-btn").fadeOut(300); }:それ以外の場合(80pxより小さい場合)0.3秒かけてフェードアウトします。
タック
タック

表示されることを確認できたので、次はボタン操作した時に画面の上部に移動するアニメーションを付けていきます。

jQuery
jQuery("#js-top-btn").on("click",function(){
    jQuery("html,body").animate({
        scrollTop:0},500);
    })
  • jQuery("html, body") :html および body 要素の両方を選択することで、さまざまなブラウザの動作に対応します
  • .animate({ scrollTop: 0 }, 500);:スクロール位置を0にアニメーションさせることを指定しています。これは、ページの一番上(トップ)にスクロールすることを意味します。
  • 500:アニメーションの持続時間をミリ秒(この場合は0.5秒)で指定しています
TOPボタンをクリック
上部にスクロールされてTOPボタンは消える
タック
タック

これで完成!なんとか実装できました。

Baby panda
Baby panda

お疲れ様でした♫

Baby panda
Baby panda

今回の講義はこれまでですが、次のDay22でもjQueryの実装があるので頑張ってね。

【デイトラWeb制作】ドロワーメニューを実装しよう!まとめ

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

記事まとめ
  • ドロワーメニューの実装
  • ボタン作成とクリックで画面TOPまでスクロール

といったWebサイトでよくみられるもので、コーディングをしていくうえでは避けては通れない内容でした。

僕はこの講義で多くの時間を使いましたが皆様はどうだったでしょうか?

よかったらコメントに「感想、完了までの時間」などいろいろ教えていただけたら幸いです。これからブログを見てくれた人の参考にもなるかと思います。

それでは今回の講義は以上となります。次の講義では、画像クリックしたときのアニメーションの実装です。

タック
タック

今回のように諦めず完成させたいと思います。

コメントを残す

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

CAPTCHA