HTML＆CSS オブジェクトを要素とする配列について オブジェクトの特定のプロパティにreduceを実行
forEachの中でオブジェクトの特定のプロパティにreduceを実行するコードのメモです。sliceで元の配列の一部（現在のindexまでの）のコピーを作成します。背景色の色相（hslのhの値）をそれまでに出てきた要素の色相の値を平均したものにしています。
プログラミング
HTML＆CSS 
Vue.js Vue.js v-forで配置した要素をユーザー操作で順番を入れ替える
Vue.js v-forで配列を条件に要素を生成し表示しています。表示順を入れ替えるため、配列の順番を入れ替える関数を要素内のボタンのクリックイベントに登録しています。配列のメソッドsplice()を使用して配列の順番を。操作しています。
Vue.js Vue.js v-ifでCSSのサポート状況を条件に表示を切り替え
Vue.jsでCSSのサポート状況を条件に表示を切り替えるために、CSS.supports()関数を使用しました。mountedライフサイクルフックで、この関数を実行するメソッドを実行させています。指定したCSSの対応状況を論理値で返すため、Vue.jsの表示切替に使い勝手がよいと思います。
Vue.js Vue.js レスポンシブ対応ハンバーガーメニュー
ビューポートの幅が768px未満で、グローバルメニューがハンバーガーメニューになるヘッダーコンポーネント。v-showでハンバーガーメニューの表示切替を行います。リサイズ時のイベントハンドラをcreatedライフサイクルフックに登録します。
Vue.js Vue.js is属性でコンポーネントを切替え 動的クラスと固定クラスを付与してタブを作成
v-forでタブを出力する。。タブには共通のクラス、そのタブ用のクラス、アクティブになった時のクラスを付与する。タブによって表示するコンテンツはコンポーネントとし、is属性で出力する。
タブのコンテンツ表示はtransitionを使用する。
Vue.js Vue.js 作成したシングルページアプリケーションをviteでbuildしサブディレクトリにデプロイする
既定でdistディレクトリに出力されるファイル一式は、本番環境ではメインのURLにデプロイされることを想定し、cssファイルやjsファイルのアセットをメインのURLルートで参照しています。そのためサブディレクトリで公開したいページをbuildする際には、オプションを追加する必要がありました。
HTML＆CSS JavaScriptで座標を計算 SVGで星を作成
SVGで多角形を描画するpolygonタグのpoints属性の値（座標）を JavaScript で計算しています。それは2つの五角形の頂点で、五角形の外接円を元に計算できます。そのため、円の半径を変更すると星の大きさや角度も調整可能になります。
HTML＆CSS CSSで星柄の背景を作成 JavaScriptで五角形の座標を計算
CSSのグラデーションで星を作成。conic-gradient() の開始位置は五角形の頂点となるため、座標（％で指定）を JavaScript で計算しスタイルをあてています。星の大きさ（星の内側の五角形の外接円の半径による）や先端の角度も調整可能です。
jQuery 今日の年月日をスロット風アニメーションで表示 jQuery $.each()とfor()
Adobe XDの無料キットに数字をスロット風に回転して表示させるNumber counterというものがあったので、これを日付に変えて実装してみました。今日の日付を取得し、jQuery $.each()メソッドとfor()文でDOMに数字を追加します。
jQuery サムネイル画像をクリックしてふわっと画像を切り替える方法
サムネイル画像をクリックして、メイン画像をふわっと切り替える方法です。imgタグにsrc属性の値をセットしフェードインすると、ふわっとならなかったり、一瞬画像が見えてフェードインしたりすることがあります。対象要素を分けて実装します。
jQuery 文字を円形状に自動で並べ3D回転する（水平・垂直・斜め）方法 CSSとjQueryで実現
文字を円形に並べ3D回転する方法を紹介しています。jQueryで計算し文字を円形に配置する為、文字数による手計算は不要です。3D円形は水平、垂直、斜め方向のパターンがあります。3D上の手前文字と背面文字が重なり見えづらくならない工夫をしています。
jQuery 文字を円形や半円状に自動で並べる方法 CSSとjQueryで文字数による計算不要
テキストを円形に配置する方法を紹介します。テキストを1つずつspanタグで囲ったり、文字数を数え角度計算することなく、CSSとjQueryで自動で円または半円状に配置する方法です。円形に配置すれば回転アニメーションも可能になります。