Webデザイン 【JavaScript・GSAP🔰】画像の切り替え3本ライン（上下：左から右へ、中：右から左へ）するコード
サイトをかっこよく動かしたい！これがやりたくて、勉強したJavascript。今回は、画像を切り替える方法。※gsap.min.js、ScrollTrigger.min.jsは事前に設定（該当の場所にファイルに格納とHTMLで指定すること）...
Webデザイン
Webデザイン 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ペ...
Webデザイン 【SCSS/CSS🔰】「アイコン＋タイトル」の高さを合わせるにはFlex＋Transform！
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。アイコン＋タイトルで高さが合っていない場合アイコン＋タイトルっておしゃれなんだけれど、アイコンの高さと文字の高さが合っていない時がある。その場合の対処法。まずは、通...
Webデザイン 【SCSS/CSS🔰】timeタグ右寄せできない！
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。timeタグはインライン要素<time datetime="2026-08-11" class="top-blog-date">2026/08/11</time>こ...
Webデザイン 【HTML🔰】ブログ記事でaタグはarticleタグの外？中？どっちに書くの？
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。結論：articleタグの中にaタグ<article> <img src="..." alt="..."> <h2>記事タイトル</h2></article>このよ...
Webデザイン 【SCSS/CSS🔰】paddingでボタンを作る時の注意
ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。paddingでボタン作る時のメリット 文字の数が違うものでも、自動的に幅が調整される。display:flex;で作らず、display: inline-flex...