WP-LOAD

9/7まで 最大30％OFF 初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

【無料】実務のスキルが身に付くコーディング教材（初心者編）

初心者編｜無料コーディング教材｜HTML・CSS・jQueryを実践で学ぶ

jQueryで動きのついたサイトへ

jQueryを初めて使う方は、次の記事に目を通してみてください。何ができるか・どのような場面で使うのか詳しく書かれています。

【初心者向け】jQueryとはどのようなものかを解説【導入例あり】

今回、jQueryを導入しているのは次の3か所です。

  1. メインビジュアルのコンテンツがじわっと出てくる動き
  2. スクロールするたびにコンテンツがふわっと表示される動き
  3. フッターの「TOPへ」を押すとゆっくりページの一番上へスクロールされる動き

まずは、それぞれデモサイトで動きを確認してください。

jQueryを導入

jQueryを使えるように準備を行います。

この記事では、jQuery 4.0.0をCDNから読み込みます。CDNを使うと、ライブラリ本体をダウンロードせずにjQueryを利用できます。

次のコードをbodyの閉じタグ（</body>）の直前に記述してください。先にjQuery本体を読み込み、その後でmain.jsを読み込みます。integrity属性は、CDNから取得したファイルが改ざんされていないかブラウザが確認するための値です。

  <!-- jQueryの読み込み -->
  <script
    src="https://code.jquery.com/jquery-4.0.0.min.js"
    integrity="sha384-fgGyf7Mo7DURSOMnOy7ed+dkq5Job205Gnzu6QIg0BOHKaqt4D76Dt8VlDCzcMHV"
    crossorigin="anonymous"
  ></script>
  <script src="./js/main.js"></script>
</body>

これで jQuery が使用できるようになりました！

jQueryの解説

メインビジュアルのフェードイン＋じわっと

メインビジュアルで使用しているフェードイン＋じわっとした動きを解説します。

完成したもの

// じわっとフェードイン
$(window).on('load', function (){
  $(".mainvisual .wrapper").addClass('blur');
});
/* じわっとフェードイン（jQuery用） */
.mainvisual .wrapper {
  opacity: 0;
  transition: all 1000ms;
  filter: blur(10px);
}
.mainvisual .wrapper.blur {
  opacity: 1;
  filter: blur(0);
}
<header class="header">
  <section class="mainvisual">
    <div class="wrapper">
      <div class="catchcopy">
        <h1>WP-LOAD</h1>
        <p>
          無料で基本を学べる<br />
          プログラミング学習サイト
        </p>
        <div class="button button__border">
          <a href="https://wp-load.in/">WP-LOADを見る</a>
        </div>
      </div>
      <img src="./images/mainvisual.svg" alt="パソコン作業のアイコン" />
    </div>
  </section>
</header>

jQueryを1行ずつ解説

$(window).on('load', function (){
});

$(window).on('load', function (){});を使うと、画像などを含むページ全体の読み込みが完了した後に、中の処理が実行されます。

JavaScriptを実行するタイミングにはいくつか種類があります。今回は、ページ全体の読み込み後に処理するため、この書き方を使います。

$(".mainvisual .wrapper").addClass('blur');

.mainvisual .wrapperに.addClass('blur');のメソッドでblurというクラス名を追加します。

まとめると、サイトの読み込みが完了したら.mainvisualの中の.wrapperにblurというクラスが追加されるという意味になります。

CSSを解説

CSSは「blur」というクラスが付く前とクラスが付いた後で記述が違います。

流れとしては、非表示 → ぼやけて表示 → はっきりと表示です。

次は、クラス「blur」が追加される前のCSSです。

/* じわっとフェードイン */
.mainvisual .wrapper {
  opacity: 0;
  transition: all 1000ms;
  filter: blur(10px);
}

クラス「blur」が追加された後の記述です。

.mainvisual .wrapper.blur {
  opacity: 1;
  filter: blur(0);
}

スクロールフェードイン

このスクロールフェードインは、印象を与えやすいため利用されることが多い動きです。スクロールするたびに、コンテンツがフェードインします。

完成したもの

// スクロールでフェードイン
$(window).on('scroll', function () { // スクロールするたびに処理を実行
  $(".fade-in").each(function () { // .fade-inに対して繰り返し処理を行う
    const topPosition = $(this).offset().top; // .fade-inからブラウザ上部までの距離を取得
    const scroll = $(window).scrollTop(); // スクロール量を取得
    const windowHeight = $(window).height(); // 表示中のブラウザの高さを取得
    if (scroll > topPosition - windowHeight) { // ブラウザに要素が表示された時
      $(this).addClass("scroll"); // .fade-inに.scrollを付与
    }
  });
});
$(window).trigger("scroll"); // リロード時にもフェードインを判定する
/* フェードイン（jQuery用） */
.fade-in {
  opacity: 0;
  transform: translateY(100px);
  /* 下から上へ移動する */
  transition: all 1500ms;
  /* アニメーションの時間 */
}
.scroll {
  opacity: 1;
  transform: translateY(0);
}

