はじめに Web制作の学習で使用した無料サイト・サービスの自分用メモ 随時更新☺ フロントエンド Progate 言わずとしれたサービス jsFiddle ブラウザ上でHTML/CSS/JavaScriptのコード実装と動作チェックができる JavaScrip実装時に、()の付け忘れとかあるとエラー出してくれるから超便利◎ VSCodeの代わりに使える!(^^)! 仕事ですぐに使えるTypeScript フューチャー株式会社（Future Corporation）が公開してるドキュメント サーバーサイド・API Talend API Tester - Free Edition Chromeブラウザの拡張機能で、簡単にAPIのGET/POSTリクエストが送信できる。 JSON Server JSONを返すだけのサーバー API作成前にサクっとJSONレスポンス～画面に表示するところを作りたいときに使った DB Airtable Googleスプレッドシートっぽく使える簡易データベース DBにデータ登録できるフォームやAPIがデフォルトで準備されていて超便利◎ 参考サイト ● Next.js で Airtable を簡易データベースとして使ってみるよ

目的 画像や文字が徐々に出現したり消えたりする、フェードイン・フェードアウト機能をCSSとJavaScriptでなるべく簡単に実装します。 実装 index.html <div class="img"> <img id="ghorst" class="ghorst" src="obake.png"> </div> <button id="hide-btn">いないいな〜い</button> <button id="appear-btn">ばぁ！</button> stylesheet.css /* アニメーションの設定 */ .ghorst { transition: opacity 3s; /* opacity要素(不透明度)の変更を3秒間かけて行う */ } script.js // 各要素を取得 const ghorst = document.getElementById('ghorst'); const hideBtn = document.getElementById('hide-btn'); const appearBtn = document.getElementById('appear-btn'); // 画像を透明にする処理 const ghorstHide = () => { ghorst.style.opacity = 0; // 画像要素のopacityプロパティの値を0(透明)にする }; // 画像を不透明にする処理 const ghorstAppear = () => { ghorst.style.opacity = 1; // 画像要素のopacityプロパティの値を1(不透明)にする }; // 各ボタン要素がクリックされた時の処理を指定 hideBtn.addEventListener('click', ghorstHide); appearBtn.addEventListener('click', ghorstAppear); 使用　プロパティ・メソッド CSSプロパティ　 意味 参考サイト opacity 要素の不透明度を設定 MDN Web Docs transition 要素のアニメーションを定義する MDN Web Docs JavaScriptプロパティ・メソッド 意味 参考サイト getElementById() HTMLのidから要素を取得する MDN Web Docs style 要素のスタイルを変更する MDN Web Docs addEventListener() 要素にイベントが起こったときに実行される処理を指定 MDN Web Docs 解説 CSSプロパティのopacityで不透明度が指定できるため、transitionでopacityの値が変更されたときの変化アニメーションを定義します。 JavaScriptでopacityの値を変更することで、transitionで定義されたアニメーションが実行されます。 opacity 要素の不透明度を指定します。 0〜1の間で指定し、 0: 透明 1: 不透明 になっています。例えば、opacity: 0.5;と指定すると、その要素は半透明になります。 transition 要素の値が変更された際の、アニメーションの動きを定義します。transitonは、以下のの4つのプロパティを一括で指定できます(半角区切り)。 複数指定する場合はカンマ,で区切ります。 値の変更方法は、JavaScriptのclassListやstyle、CSSの:hoverなど。 プロパティ 意味 参考サイト transition-property 効果を適用するプロパティの指定(propaty: プロパティ) MDN Web Docs transition-duration アニメーションが完了するまでの時間を指定(duration: 持続・継続・間隔） MDN Web Docs transition-timing-function 変化の速度とタイミングを指定(timing function: タイミング機能・時間調整機能) MDN Web Docs transition-delay アニメーションが始まるまでの時間を指定(delay: 遅延・先延ばし) MDN Web Docs .class { transition: 対象プロパティ 完了までの時間 変化の速度 開始までの時間; } /* 複数指定 */ .class { transition: プロパティA 完了時間 変化速度 開始時間, プロパティB 完了時間 変化速度 開始時間, プロパティC 完了時間 変化速度 開始時間; } transition-property 変化させるCSSのプロパティを指定します。 フェードイン・フェードアウトでは、opacityを指定しています。 指定をallとすることで、全てのプロパティを同時に指定することもできます。 transition-duration アニメーションが完了するまでの時間の指定ができます。 s: 秒 ms: ミリ秒 の二つで指定できます。 今回は3sとすることで、3秒でフェードイン・フェードアウトをしています。 transition-timing-function アニメーションの変化の速度を指定できます。 値 意味 ease 滑らか(初期値) linear 一定速度 ease-in ゆっくり始まる ease-out ゆっくり終わる ease-in-out ゆっくり始まり、ゆっくり終わる cubic-bezier 3次ベジェ曲線を数値で指定(x1, x2, y1, y2) ease .car { transition: 4s ease; /* 4秒で滑らかに */ } linear .car { transition: 4s linear; /* 4秒間一定速度で */ } ease-in .car { transition: 4s ease-in; /* 4秒でゆっくり始まる */ } ease-out .car { transition: 4s ease-out; /* 4秒でゆっくり終わる */ } ease-in-out .car { transition: 4s ease-in-out; /* 4秒でゆっくり始まりゆっくり終わる */ } cubic-bezier .car { transition: 4s cubic-bezier(0, 0.76, 1, 0.23); /* 4秒で真ん中ゆっくり */ } 参考サイト: Cubic Bezier(ジェネレータ) transition-delay アニメーションの開始時間を指定できます。 s: 秒 ms: ミリ秒 の二つで指定できます。 .car { transition: 4s 3s; /* スタートを押してから3秒後に4秒間で移動 */ } style JavaScriptでCSSプロパティの値を取得・変更する際に使用します。 今回は、 const ghorst = document.getElementById('ghorst'); で、画像の要素を取得し、 ghorst.style.opacity = 0; とすることで、　opacityの値を変更しています。 この変更にtransitionプロパティが反応し、アニメーションが実行されます。 注意点 簡単にフェードイン・フェードアウトを実装できるtransitionですが、比較的新しい技術のため、古いブラウザ(IE9など)では動作しません。 対応ブラウザはDOM Web Docs(transition)や、Can I use (transition?)などを参照してください。 プラス さらに動きをつけてみました。 <!-- HTMLは変更ありません --> <div class="img"> <img id="ghorst" class="ghorst" src="obake.png"> </div> <button id="hide-btn">いないいな〜い</button> <button id="appear-btn">ばぁ！</button> /* レイアウトが崩れないように画像の場所取り */ .img { width: 300px; height: 320px; } /* 画像に高さ・幅を指定 */ .ghorst { width: 300px; height: 320px; transition: all 3s; /* width, height, opacityをまとめて指定するため、プロパティを　all　に変更 */ } /* フェードアウトするときの値 */ .hide { width: 0; height: 0; opacity: 0; } /* フェードインするときの値 */ .appear { width: 300px; height: 320px; opacity: 1; } const ghorst = document.getElementById('ghorst'); const hideBtn = document.getElementById('hide-btn'); const appear = document.getElementById('appear-btn'); // クラスを付け替えることで、まとめて値を変更 const ghorstHide = () => { ghorst.classList.remove('appear'); ghorst.classList.add('hide'); }; const ghorstAppear = () => { ghorst.classList.remove('hide'); ghorst.classList.add('appear'); }; hideBtn.addEventListener('click', ghorstHide); appear.addEventListener('click', ghorstAppear); classList 要素のクラスを操作することができるプロパティです。 remove()メソッドを使用することで、クラスを削除し、add()メソッドでクラスを追加しています。 MDN Web Docs ご覧いただき、ありがとうございました。