Vue.js Vue.js 作成したシングルページアプリケーションをviteでbuildしサブディレクトリにデプロイする
既定でdistディレクトリに出力されるファイル一式は、本番環境ではメインのURLにデプロイされることを想定し、cssファイルやjsファイルのアセットをメインのURLルートで参照しています。そのためサブディレクトリで公開したいページをbuildする際には、オプションを追加する必要がありました。
Vue.js 
HTML＆CSS マウスオーバーでアニメーションするグラデーションボーダー
マウスオーバーでテキストとボーダーのグラデーションがアニメーションするボタンを作成しました。ポイントは、マウスオーバーがはずれたら、アニメーションを停止し（初期位置に戻らない）、再びマウスオーバーで停止した箇所からアニメーションを再開するところです。
HTML＆CSS CSSカスタムプロパティとclampを利用してレスポンシブなフォントサイズ
指定した範囲で端末の横幅に比例してサイズを大きくするフォントの設定を、CSS変数とclampを利用して計算した時のメモ
フォントの最小値と最大値、フォント最小値の時の端末の横幅とフォント最大値の時の端末の横幅を変数に代入するため変更が容易です。
HTML＆CSS JavaScriptで座標を計算 SVGで星を作成
SVGで多角形を描画するpolygonタグのpoints属性の値（座標）を JavaScript で計算しています。それは2つの五角形の頂点で、五角形の外接円を元に計算できます。そのため、円の半径を変更すると星の大きさや角度も調整可能になります。
HTML＆CSS CSSで星柄の背景を作成 JavaScriptで五角形の座標を計算
CSSのグラデーションで星を作成。conic-gradient() の開始位置は五角形の頂点となるため、座標（％で指定）を JavaScript で計算しスタイルをあてています。星の大きさ（星の内側の五角形の外接円の半径による）や先端の角度も調整可能です。
HTML＆CSS CSSでアーガイル模様の背景を作成する方法
CSSの扇形グラデーションconic-gradient()と線形グラデーションlinear-gradient()でアーガイル模様を作成しています。菱型は角度が120度と60度です。背景模様の高さをJavaScriptで計算しています。
HTML＆CSS CSSで花のフォルムを作成し背景（アニメーション）にする
梅の花のようなフォルムをCSSで作成します。使用するのは、background-imageプロパティのグラデーション関数です。放射状グラデーションで円を花びらの5枚分と中心部分の1個分作成するだけですが、その中心点の座標を求めるのが一番の難関かもしれません。
HTML＆CSS ハートや四葉のクローバーをCSSで作成し背景アニメーションにする
ハートやクローバーの模様を、CSSのbackground-imageプロパティの値にグラデーション関数（ radial-gradient()等）を複数使用して作成します。出来上がった模様を繰り返し、背景が移動するアニメーションにもできます。
HTML＆CSS マウスオーバーでフタが開く3Dボックス（立方体）の作成方法
マウスオーバーすると一つの面（フタ）が開く３D空間上に配置された立方体の作成方法です。
面が二つに分かれていて両開きに開くものと、片開きのものがあります。
マウスオーバーでは、開く面をtransformプロパティを使用して回転します。
HTML＆CSS ブラウザやWEBページ内のスクロールバーをCSSでカスタマイズする方法
ブラウザのデフォルトのスクロールバーのデザインは、CSSの疑似要素 ::-webkit-scrollbar で変更可能です。カスタマイズしたスクロールバーを紹介しています。但し、この機能は標準のものではなく将来的に変更になる可能性があるようです。
jQuery 今日の年月日をスロット風アニメーションで表示 jQuery $.each()とfor()
Adobe XDの無料キットに数字をスロット風に回転して表示させるNumber counterというものがあったので、これを日付に変えて実装してみました。今日の日付を取得し、jQuery $.each()メソッドとfor()文でDOMに数字を追加します。
jQuery サムネイル画像をクリックしてふわっと画像を切り替える方法
サムネイル画像をクリックして、メイン画像をふわっと切り替える方法です。imgタグにsrc属性の値をセットしフェードインすると、ふわっとならなかったり、一瞬画像が見えてフェードインしたりすることがあります。対象要素を分けて実装します。