HTMLは「about」「attention」「writer」のクラスが付いている各sectionタグにfade-inというクラス名を追加しています。

<main class="main">
  <section class="about fade-in">
    <h2>WP-LOADについて</h2>
    <div class="content">
      <img
        src="./images/community.svg"
        alt="コミュニティ"
        class="content-image"
      />
      <div class="content-text">
        <h3>チームで運営しているコミュニティ</h3>
        <p>
          WP-LOADは複数人のWeb制作・プログラマーが集まってできているWebメディアです。<br />
          これからプログラミングを学びたい方や、既に実務で取り組まれている方でオンラインコミュニティを作り、チームで活動をしています。<br />
          チームで活動をすることで、それぞれの考え方や目線の違いを共有して情報を発信できることが特徴です。
        </p>
      </div>
    </div>
    <div class="content">
      <img
        src="./images/programming.svg"
        alt="プログラミング"
        class="content-image"
      />
      <div class="content-text">
        <h3>プログラミング初学者向け</h3>
        <p>
          WP-LOADはプログラミングを学びたい初学者向けのWebメディアです。<br />
          HTML/CSS/jQuery/WordPressを主に解説しています。その他、Gitやネットワーク、ブラウザの仕組みなど、基礎から実務に必要な知識まで幅広く学ぶことができます。コーディング教材も用意しているので、ぜひチャレンジしてみてください。<br />
          2019年9月より運営を開始し、現在もデザインリニューアルやページ高速化、SEO強化を定期的に行っています。
        </p>
      </div>
    </div>
  </section>

  <section class="attention fade-in">
    <div class="wrapper">
      <h2>このLPについて</h2>
      <h3>ポートフォリオに掲載可能なコーディング練習用教材です</h3>
      <p>
        このサイトはHTML/CSS、jQueryを勉強中のプログラミング初学者に向けて制作しています。<br />
        jQueryは初学者でも導入しやすいスムーススクロール、フェードインを採用しています。実践に近いコーディングが学べるのでぜひチャレンジしてみてください！
        ポートフォリオサイトへ実績として掲載可能です。模写したものをポートフォリオとして使用してもOKです。
      </p>
      <p>
        デザインデータ、コーディングの手順や解説については次のURLからご確認ください。<br />
        <a href="https://wp-load.in/html-css/teaching-materials"
          >https://wp-load.in/html-css/teaching-materials</a
        >
      </p>
      <h3>※注意事項</h3>
      <p>
        XDデータのデザインデータにあるイラストに関してはフリー素材を使用しているため、当サイトが保有するものではありません。使用する際はご注意ください。<br />
        商用利用としては可能ですが、販売・再配布は禁止です。
      </p>
    </div>
  </section>

  <section class="writer fade-in">
    <h2>ライターさん募集中！</h2>
    <div class="wrapper">
      <img src="./images/writer.svg" alt="ライター" class="content-image" />
      <div class="content-text">
        <p>
          WP-LOADではWeb制作・プログラミング記事を執筆していただけるライターさんを募集しています。興味がある方はお問い合わせフォームよりお気軽にお問い合わせください。
        </p>
        <dl>
          <dt>【必須スキル】</dt>
          <dd>・ライティング経験がある</dd>
          <dd>・ワードプレスのテーマ開発経験がある</dd>
        </dl>
        <p>ライティング・Web制作について現在勉強中の方も大歓迎です！</p>
        <div class="button button__main">
          <a href="https://wp-load.in/contact/">お問い合わせ</a>
        </div>
      </div>
    </div>
  </section>
</main>

jQueryを1行ずつ解説

$(window).on('scroll', function () { // スクロールするたびにJavaScriptが実行される
});

ブラウザをスクロールすると、中の処理が実行されます。

const topPosition = $(this).offset().top; // .fade-inからブラウザ上部までの距離を取得

ここでの「$(this)」は、eachメソッドで現在処理している.fade-in要素を指します。

「.fade-in」からブラウザの一番上までの距離を「topPosition」という変数に代入します。

const scroll = $(window).scrollTop(); // スクロール量を取得

ブラウザ上でスクロールした量を「scroll」という変数に代入します。

const windowHeight = $(window).height(); // 表示中のブラウザの高さを取得

