CSS

CSSだけでsvgファイルの色を変更する方法

Web制作をしていると「このsvgファイルの別の色を用意したい」という場合があります。 よくインラインsvgをCSSで変える方法が紹介...
JavaScript

【Nuxt3×Firebase v9】.envでステージングと本番環境を分けて開発・hostingする方法

今回はNuxt3とFirebase v9の環境で、Firebaseの環境変数を.envで開発・本番でそれぞれ分けて使用し、ホスティングする方...
JavaScript

JavaScriptでオブジェクトをjsonとしてダウンロードする方法

今回はJavaScriptでオブジェクトをjsonファイルとしてダウンロードする方法を紹介します。 オブジェクトをjsonとしてダ...
JavaScript

Vueでaタグに@clickイベントを当てた時のページ遷移を無効化する方法

今回はVueでaタグに@clickイベントを設定する時にhrefの遷移先に遷移してしまう処理を無効化する方法を紹介します。 結...
JavaScript

Cloud Storageから画像のURLを取得する方法

今回はFirebaseのCloud Storageにアップしてある画像のURLを取得してページに表示する方法を解説します。 Clo...
JavaScript

Cloud Storageに画像をアップロードする処理の書き方を解説

今回はFirebaseのCloud Storageに画像をアップロードする処理の書き方を解説します。 フロント側の処理で「ボタンを押し...
JavaScript

JavaScriptでinput type=”file”で画像をアップした際にプレビューを表示する方法

今回は<input type="file">をクリックした際にアップした画像をそのまま表示するプレビュー的な機能の作り方を解説し...
JavaScript

Firestore v9のデータ(コレクション)をmap()で返して関数化する方法

firestoreからコレクションを取得する際、forEach()のループ内でデータにアクセスする方法はありますが、map()で関数に分けで...
JavaScript

【Firestore】TypeError: 〇〇.toDate is not a functionの時に確認したいこと

今回はfirestoreからデータを取得する際、TypeError: 〇〇.toDate is not a functionというエラーが表...
WordPress

All-in-One WP Migrationでトップページ以外が404で見られない時の対処法

All-in-One WP Migrationでサイトを移行した際、トップページ以外が404エラーで見られないという現象が起きることがありま...
WordPress

Contact Form 7で送信処理をキャンセルして任意の処理で止める方法

今回はContact Form 7で送信ボタンをクリックしたときの処理をキャンセルして任意の処理で止める方法を解説します。 送信前に任...
JavaScript

JavaScriptで「01」のように数値の桁数を合わせる方法(ゼロパディング)

今回はJavaScriptで「01」のように数値の桁数を合わせる方法(ゼロパディング)を解説します。 桁数を合わせるゼロパディング...
Vue

Vueの$emitで複数の値を渡す方法

今回はVueの$emitの引数に複数の値を渡して送る方法を解説します。 やり方は以下の2つです。 $emitの引数に複数...
Vue

vue-slickで特定の任意のスライドに移動する方法(slickGoTo的な)

今回はvue-slickでクリック時に特定の任意のスライドに移動できる機能(slickGoTo的なやつ)の作り方を紹介します。普段スライダー...
JavaScript

【JavaScript】exceljsでExcel/CSV両方で出力できる機能を実装する

今回はJavaScriptでExcel/CSV両方出力できる機能を実装する方法を解説します。 ExcelだけやCSVだけならライブラリ...
JavaScript

【jQuery】別のページから遷移した時にアコーディオンを開く方法

今回は別のページから遷移した時にそのアコーディオンを開いた状態にしておく方法を紹介します。 今回やりたいこと 例えば「https...
JavaScript

【jQuery】絶対パスでもスムーススクロールする方法

今回はスムーススクロールを絶対パスでも処理できるようにする方法を解説します。 よく見かける方法だと「#」で始まっている内部リンクしか処...
CSS

【CSS】flexの子要素をheight: 100%;にしつつalign-items: center;にしたい場合のやり方

display: flex;とalign-items: center;を指定すると子要素は縦に揃いますが、height: 100%;を指定し...
JavaScript

郵便番号から住所を自動で入力!ajaxzip3の使い方!

今回は郵便番号を入力しただけで住所を自動で入力してくれるライブラリ「ajaxzip3」の使い方を解説します。 ajaxzip3を読...
WordPress

【Contact Form 7/MW WP Form】メールが届かない時の対処法

今回はContact Form 7やMW WP Formでお問い合わせメールが届かない時の対処法を解説します。 普通メールはちゃんと届...