HTML

Webデザイン

【JavaScript🔰】デバッグconsole.logで”is-active見えない!”対処法

私がWeb制作でハマったことをまとめています。JavaScriptでis-activeを付けたり外したりするとき、デバッグで確認する際起きた事とその対処法。現象:タブ1の削除前にはis-activeクラスがついているが見えないconsole...
Webデザイン

【JavaScript🔰】混乱する()と関数の関係+アロー関数

私がWeb制作でハマったことをまとめています。JavaScriptでハマった()の関係とアロー関数。① 関数を代入 const hello = () => {...} 関数を作って変数に入れる→アロー関数: 関数を作って変数に入れる② 関数...
Webデザイン

【javascript・gsap】3枚の画像を切り替える方法(3本ライン)

私がWebサイト制作でハマった事や良かった方法などを備忘録としてまとめています。HTML <!-- top-kv Start --> <div class="top-kv js-flip"> <div class="js-flip-kv j...
Webデザイン

【GSAP/JavaScript/SCSS🔰】画像を重ねている時に、下の画像を確認するデバッグで有効なコード

私がWebサイト制作でハマった事や良かった方法などを備忘録としてまとめています。有効なコード画像を重ねている状態で、下の画像があるかどうかを確認するのにいいコードopacity: 0これを上に重なっている画像のCSSに入れてあげると、ちゃん...
Webデザイン

【javascript・gsap】画像の切り替える方法(3本ライン)

私がWebサイト制作でハマった事や良かった方法などを備忘録としてまとめています。HTML <div class="top-kv js-flip"> <!-- 上 --> <img src="/img/bg-top-kv1.png" widt...
Webデザイン

【JavaScript・GSAP🔰】デバッグ中JavaScript内でSCSSの情報を知りたい時の方法

サイトをかっこよく動かしたい!と言った時にGSAPを使って動かしているがうまくいかない時の検証デバッグで、アニメーション途中とアニメーション後の時の使い分けが勉強になったのでここに残す。JavaScriptでSCSSの情報を知りたい場合の方...
Webデザイン

【JavaScript・GSAP🔰】アニメーションちゃんと動いている?検証するプログラムの使い分け

サイトをかっこよく動かしたい!と言った時にGSAPを使って動かしているがうまくいかない時の検証デバッグで、アニメーション途中とアニメーション後の時の使い分けが勉強になったのでここに残す。プログラム途中のコード onStart: () => ...
Webデザイン

【HTML・CSS・JavaScript🔰】HTML・CSS・JavaScriptって何がどう違う?家に例えるとわかりやすい!

Webサイトを作るとき、HTMLとCSS、javascriptという言語が登場する。(ここに+PHP)とにかくこれが最初わかりづらかった。がjavascriptまでたどり着いて気づいた。家だと…HTML:家の構造・骨組み柱、部屋、階段、ドア...
Webデザイン

【HTML🔰】問い合わせフォームで使うlabelのfor、inputのid・nameで必ず一致させないといけないのは?

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。forとid。紐づける役割がある <label for="name">名前(担当者)</label> <input type="text" id="name" na...
Webデザイン

【HTML🔰】sectionタグいつ使う?divタグじゃなダメなの?

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。divでも動く。でもsectionを使い分けることで意味を持たせられるTOP以下のコンテンツにAbout-Service-Q&A-Contactという構成のTOPペ...