表示中のブラウザの高さの値を「windowHeight」という変数に代入します。

 if (scroll > topPosition - windowHeight) { // ブラウザに要素が表示された時
        $(this).addClass("scroll"); // .fade-inに.scrollを付与
}

ifは条件分岐です。プログラミングっぽくなってきましたね！

「要素からブラウザの一番上までの距離　ー　表示中のブラウザの高さ」よりスクロール量が多い時に「.fade-in」のクラスがついている要素に「scroll」というクラスを追加します。

該当しないときは何も起こりません。

CSSを解説

「scroll」という新しく追加したクラス名にCSSを当てることでフェードインが完成します。流れとしては、要素を非表示 → スクロールに応じて表示。

要素が見える前のCSS（非表示の状態）です。

.fade-in {
  opacity: 0;
  transform: translateY(100px); /* 下から上へ移動する */
  transition: all 1500ms;  /* アニメーションの時間 */
}

スクロールに応じて表示するCSSです。

.scroll {
  opacity: 1;
  transform: translateY(0);
}

HTMLにクラス名を新しく追加する

動かしたい要素に.fade-inを追加します。

今回は各コンテンツごとにフェードインの動きをつけたいので、

  • WP-LOADについて（.about）
  • このLPについて（.attention）
  • ライター募集中！（.writer）

に「fade-in」というクラスを追記します。

これでjQueryのフェードイン実装は完成です！

スムーススクロール

スムーススクロールとは、ゆっくりとページ内リンク先へ移動するという動きです。

今回はフッターにある「TOPへ」ボタンに実装して、ゆっくりとTOPまで移動させるようにします。

完成したもの

// スムーススクロール
const pageTop = $("#pagetop");// #pagetopの値を取得
pageTop.on("click", function () {// クリック時に処理を実行
  $("body, html").animate({
    scrollTop: 0// スクロール位置はページの一番上まで
  }, 500);// 500msかけて遷移する
  return false;
});
<div id="pagetop" class="button__to-top">
  <a href="/">
    <img src="./images/arrow.svg" alt="トップへ戻る" />
    <span>TOPへ</span>
  </a>
</div>
/* トップへ戻るボタン */
.button__to-top {
  position: absolute;
  right: 20px;
  bottom: 20px;
  text-align: center;
}
.button__to-top a {
  display: inline-block;
  padding: 20px;
  border-radius: 50% 50%;
  text-decoration: none;
  background: transparent linear-gradient(230deg, #37d5d6 0%, #5d55e8 100%) 0%
    0%;
  box-shadow: 0px 0px 30px #4aa7ff80;
}
.button__to-top span {
  color: #ffffff;
  display: block;
  font-size: 12px;
  font-weight: bold;
}

jQueryを1行ずつ解説

変数名を「pageTop」と宣言し、「#pagetop」の値を格納します。

const pageTop = $("#pagetop");// #pagetopの値を取得

「#pagetop」がクリックされたとき、中の処理が実行されます。

pageTop.on("click", function () {// クリック時に処理を実行

サイトの一番上まで500ms（0.5秒）かけてスクロールします。

  $("body, html").animate({
    scrollTop: 0// スクロール位置はページの一番上まで
  }, 500);// 500msかけて遷移する

return false;は、リンク本来の移動を止め、クリック後にページが切り替わらないようにする記述です。

return false;

jQueryが動かないとき

jQueryが動かないときは、次の原因が考えられます。1つずつ確認してください。

  • main.jsへのパスが間違っている
  • scriptタグのリンクが間違っている・記述場所が間違っている
  • 構文が間違っている（全角の文字や括弧などが足りていないなど）

コーディングが完成しました！

完成した方はデモサイトやデザインと見比べてみましょう！

https://wp-load.in/lp/

おそらく最初は少し変な動きがあったり、デザインとは違う部分が出てくると思いますが、余力があれば繰り返し修正してみてください。

今回はコーディング教材なので、まずは形となるところまでできればOKですが、実務ではデザインデータ通りにコーディングすることが求められます。

本格的にWordPressエンジニアやデザイナーになりたい！という方であれば、デザイン通りにコーディングする癖をつけることが大切です。（大変ですけどね！）

最後に

最後までお疲れ様でした。難しい部分もあったと思いますが、ここまでできたらコーディングのスキルは着実に上がっています。

作業中につまずいたときは、エラーメッセージや使っているプロパティ名で検索してみてください。原因を切り分け、自分で解決方法を探すことも実務で役立つスキルです。

ここまでWP-LOAD LPのコーディング教材を完走された方は、X（旧Twitter）などのSNSで感想をシェアしていただけるとうれしいです！

それでは！

ページ: 1 2 3 4