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

  <!-- jQueryの読み込み -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="./js/main.js"></script>
</body>

// じわっとフェードイン
$(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>

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

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

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

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

// スクロールでフェードイン
$(window).on('scroll', function () { // スクロールする度にjsが発火
  $(".fade-in").each(function () { // .fade-inに対して繰り返し処理を行う
    let topPosition = $(this).offset().top; // .fade-inからブラウザ上部までの距離を取得
    let scroll = $(window).scrollTop(); // スクロール量を取得
    let windowHeight = $(window).height(); // 表示中のブラウザの高さを取得
    if (scroll > topPosition - windowHeight) { // ブラウザに要素が表示された時
      $(this).addClass("scroll"); // .fade-inに.scrollを付与
    }
  });
});
$(window).scroll(); // リロードしてもフェードインが行われる

/* フェードイン（jQuery用） */
.fade-in {
  opacity: 0;
  transform: translateY(100px);
  /* 上に動くに動く */
  transition: all 1500ms;
  /* アニメーションの時間 */
}
.scroll {
  opacity: 1;
  transform: translateY(0);
}

<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月より運営を開始して、現在（2021年11月）もデザインリニューアルやページ高速化、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/teaching-materials"
          >https://wp-load.in/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="/">お問い合わせ</a>
        </div>
      </div>
    </div>
  </section>
</main>

$(window).on('scroll', function () {　// スクロールする度にjsが発火
});

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

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

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

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

.fade-in {
  opacity: 0;
  transform: translateY(100px);/* 上に動くに動く */
  transition: all 1500ms;  /* アニメーションの時間 */
}

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

// スムーススクロール
let pageTop = $("#pagetop");// #pagetopの値を取得
pageTop.on("click", function () {// クリックするとjsが発火
  $("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;
}

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

pageTop.on("click", function () {// クリックするとjQueryが発火

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

return false;