Web 制作リファレンス / Web Design Leaves

Web 制作リファレンス（＋α）

Web 制作に関する参考資料です。どなたかのご参考になれば何よりです。

更新情報

New PHP コンタクトフォーム（確認画面あり）の作り方: 2025年06月07日; 安全で使いやすいコンタクトフォームは、Webサイトにとって欠かせない要素のひとつです。この記事では、CSRF対策・reCAPTCHA v3・PHPMailerによるメール送信など、実用的かつセキュアなコンタクトフォームをゼロから構築する方法を解説します。入力ページから確認・完了ページまでの3ステップ構成に加え、実践的なセキュリティ対策も含めたフォーム実装になっています。全てのコードを掲載しているのでコピペで利用できます。これまでの記事を全面的に書き換えました。

New PHP セキュアなメールフォーム（確認画面なし）の作り方: 2025年05月31日; セキュアで拡張性の高いお問い合わせフォームを、HTML・PHP・JavaScript を使って一から実装する方法を解説します。CSRF対策やバリデーション、reCAPTCHA 対応、自動返信機能など、実用的なフォームに必要な機能を網羅したサンプルコード付き（コピペで利用可能）です。これまでの「PHP メールフォームの作り方」を全面的に書き換えました。

New WordPressのログインURLを変更する方法｜WPS Hide Loginの使い方と注意点: 2025年05月20日; WordPress のログイン URL を安全に変更する方法を解説。WPS Hide Login の使い方や、ログインできなくなったときの対処法、Basic 認証の追加方法も紹介しています。

New WordPress 特定ページにBasic認証を設定する方法【functions.php使用】: 2025年05月17日; WordPress サイトの一部のページや投稿にアクセス制限をかけたい場合、Basic 認証はシンプルかつ手軽な方法の一つです。functions.php を使って特定のページやカテゴリに Basic 認証をかける方法から、.htpasswd を使ったよりセキュアな実装まで、実例を交えて解説します。

New WordPress REST API のアクセス制御: 2025年05月10日; rest_authentication_errors や rest_pre_dispatch などのフィルターの使い方から、特定のプラグイン・ドメインのみを許可する方法、カスタムヘッダーやCORS制限の活用、APIキーベースのシンプルな認証方法まで、実運用で役立つ知識を解説しています。

New fetch() で API キーを安全に扱う方法：JS に書かず PHP で代理する: 2025年05月10日; JavaScript の fetch() で外部 API を呼び出す場面は多くありますが、その際に API キーをどこに、どう書くかは重要なポイントです。以下では、フロントエンドで API キーを使ってはいけない理由と安全に API キーを扱う方法（PHP プロキシの活用）をサンプルとともに掲載しています。

New PHP cURL の使い方: 2025年05月10日; curl_init による初期化から、curl_setopt でのオプション指定、curl_exec の実行、エラー処理、JSONレスポンスの扱いまで、基本的な流れを解説します。また、具体的なリクエストのサンプルも掲載しています。

New PHP file_get_contents の使い方: 2025年05月10日; file_get_contents の基本的なパラメータの解説から、ファイルの存在チェックや読み込みエラーへの対処法、URL読み込み時の挙動、マルチバイト対応、POSTリクエストへの応用まで、幅広いユースケースをカバーします。

New WordPress REST API カスタムエンドポイントの作成: 2025年04月16日; WordPress の REST API を拡張し、カスタムエンドポイントを作成する方法について、基礎から応用まで詳しく解説。register_rest_route() の使い方や主要なパラメータの説明をはじめ、callback や permission_callback の指定方法、アイキャッチ画像や投稿のカテゴリー・タグ情報の取得方法など、実践的なカスタムエンドポイントの実装例を紹介。

New WordPress REST API の使い方: 2025年04月04日; WordPress REST API を活用すると、外部アプリケーションや JavaScript フロントエンドから WordPress のデータを柔軟に操作できます。本記事では、REST API の基本概念から実践的な活用方法までを詳しく解説しています。

New WordPress プラグインの作り方と設定ページの作成: 2025年03月07日; 基本的な WordPress のプラグインの作り方について。シンプルなプラグインを作成し、設定ページを追加したり、カスタムフィールドを設定します。フロントエンドと管理画面での CSS や JavaScript の読み込み方法やカスタム投稿タイプやカスタムタクソノミーを登録するプラグインの作り方などを掲載しています。

WordPress カスタム投稿タイプを表示するダイナミックブロックの作成: 2025年02月25日; 設定されているカスタム投稿タイプを検出して表示するダイナミックブロックの作り方についての覚書です。カスタムタクソノミー（ターム）も設定されていれば、インスペクターパネルで選択できるようにし、表示する投稿をフィルターすることができます。

CSS Grid を使ったレスポンシブマルチカラムレイアウト: 2025年02月20日; グリッドレイアウト（display: grid）を使ってマルチカラムレイアウトを作成する覚書です。Sass を使って複数のレイアウトを動的に作成する方法やコンテナクエリを使う方法などについても掲載しています。

WordPress ダイナミックブロックの作成: 2025年02月14日; ダイナミックブロックの作り方。Create Block ツールで雛形を作成して、「最新の投稿」ブロックのようなダイナミックブロックを作成する方法について。フロントエンド側のレンダリングは render.php を使用。グリッドレイアウトでカラム表示する方法や QueryControls コンポーネントや ImageSizeControl コンポーネントを利用する方法など。

WordPress データへのアクセス @wordpress/core-data: 2025年01月26日; ダイナミックブロックの作成などで WordPress のデータに JavaScript でアクセスする際に使用する @wordpress/core-data パッケージについての覚書です。select 関数や useSelect フック、getEntityRecords セレクターの基本的な使い方や取得したデータをレンダリングする方法なども掲載しています。

WordPress スタティックブロックとダイナミックブロック: 2025年01月25日; スタティックブロックとダイナミックブロックの違いについて。スタティックブロックをダイナミックブロックに変更してその違いを確認しています。

WordPress ブロック開発の環境構築（Create Block ツールについての覚書）: 2024年12月29日; Create Block ツールを使ってブロック開発の環境を構築する方法や複数ブロックを1つのプラグインとして作成する方法についての覚書です。

Create Block で作成したカスタムブロックの国際化対応（翻訳の作成）: 2024年12月19日; Create Block ツールで作成したカスタムブロックの翻訳を作成する方法についての覚書です。

WordPress ブロック開発入門カスタムブロックの作り方: 2024年12月13日; WordPress 公式コース「ブロック開発入門: 最初のカスタムブロックを構築」を参考にカスタムブロックを作成する方法についてまとめたものです。

wp-env の基本的な使い方（WordPress のローカル環境を構築）: 2024年11月25日; wp-env の使い方とブロックテーマ開発及びプラグイン開発の基本的な環境を構築する方法についての覚書です。

WordPress ブロックテーマの作り方（ローコードでブロックテーマ開発）: 2024年11月17日; 最小限のコードの記述とサイトエディターを使って簡単なブロックテーマを作成する方法です。Learn WordPress の Develop Your First Low-Code Block Theme を基に、基本的なブロックテーマの作り方について個人的にまとめたものです。

WordPress ブロックスタイルとブロックバリエーション: 2024年10月19日; 登録したブロックのスタイルをボタンで切り替えることのできるブロックスタイルバリエーションや、ブロックがページで使用されている場合にのみその CSS を読み込むブロックスタイルシート、既存のブロックを拡張してインサーターに追加できるブロックバリエーションについて。

WordPress Create Block Theme プラグインの使い方: 2024年10月12日; WordPress ブロックテーマの作成で利用できる便利なプラグイン Create Block Theme の基本的な使い方について。

WordPress ブロックテーマテンプレート: 2024年10月12日; WordPress のブロックテーマのテンプレートやブロックマークアップについて、公式ドキュメント Theme Handbook の Templates（英語版）をもとに個人的にまとめた覚書です。

WordPress ブロックテーマパターン: 2024年10月12日; WordPress ブロックテーマで作成したパターンをテーマに組み込む方法、パターンの登録や解除、カテゴリーの登録、パターンでの PHP の使用などについて公式ハンドブックをもとにまとめています。

CSS の比較関数 min(), max(), clamp() の基本的な使い方: 2024年09月29日; CSS の比較関数 min(), max(), clamp() の基本的な使い方についての覚書です。

The Moneytizer ads.txt の自動統合: 2024年09月27日; Moneytizer ads.txt ファイルを自動的に更新するように設定する方法の覚書です。この設定を行えば、今後 ads.txt は更新する必要はないとのことです。

ウィキペディアの書き方（初心者用）: 2024年09月19日; ビジュアルエディターで記事を書いたり編集する際に必要になる、出典や注釈の追加、リンクの挿入、画像の表示やアップロードのなどの基本的な操作方法や下書きスペース（サンドボックス）の使い方や設定などについて個人的にまとめたものです。

WordPress theme.json v3 使い方: 2024年08月29日; WordPress theme.json v3 の基本的な設定と使い方について、公式ドキュメントをもとに個人的にまとめたものです。現時点での theme.json のバージョンは3です。公式ドキュメントの解説はまだ V2 の内容となっていますが、ここで扱っているのは v3 になります。

JavaScript replace() 複数置換や動的な値を使った置換: 2024年08月17日; JavaScript の replace() メソッドを使って複数の文字列をまとめて置換する方法や動的な値を使った置換などについて。異なる方法による HTML 特殊文字のエスケープの例や動的な値を使った置換におけるメタ文字のエスケープなどについて掲載しています。

WordPress のログイン状態を JavaScript で判定する方法: 2024年08月11日; JavaScript を使ってログイン状態（現在ログインしているかどうかや管理者としてログインしているか）を判定する方法についての覚書です。

WordPress インスタ表示用カスタムブロックの作成: 2024年08月07日; WordPress でインスタ表示用のカスタムブロックを作成する方法の覚書です。create-block を使用してカスタムブロックのプラグインを作成します。インスペクターで表示件数や見出しのテキスト、追加読み込みボタンのテキストなどを指定することができます。

Instagram グラフ API で投稿画像を一覧表示（2024年版）: 2024年07月25日; 現時点での最新のバージョン（v20.0）に合わせて書き換えました。また、ボタンを表示して追加で投稿を読み込む方法や WordPress での表示方法なども追加しました。

WordPress の標準XMLサイトマップ（wp-sitemap.xml）をカスタマイズ: 2024年07月21日; WordPress の標準のXMLサイトマップを利用する場合に、デフォルトで出力される wp-sitemap.xml のカスタマイズ方法について。

WordPress お問い合わせフォームプラグインなしで作成: 2024年05月14日; WordPress でプラグインを使わずにお問い合わせフォームを作成する方法の覚書です。固定ページ（カスタムページテンプレート）を使って、確認ページ及び完了ページのあるお問い合わせページを作成します。送信は mb_send_mail() を使用します。

MAMP のローカルサイト（WordPress など）を iPhone などで表示: 2024年05月05日; Wi-Fi を使って MAMP 環境に構築した WordPress のローカルサイトなどをスマホ（iPhone）などで表示して確認する方法についての覚書です。

CSS コンテナクエリ（@container）の基本的な使い方: 2024年04月09日; 親要素や祖先要素のサイズ（幅）に基づいてスタイルを定義できる新しい機能 CSS コンテナクエリ（CSS container queries）の基本的な使い方について。

CSS 疑似クラス :has() の使い方: 2024年04月03日; 引数に指定した（特定の状態や条件を表す）セレクターを持つ要素を選択することができる関数擬似クラス :has() の使い方についての覚書です。

CSS 疑似クラス :is() と :where(): 2024年04月02日; 引数に渡されたセレクターのいずれかと一致する全ての要素を選択することができる CSS の擬似クラス :is() と :where() の使い方についての覚書です。

CSS ネスティング（入れ子）: 2024年04月01日; CSS でも Sass のようにセレクターを入れ子にする構文が使える CSS ネスティング（入れ子）についての覚書です

MAMP をアップデート（新しいバージョンをインストール）: 2024年03月24日; macOS を Ventura から Sonoma にアップデート後、MAMP を起動しようとしたら「MAMPが予期しない理由で終了しました」とエラーが表示されて起動できなくなったので、MAMP を v6.6 から v6.9 にアップデートした際の覚書です。

Highlight.js を WordPress で使う: 2024年02月16日; 簡単に WordPress で Highlight.js を使ってシンタックスハイライトする方法について。Highlight.js のファイルを functions.php で読み込み、コードブロックを使って記述したコードをハイライト表示します。コードブロックを使うので、エスケープ処理が必要ありません。また、必要に応じて簡単な記述で行番号も表示することができます。

Highlight.js を使ったカスタムブロックのサンプル: 2024年02月11日; 入力したコードを Highlight.js を使ってシンタックスハイライトするカスタムブロックの作成サンプル。エディタのサイドバーにオプションを表示して、ハイライト表示をカスタマイズすることができます。また、エディタ上でプレビューもできるようにします。

WordPress Highlight.js カスタムブロックの作成: 2024年02月03日; WordPress でシンタックスハイライター Highlight.js を使ってハイライト表示するカスタムブロックを作成する方法についての解説のような覚書です。必要に応じてプレビュー機能や設定オプションを追加することができます。

Highlight.js のカスタマイズ: 2024年01月11日; シンタックスハイライトのライブラリ Highlight.js のカスタマイズのサンプルです。コードの上部にツールバーを追加して、行番号の表示・非表示や行の自動折り返しのあり・なし、コピーボタンの表示などが可能です。シンプルなサイトであればサンプルのコードをコピペで利用できると思います。

Highlight.js でシンタックスハイライト: 2023年12月28日; プログラムのコードをキーワードや構文などにより色分けして表示するシンタックスハイライト機能で定評のある Highlight.js の使い方の解説のような覚書です。プラグイン API を使ったカスタマイズ方法などについて。

Prism.js でシンタックスハイライト: 2023年12月28日; シンタックスハイライト用の軽量でシンプル且つ多機能なプラグイン Prism.js の使い方の解説のような覚書です。Prism.js にはオプションで多数のプラグインが用意されています。それらの使い方などについても解説しています。

TypeScript 非同期処理 Promise と Fetch: 2023年12月09日; Promise や async 関数（async/await）の型注釈、TypeScript を使用して fetch を利用する方法などについての解説のような覚書です。

TypeScript モジュール: 2023年11月21日; TypeScript モジュールシステム（ESM）の利用方法。export や import の使い方、型のエクスポートとインポート、Type-only imports and exports、スクリプトとモジュールのスコープの違いなどについて。

TypeScript 高度な型: 2023年11月12日; TypeScript 高度な型についての覚書です。ユニオン型やリテラル型、型の絞り込みや型アサーション、ユーザー定義型ガード、Mapped Types、Conditional Types などについて。

TypeScript クラスを使ってみる: 2023年11月12日; TypeScript クラスの使い方。クラスの定義やクラスの型、クラスの継承などの使い方について。

TypeScript 関数を使ってみる: 2023年11月12日; 関数定義での型注釈や型の宣言、関数型の部分型関係、ジェネリクスなどについて。

TypeScript を使ってみる（基本型や型注釈）: 2023年11月12日; TypeScirpt の型注釈（型付け）や基本的な型の使い方についての解説のような覚書です。

VS Code ローカル履歴（タイムライン）でバージョン管理: 2023年9月12日; VS Code のローカル履歴を使ってファイルの変更の差分を表示したり、特定の時点の状態に復元したり、削除したファイルを取り戻す方法などについての覚書です。

VS Code で Git を使う（ソース管理機能）: 2023年9月7日; VS Code を使って Git のローカルリポジトリを操作する方法（ソース管理機能）についての覚書です。VS Code の Git 連携機能や VS Code を Git のエディタとして設定する方法、VS Code で git を操作する基本的な使い方などについて。

Git hunk 変更の一部をステージしてコミット git add -p: 2023年8月30日; インタラクティブに変更の一部分のみをステージに追加することができる git add -p （Hunk）の使い方についての覚書です。

Git スタッシュ（stash）一時的に変更を退避: 2023年8月28日; Git のスタッシュ（stash）の使い方についての覚書です。git stash コマンドは、一時的に変更を退避させるための便利なツールです。これを使うことで、作業中の変更を一時的に保存し、別の作業を行ったり、他のブランチに切り替えたりすることができます。

Git リセット git reset コマンド: 2023年8月26日; git reset コマンドの基本的な使い方（--soft、--mixed、--hard の各オプション）やコミットの指定方法（HEAD~ や HEAD^）、reflog や ORIG_HEAD を使って誤った操作を元に戻す方法などについて。

Git ブランチマージリベース: 2023年8月26日; Git のブランチの作成や切り替え、マージやリベースの操作などについての覚書です。

Git の基本的な使い方: 2023年8月8日; Git のごく基本的な使い方についての個人的な覚書です。

Git の初期設定と更新（Mac）: 2023年8月8日; Mac で Git を最新版にアップデートする方法や初期設定についての覚書です。

ChatGPT を使って WordPress の AJAX ページネーション: 2023年7月18日; ChatGPT を使って WordPress の AJAX ページネーションのコードを作成した際の覚書です。

ChatGPT を使って WordPress のコードを生成: 2023年7月14日; AJAX を使った infinite scroll（無限スクロール）のコードを ChatGPT を使って作成したサンプルです。たった１行の質問でそれなりのコードと説明が表示されました。Regenerate response をクリックするだけで、異なるコードが表示されるので、いろいろな記述方法が確かめられます。

VS Code Code Helper の CPU 使用率が高い（Live Server）: 2023年7月11日; VS Code の拡張機能 Live Server で Go Live をクリックしてプレビューすると Code Helper の CPU 使用率が高くなってしまう原因と解決策について。

WordPress AJAX で並べ替え（AJAX フィルターと追加読み込み）: 2023年7月9日; WordPress で AJAX を使って投稿を並べ替える方法についての解説のような覚書です。カテゴリーのみを対象に並べ替える方法から並び順やキーワードでの並び替え、追加の投稿の読み込み、change イベントと input イベントを使った並び替えなどを掲載しています。また、AJAX は jQuery を使う方法と素の JavaScript（XMLHttpRequest 及び Fetch API）で実装する方法の両方を掲載しています。

WordPress で AJAX を使う方法: 2023年6月19日; WordPress での AJAX の基本的な使い方についての解説のような覚書です。AJAX は jQuery は使わずに XMLHttpRequest と Fetch API で実装しています。

AJAX XMLHttpRequest の基本的な使い方: 2023年6月13日; jQuery は使わずに素の Javascript（vanilla JavaScript）で XMLHttpRequest を使って AJAX を実装する基本的な方法についての覚書です。

WordPress で OGP を設定: 2023年6月9日; WordPress でプラグインを使わずに OGP を設定するする方法につていの覚書です。

OGP（Open Graph Protocol）の設定: 2023年6月7日; OGP の基本的な設定方法についての覚書です。prefix 属性や meta タグを使ったメタデータの記述方法、Facebook や Twitter 用の独自の設定方法などについて掲載しています。

CSS で要素を中央寄せする方法: 2023年6月5日; CSS で要素を水平方向や垂直方向に中央揃えする方法についての覚書です（基本的な text-align や margin auto から絶対配置や flexbox、grid を使った方法など）。

HandBrake を使って動画をWeb用に軽量化・最適化: 2023年6月1日; 無料の動画変換ソフト HandBrake を使って動画を Web 用に軽量化する（ファイルサイズを小さくする）方法についての覚書です。HandBrake を使えば MOV 形式などのファイルを MP4 に変換したり、WebM 等に変換することもできます。

MediaElement.js の使い方: 2023年5月27日; JavaScript オープンソースのメディアプレーヤー（音声・動画プレーヤー）MediaElement.js の基本的な使い方とサンプルです。MediaElement.js を使うと簡単に audio 要素や video 要素による音声データや動画をクロスブラウザで統一したスタイルで表示することができます。

audio 要素と JavaScript でオーディオプレーヤーを作成: 2023年5月13日; HTML と CSS、JavaScript で音声プレーヤーやプレイリストを独自に作成することができます。SVG アイコンを使えばボタンなども簡単にそれなりに表示することができます。

audio タグ（要素）を Javascript を使って操作: 2023年5月13日; JavaScript で音声ファイルを再生するための基本的な操作方法について。 HTMLMediaElement インターフェイスのプロパティやメソッド、イベントの基本的な使い方や音声を再生、停止、ボリュームの調整、ミュート、ループなどについて。

HTML audio タグ（要素）の使い方: 2023年5月13日; HTML audio タグ（要素）を使って音声ダータを再生させる基本的な使い方や知っておくと便利な各属性の使い方について。

input type=range レンジスライダーをカスタマイズ: 2023年5月10日; ブラウザによってデフォルトのスタイルが異なるレンジスライダーをCSS でスタイルを統一する方法や JavaScript を使って入力値に合わせてトラックの色を塗り分ける方法について。

HTML video タグで動画埋め込み（背景動画）: 2023年4月30日; video タグの基本的な使い方や動画を背景として表示する方法、スマホでは動画を読み込まないようにしたり、JavaScript を使った操作方法などについて。

JavaScript でメディアクエリ（matchMedia と MediaQueryList）: 2023年4月26日; JavaScript でメディアクエリを利用する方法（matchMedia と MediaQueryList の使い方）やビューポート幅により条件分岐する方法、一定の幅未満ではビデオを読み込まない方法について。

details と summary 要素 + JavaScript で作るアコーディオン: 2023年4月13日; details 要素（詳細折りたたみ要素）と JavaScript を使ってアコーディオンを実装する方法の覚書です。summary 要素の矢印アイコンのカスタマイズ方法などについても。

CSS ::marker 擬似要素: 2023年4月12日; ::marker 擬似要素は、リスト項目（li 要素）のマーカー（記号や番号）や summary 要素の矢印アイコンを選択するセレクタで、::marker を使うと、リスト項目などのマーカー（記号や番号）をカスタマイズすることができます。

CSS 擬似要素 ::before ::after: 2023年4月5日; CSS 擬似要素の ::before と ::after の基本的な使い方や画像や SVG、ユニコードを表示する方法及びその際のサイズの指定方法、斜めの背景の設定や疑似要素で矢印や三角形のアイコンを作成して表示する方法などについて。

CSS aspect-ratio と padding ハック: 2023年3月27日; アスペクト比を定義（設定）できる CSS のプロパティ aspect-ratio と以前か使われているクロスブラウザ対応のアスペクト比を設定するテクニック padding ハックの使い方について。

Mac ターミナル defaults コマンドの使い方: 2023年3月24日; defaults コマンドラインツールは、各アプリケーションの設定ファイル（plist）の内容を表示・編集することができるツールで、defaults コマンドを使うとシステム環境設定や各アプリの環境設定画面では設定できない値を設定することができます。ターミナルで defaults read や defaults write、defaults delete、defaults domains などのコマンドを利用するための覚書です。

TypeScript 環境の構築: 2023年2月1日; TypeScript で書いたコードをブラウザで表示したり、Node.js 上で動作できるように JavaScript にコンパイルするための基本的な環境を構築する手順や TypeScript を直接 Node.js で実行するためのツール tsx（TypeScript Execute）、ts-node、nodemon、ts-node-dev の使い方、プロジェクトを ES Modules に（Native ESM）する方法などの解説です。

Debounce と Throttle（JavaScript）: 2023年1月18日; Debounce と Throttle は一定期間に関数が呼び出される回数を制限することで、パフォーマンスや UX を改善するための2つの方法です。Debounce と Throttle のコードやその使い方、Lodash の利用などについて。

JavaScript デコレータ関数 Decorator Function: 2023年1月14日; デコレータ関数は別の関数を受け取り、その関数の動作を変更せずに拡張する関数のことです。以下は JavaScript のデコレータ関数の作り方や使い方に関する解説のような覚書です。デコレータの簡単なサンプルも掲載しています。

ResizeObserver の使い方: 2023年1月6日; ResizeObserver の基本的な使い方や詳細についての解説のような覚書です。ResizeObserver を使用すると特定の要素のサイズ変更を簡単に検出して何らかの処理を実行する（コールバック関数を呼び出す）ことができます。

MutationObserver の使い方: 2022年12月24日; DOM の変化を監視して、変化が発生すればコールバック関数を呼び出すことができる MutationObserver の使い方に関する解説のような覚書です。observe() メソッドの詳細や MutationObserver の使用例などを掲載しています。

Vue.js の基本的な使い方 (7) Vue Router と Pinia を使った簡単なアプリの作成: 2022年12月14日; JSON Placeholder という JSON 形式のデータを返してくれる無料のサービスを利用して、Vue Router と Pinia を使って投稿やユーザーの情報などを表示する簡単なアプリを作成する方法の覚書です。

Vue.js の基本的な使い方 (6) Vue3 で簡単な To-Do アプリを色々な方法で作成: 2022年12月3日; Vue3 で JavaScript を使って簡単な To-Do アプリを作成する方法の解説のような覚書です。CDN で Vue を読み込む方法やダウンロードして利用する方法、ビルドツール Vite を使う方法、Options API、Composition API、Single File Component で記述する方法、CDN で読み込んでファイルを分割する方法、provide / inject を使う方法、Pinia を使う方法などの例を掲載しています。

Vue.js の基本的な使い方 (5)Pinia を使って状態管理: 2022年11月26日; Pinia を利用すると、複雑な Vue 3 の状態管理（コンポーネント間のデータの受け渡しやデータの共有など）が簡単に行なえます。以下は Pinia の基本的な使い方についての解説のような覚書です。

Vue.js の基本的な使い方 (4) Vue Router ルーティング: 2022年11月10日; Vue のルーティングと Vue Router バージョン 4.x （この時点では 4.1.5）の基本的な使い方についての解説のような覚書です。Vue Router の使い方は Vite で作成したデフォルトのプロジェクトを使って解説しています。使用している Vue のバージョンは 3.2.38 です。

Vue.js の基本的な使い方 (3) Vite と SFC 単一ファイルコンポーネント: 2022年10月16日; Vue CLI に代わるビルドツール Vite の使い方や SFC 単一ファイルコンポーネント、script setup 構文などに関する覚書（解説）です。

Vue.js の基本的な使い方 (2) Composition API: 2022年10月16日; Composition API の基本的な使い方についての解説（覚書）です。扱っているサンプルはとても単純なもので、Vue は CDN 経由で読み込んでいます。

Vue.js の基本的な使い方 (1) Options API: 2022年10月16日; Vue.js の基本的な使い方に関する解説のような覚書で、公式サイトや書籍を参考に初めて Vue を使用する場合に必要となるような情報（使い方）をまとめています。

Web components（ウェブコンポーネント）の使い方: 2022年8月25日; React や Vue などのライブラリを使わずに、JavaScript だけでコンポーネントを作成することができる Web components の基本的な使い方に関する覚書です。カスタム要素やシャドウ DOM、スロットを使ったコンポーネントの作り方やテンプレート（template 要素）の使い方などについて。

VS Code で Web 制作（基本的な設定）: 2022年6月15日; Visual Studio Code を使って Web 制作を行うために必要な設定や拡張機能（Project Manager、SFTP、Live Server で PHP をプレビューする方法）、ワークスペースなどについての覚書です。

Fetch API の使い方: 2022年5月21日; Fetch API の基本的な使い方や仕組みについての解説です。取得したレスポンスを DOM として扱う方法や WordPress REST API や OpenWeather API を使った簡単なサンプルなども掲載しています。

Intersection Observer API の使い方: 2022年5月4日; Intersection Observer API の基本的な使い方やサンプルを掲載しています。要素が画面内に入ったらアニメーションを開始するサンプルやグラデーションをアニメーションで表示するサンプル、スクロールスパイのサンプル、及びオプションやコールバック関数についての少し詳細な解説など。

requestAnimationFrame の使い方（アニメーション）: 2022年4月18日; requestAnimationFrame() の基本的な使い方の解説です。setTimeout() との違いや経過時間の取得、FPS の取得、経過時間や進捗度によるアニメーション、イージングの適用方法、他のアニメーションとの連携方法などについて。

CSS モーションパス（offset-path offset-distance）の使い方: 2022年4月11日; CSS モーションパスを使ったアニメーションの方法など、offset-path や offset-distance、offset-rotate の基本的な使い方の解説です。

Web Animation API の使い方 JavaScript でアニメーション: 2022年4月1日; Web Animation API の基本的な使い方の解説です。animate() メソッドや Animation()、KeyFrameEffect、getComputedTiming() などの基本的な使い方やアニメーションの制御、アニメーションイベント、プロミス、getAnimations() を使った CSS アニメーションの取得方法、Mortion Path や SVG アニメーションなどについて。

スマホで hover 対応 ontouchstart タッチデバイス判定: 2022年3月2日; スマホなどのタッチデバイスで ontouchstart 属性や touchstart イベントなどを使ってマウスオーバー（ホバー）時の動作 :hover に対応させる方法やタッチデバイスの判定方法などについての覚書です。

CSS Grid + JavaScript で Masonry レイアウト: 2022年2月10日; CSS Grid や CSS Multi-column、CSS Masonry Layout を使って Masonry レイアウトを実装する方法や JavaScript プラグインの Masonry の使用例、フィルタリング機能を追加する方法などについての覚書です。

Mac ターミナル zsh の設定・カスタマイズ（シェルオプション）: 2022年1月30日; Mac のターミナルで zsh を使う場合の設定のカスタマイズ方法（シェルオプションなど）についての覚書です。

nvm を使って Node.js を Mac にインストール: 2022年1月15日; nvm（Node Version Manager）を Mac にインストールして Node.js の開発環境を構築し、任意の Node.js のバージョンを利用する方法についての解説（覚書）です。

webpack5 を使って Bootstrap 5 をインストール: 2022年1月8日; webpack の最新のバージョン（5.65.0）と Bootstrap の最新のバージョン（5.1.3）に合わせて内容を全面的に更新しました。また、Bootstrap Icons を npm でインストールして webpack でバンドルする方法を追加しました。

webpack の基本的な使い方（version 5）: 2021年12月31日; webpack のバージョンが 5 になってしばらく経過したので内容を webpack5 に合わせて書き換えました。 Asset Modules が導入され、url-loader や file-loader が非推奨になったり、v4 で使用していた optimize-css-assets-webpack-plugin が使えなくなり、代わりに css-minimizer-webpack-plugin を使ったり、webpack-dev-server もバージョンが4になりオプションが変わっています。

Dart Sass (scss) の基本的な使い方: 2021年12月21日; 公式に推奨されている実装環境が Dart Sass になって、@import や除算演算子としてのスラッシュの使用が非推奨（将来的には廃止）になり、@use や @forward が導入され、Sass 関数からビルトインモジュールへ移行されるなどの変更があったため内容を全面的に書き換えました。

Sass のインストールと設定（Dart Sass）: 2021年12月1日; Dart Sass を Mac のターミナルで Homebrew を使ってインストールする方法と設定（コマンドラインツールの使い方など）についての覚書です。

Instagram グラフ API で投稿画像（タイムライン）をウェブに一覧表示（埋め込み）: 2021年11月28日; Instagram グラフ API を使ってインスタグラムで投稿した画像などのメディアの一覧を Web ページに表示する方法の解説です。Instagram グラフ API を利用するためのアクセストークンと Instagram ビジネスアカウント ID の取得方法や取得したデータを PHP を使って表示する方法などについて掲載しています。

JavaScript を使った基本的なフォームの検証（入力チェック）: 2021年11月10日; JavaScript を使って送信時に入力された値を検証する基本的な方法についての解説やサンプルです。必須入力やパターン、最大・最小文字数、値の一致の検証、カスタムデータ属性を利用したエラーメッセージのカスタマイズ方法などについて。

PHP のフィルタ関数 filter_input と filter_var: 2021年10月28日; PHP のフィルタ関数 filter_input と filter_var を使った検証やサニタイズ処理の方法について。外部からの変数の初期化やメールアドレスの検証やコールバック関数を使った検証、配列を扱う場合のオプションの指定方法など、filter_input と filter_var の基本的な使い方についての覚書です。

ライトボックス Luminous Lightbox の使い方: 2021年09月29日; jQuery に依存しない軽量でシンプルな画像用ライトボックスプラグイン Luminous Lightbox の基本的な使い方や、ギャラリー表示やキャプションの表示方法、画像枚数と現在の画像位置（インデックス）の表示、webpack でのバンドル、WordPress で表示する方法などの覚書です。

JavaScript フォームの検証（制約検証 API）: 2021年08月22日; JHTML5 のフォーム検証機能とその基本的な使い方、制約検証 API を使った JavaScript での検証方法、独自のエラーメッセージの表示方法や自動検証を無効にして任意の位置にカスタマイズしたエラーメッセージを表示する方法、制約検証 API を使わずに独自の JavaScript で検証する方法や制約検証との併用の方法などについてサンプルを交えて解説しています。

JavaScript フォームとフォームコントロールの操作: 2021年08月04日; JavaScript を使ったフォームとフォームコントロールの操作について。Form オブジェクトを使った要素へのアクセスやそのプロパティ、コントロール（ボタンやテキストフィールド、テキストエリア、チェックボックス、ラジオボタン、セレクトボックス）の基本的な使い方やイベント処理などについてサンプルを交えて解説しています。

CSS でフィルタリング（絞り込み） JavaScript でも: 2021年06月15日; CSS だけを使って表示されている要素のフィルタリング（絞り込み）を行う方法や表示する際にアニメーションを加える方法、及び JavaScript を使って実装する方法の覚書です。

WordPress を静的サイトの一部としてインストール: 2021年06月13日; 静的サイトの一部として WordPress をサブディレクトリにインストールする方法の覚書です。単純に WordPress をサブディレクトリにインストールする場合やサブディレクトリにインストールして WordPress の設定でサイトアドレス (URL)を変更する方法などについて。

PHP でパンくずリストを出力（JSON-LDも）: 2021年06月05日; PHP を使って動的にパンくずリストや JSON-LD での構造化マークアップを出力したり、パンくずリストを外部ファイル（テンプレート）化する方法の覚書です。

共通部分を PHP で管理（外部ファイル化・テンプレート化）: 2021年06月01日; サイトの共通部分を PHP で管理する方法（外部ファイル化やナビゲーションメニュー、相対パスや環境変数を使った絶対パスの使い方、現在のページのメニューにクラスを追加する方法、簡易的なテンプレートの作成方法など）の覚書です。

SVG と CSS で作るロゴアニメーション: 2021年05月20日; SVG 画像と CSS アニメーションでロゴアニメーションを作成する方法についての覚書です。アニメーションでは SVG の stroke-dashoffset と stroke-dasharray 属性の値を変化させます。これらの値に path の長さを指定しますが、その path の長さの取得方法や Safari での注意点などについて。

API キーなしでサイトに Google マップを表示（埋め込みコード）: 2021年05月19日; API キーなしで「埋め込みコード」を使ってサイトに Google マップを表示する方法の覚書です。基本的なレスポンシブ表示の方法や英語の地図やルートの表示方法などについて。

SSL化したサイトの移転（ConoHa に無料独自SSLを事前設定）: 2021年05月16日; ConoHa Wing に無料独自SSLを事前設定してSSL化したサイトを移転方法の覚書です。ConoHa の場合、無料独自SSLを利用するにはあらかじめネームサーバーをConoHaに設定する必要があり、その手順と IMAP で設定してあるメールの移行方法などについて。

WordPress 多言語化プラグイン Polylang の使い方: 2021年05月05日; WordPress の多言語化プラグイン Polylang のインストール方法や初期設定、言語スイッチャーの設定方法、言語別コンテンツの作成（投稿や固定ページ、メディアの翻訳）などについての覚書です。

SVG エスケープツール（SVG URL Encoder）: 2021年03月21日; SVG 用に URL エンコード（エスケープ）するツールのサンプルです。<、>、# の文字をそれぞれ %3C、%3E、%23 に変換（パーセントエンコード）します。※ダブルクオート（"）はシングルクォート（'）に変換します。

loading 属性と lazysizes の使い方（遅延読み込み）: 2021年03月03日; loading 属性の基本的な使い方や loading 属性がサポートされていないブラウザへの lazysizes を使った対応方法、及び lazysizes の基本的な使い方についての覚書です。

SVG アニメーション（SMIL を使ったアニメーション）: 2021年02月18日; SMIL を使った SVG アニメーションについての覚書です。animate 要素や animateMotion 要素、animateTransform 要素などのアニメーション要素の基本的な使い方について。

CSS Shapes / shape-outside: 2021年02月03日; CSS Shapes（シェイプ）や CSS ボックスモデルのボックス値 shape-box、基本シェイプを定義する basic-shape などの基本的なことや shape-outside プロパティの使い方についての覚書です。shape-outside プロパティを使えばいろいろな形状にテキストを回り込ませることができます。clip-path プロパティと一緒に使用すれば、clip-path で切り抜いた形状にテキストを回り込ませることが簡単にできます。

CSS マスキング mask-image の使い方: 2021年01月28日; mask-image プロパティの使い方（グラデーションやマスク画像の指定）や Photoshop を使った PNG や SVG のマスク画像の作成方法、mask-repeat、mask-position、mask-size プロパティなどの基本的な使い方についての覚書です。

Photoshop で SVG: 2021年01月25日; Photoshop を使って簡単な図形を作成し、SVG（Scalable Vector Graphics）形式で保存する方法や知っていると便利かもしれない SVG の使い方などについての覚書です。

CSS clip-path の使い方: 2021年01月18日; CSS clip-path の基本的な使い方について。基本シェイプを使った切り抜きや clip-source で SVG の clipPath 要素の定義を参照してクリッピングする方法、CSS clip-path ジェネレーター（Clippy）の使い方、geometry-box などについての覚書です。

HTML SVG の基本的な使い方（SVG入門）: 2020年12月24日; SVG の基本的な使い方に関する覚書。HTML ファイルに直接 svg 要素を記述するインライン SVG の使い方（viewBox の説明や動作確認サンプル、基本図形要素、fill と stroke、スタイルの設定、グループ化を行う g 要素や再利用可能な部品の定義に使う defs 要素、図形などのひな形を定義するための symbol 要素など）や SVG ファイルの最適化などの基本的な事項について。

CSS Grid（display:grid）の使い方: 2020年12月04日; CSS Grid（display:grid）の基本的な使い方。グリッドの作成（コンテナーやトラックの定義、アイテムの配置）や関連する grid-template や grid-column、grid-row などのプロパティや repeat()、minmax() 関数、新しく導入された fr 単位、暗黙的及び明示的なグリッド、自動配置アルゴリズムなどについての覚書です。

Webpack を使って Bootstrap 5 をインストール: 2020年11月14日; Webpack を使って Bootstrap 5 をインストールする方法の覚書（メモ）です。現時点（2020年11月14日）では Bootstrap 5 は alpha 版です。Bootstrap 5 を使うのに必要なモジュールやローダー（主に Sass 関連）のインストール、webpack.config.js の設定、package.json への npm script の追加、スタイルのカスタマイズや jQery の使い方、webpack-dev-server を使った開発サーバの設定方法などについて。

webpack を使って Sass をコンパイルする方法: 2020年11月09日; webpack を使って Sass をコンパイルする方法の覚書です。css-loader、sass-loader、sass（Dart Sass）と MiniCssExtractPlugin を使った基本的なコンパイルの方法やソースマップの出力の制御、clean-webpack-plugin、file-loader や postCSS の Autoprefixer の使い方、webpack-dev-server を使った開発サーバの設定方法などについて。

WordPress Code-Prettify でシンタックスハイライトするブロックの作成: 2020年11月02日; WordPress のブロックエディタ Gutenberg で記述したコードを Code-Prettify を使ってシンタックスハイライトするブロックを作成する方法の覚書です。

WordPress スライダーでアイキャッチ画像を表示するブロックを作成: 2020年10月14日; WordPress のブロックエディタ Gutenberg でアイキャッチ画像をスライダーで表示するブロックを作成する方法についての覚書です。ブロックはダイナミックブロックで作成します。この例では withSelect と getEntityRecords を使って全てのカテゴリーを取得してそのリストを表示し、ユーザーが選択したカテゴリーの投稿のアイキャッチ画像を表示します。

WordPress スライダーを表示するブロックの作成: 2020年10月11日; WordPress のブロックエディタ Gutenberg でスライダーのプラグイン Swiper を使ってスライダーを表示するカスタムブロックの作り方についての覚書です。

WordPress カスタムブロック MediaUpload で複数の画像を挿入: 2020年10月10日; WordPress の Gutenberg で MediaUpload コンポーネントを使って画像を挿入するブロックを作成する際に、複数の画像を挿入する方法の覚書です。MediaUpload コンポーネントの multiple プロパティを true にして複数の画像を挿入して表示し、gallery プロパティを設定して画像の並び替えなどができるようにします。

WordPress カスタムカードブロックの作り方: 2020年10月08日; WordPress のブロックエディタ Gutenberg で MediaUpload コンポーネントを使って画像とタイトル及びテキストを表示するカスタムカードブロックを作成する方法の覚書です。カスタムカードのタイトルはインスペクターでセレクトメニューを表示してタグを選択するようにすることもできます。

WordPress ダイナミックブロックの作り方: 2020年10月03日; WordPress のブロックエディタ Gutenberg でダイナミックブロックを作成する方法についての覚書です。render_callback を使って PHP 側でレンダリングする方法、ServerSideRender コンポーネントの使い方、withSelect を使って投稿を取得する方法（Selector や getEntityRecords）などについて。

WordPress JSX を使った Gutenberg ブロックの作り方: 2020年09月25日; WordPress のブロックエディタ Gutenberg で JSX を使って独自のブロックを作成する方法について。基本的なブロックの作成方法、JSX の基本的な使い方、WordPress のコンポーネントの使い方、インスペクター、ツールバーの設定方法、webpack.config.js を使った環境のカスタマイズ（複数のエントリーポイントの設定方法）などについての覚書です。

WordPress Gutenberg ブロック開発の環境構築: 2020年09月08日; Gutenberg のブロック開発のための JavaScript 環境を @wordpress/scripts（wp-script）と @wordpress/create-block を使って構築する方法についての覚書です。

WordPress Gutenberg ブロックの作成: 2020年09月03日; WordPress のブロックエディター Gutenberg での基本的なブロックの作成方法についての覚書です。単純な静的なブロックから RichText コンポーネントを使った編集可能なブロックの作成方法や registerBlockType の attributes プロパティの使い方や source プロパティなどについて。

React Hooks の基本的な使い方: 2020年08月10日; 基本的な React Hooks（useState、useEffect、useContext、useReducer）の使い方に関する覚書です。

React 要素、React コンポーネント、インスタンス: 2020年08月02日; ブラウザに描画されるものを指す「React 要素」や「コンポーネント」、「インスタンス」の違いについて React 公式ページの Blog に掲載されている記事「React Components, Elements, and Instances」を基にまとめた覚書です（ほぼそのままを意訳したような内容になっています）。

React を使ってみる（基本的な使い方）: 2020年07月15日; React の基本的な使い方を公式ページの「一段階ずつ学べるガイド」を基に個人的にまとめた覚書です。Create React App、React で使う import、JSX、コンポーネント、リストと key、フォームなどの基本的な使い方について。

React の環境構築（セットアップ）: 2020年06月23日; React を使うための環境を構築する方法についての覚書です。CDN を参照して React を使う方法や Create React App を使った環境構築、独自に Bable と webpack を使って環境を構築する方法など。

JavaScript Promise / Async Function の使い方（非同期処理）: 2020年06月17日; fetch() の使い方を追加しました（7月22日）。JavaScript ES6（ECMAScript 2015）で導入された Promise や Async Function（async/await）の基本的な使い方についての覚書です。

webpack の基本的な使い方: 2020年06月08日; webpack のインストール方法や webpack.config.js、Loaders ローダー、Plugins プラグイン、splitChunks などの基本的な使い方についての覚書です。

Node.js の exports と module.exports: 2020年05月27日; Node.js を使ったモジュールのエクスポートとインポート、require、exports、module.exports の使い方についての覚書です。

npm の基本的な使い方: 2020年05月24日; npm（Node Package Manager）の基本的な使い方について覚書です。パッケージのインストール、アンインストール、検索、アップデートなどの基本的な使い方や package.json、package-lock.json を使ったバージョン管理、npm-check-updates を使った更新方法などについて。

Node.js を Mac にインストール（nodebrew の使い方）: 2020年05月11日; Node.js のバージョン管理ツール nodebrew を使って Mac に Node.js をインストールする方法と nodebrew の基本的な使い方についての覚書です。

JavaScript ES6（ECMAScript 2015）で追加された機能: 2020年05月06日; ES6（ECMAScript 2015）で追加された機能（let、const、テンプレートリテラル、デフォルト引数、Rest パラメータ、スプレッド構文、分割代入、for..of、Array.from()、アロー関数、モジュール、Symbol）の基本的な使い方についての覚書です。

Font Awesome の使い方（ver5.9以降）: 2020年04月23日; Font Awesome のバージョン 5.9 以降を利用するにはメールアドレスを登録してアカウントを作成するようになっていました。また、従来の CDN やダウンロードして使う方法に加えて Kit Code を読み込んで使用する方法が追加されています。アイコンの表示方法は以前のバージョンとほとんど同じです。現在の新しいバージョンでの使用法についての解説（覚書）です。

レンダリングを妨げるリソースの除外/CSSを非同期で読み込む: 2020年04月15日; PageSpeed Insights や Chrome の拡張機能 Lighthouse を使ってページをテストすると「レンダリングを妨げるリソースの除外」という項目が表示されることがあります。オンラインツール Critical Path CSS Generator を使って Critical CSS を取得してインライン化し、CSS を非同期で読み込んで CSS の配信を最適化してページの表示速度を改善させる方法と WordPress で CSS を非同期で読み込む方法の覚書です。

XAMPP を Mac にインストール: 2020年04月13日; 通常は MAMP を使用していますが、Apache の 2.4 を使っての確認が必要だったので XAMPP を Mac にインストールしました。Mac OSX 環境への XAMPP（XAMPP for OS X）のインストール方法と基本的な使い方についての覚書です。

ネイティブの JavaScript（Vanilla JS）を使う: 2020年04月10日; JavaScript（ECMAScript 5/ES5）を使った要素の取得や属性の設定など基本的な使い方（要素の操作）についての覚書です。

コンタクトフォーム（お問い合わせページ）の作り方: 2020年03月30日; PHP を使った確認画面のあるコンタクトフォーム（お問い合わせページ）の作成方法についての覚書です。ユーザが入力した値を保持しながらページ間を移動（遷移）するので、セッションを利用します。jQuery を使った入力値の検証や自動返信、PHPMailer を使ったメールの送信（Gmail SMTP サーバ）、reCAPTCHA v3 を使ったスパム対策の実装方法についても掲載しています。

PHP メールフォームの作り方: 2020年03月27日; PHP を使った基本的なコンタクトフォーム（メールフォーム）の作り方について。取り扱っている例は確認画面なしのシンプルなコンタクトフォームで、入力された値の検証は基本的に PHP で行いますが HTML5 の機能や jQuery を使う方法も掲載しています。再読み込みによる二重送信の防止や自動返信の方法、PHPMailer を使ったメールの送信方法、reCAPTCHA v2/v3 を使ったスパム対策の実装方法等。

Google reCAPTCHA の使い方（v2/v3）: 2020年03月22日; Google reCAPTCHA v2 及び v3 の使い方についての覚書です。それぞれのバージョンの基本的な使い方や設定方法（HTML の実装方法や PHP を使った検証方法）の詳細やライブラリを使った検証方法などについて掲載しています。

PHPMailer の使い方: 2020年03月13日; PHPMailer のセットアップ方法や基本的な使い方についての覚書です。Composer を使ったインストールや Gmail の SMTP サーバを使用する方法、また「安全性の低いアプリの許可」を有効にせずに Gmail の SMTP サーバを使用するための SMTP 認証で XOAUTH2 を使う方法などについて。

PHP Composer のインストールと使い方: 2020年03月09日; PHP ライブラリ（パッケージ）をプロジェクト単位に管理するツール Composer の使い方や Mac で Homebrew を使って Composer をインストールする方法の覚書です。

スライダープラグイン Swiper（v5）の使い方: 2020年02月23日; jQuery 不要でレスポンシブ及びタッチデバイス（スマホやタブレット）対応のスライダープラグイン Swiper の基本的な設定方法や使い方についての覚書（解説）です。

サイトの SSL（HTTPS）化の対応（手順）: 2020年02月17日; 既存のサイトを http から https へ移行（SSL化）する際の HTML や WordPress の書き換え（ソースコードの修正）方法の手順などの覚書です。

Mac で MAMP に SSL（https://）を設定: 2020年02月15日; Mac の MAMP で SSL（https://localhost）を使えるようにするための設定方法の覚え書きです。OpenSSL を使った秘密鍵とサーバ証明書の作成方法の基本的なことや MAMP の Apache の設定方法などについて。

WordPress Search Replace DB の使い方: 2020年02月12日; WordPress のサイトの移行作業で、データベースの ULR を置換する際に Search Replace DB を使うとデータベースに保存されたシリアライズされたデータも変換することができます。Search Replace DB の基本的な使い方について。

MAMP エラー Apache が起動しない: 2020年02月11日; MAMP を起動しても Apache が起動せず、Start Servers をクリックすると「Apache couldn't be started. Please check your MAMP installation and configuration.」というエラーが表示されてしまう現象についての覚書です。結果的には MAMP を再インストールしました。

MAMP のインストールと初期設定: 2020年02月10日; Mac で MAMP をダウンロードしてインストールする方法と初期設定や Apache の設定（バーチャルホスト）、httpd.conf の文法エラーをチェックする方法についての覚書です。

WebP 対応・導入: 2020年02月07日; WebP フォーマットの画像をサイトに導入する（対応する）ための覚書です。JPEG や PNG 画像を WebP 画像に変換する方法や WebP 画像の表示方法などについて。

WordPress All-in-One WP Migration を使ってデータを移行: 2020年01月16日; 簡単に WordPress のデータを移行できるプラグイン「All-in-One WP Migration 」の使い方についての覚書です。

PHP でスマホやタブレットなどを判定 Mobile Detect: 2020年01月15日; PHP でスマホやタブレットなどを簡単に判定できる Mobile Detect の使い方についての覚書です。

WordPress Contact Form 7 Conditional Fields: 2019年09月17日; Contact Form 7 でフォームで選択した内容によって次に表示させる内容を変更・決定できる条件分岐機能を追加するプラグイン Contact Form 7 Conditional Fields の使い方について。

Mac ターミナルの基本的な使い方・操作方法（４）: 2020年01月26日; ターミナルを使ったジョブやプロセスの管理やシグナル、ユーザー管理、ソフトウェアのインストール、ネットワークの基本コマンド、などのごく基礎的なことについての覚書です。

Mac ターミナルの基本的な使い方・操作方法（３）シェルスクリプト: 2019年10月08日; シェルの環境設定やパーミッション（アクセス権限）、シェルスクリプト（変数、引数、配列、構文、条件判定、四則演算など）などの基本的なことについての覚書です。

Mac ターミナルの基本的な使い方・操作方法（２）エディタ: 2019年09月02日; macOS ターミナル上で動作するエディタ nano と vim の基本的な使い方や設定、コマンドなどについての覚書です。

Mac ターミナルの基本的な使い方・操作方法（１）: 2019年08月26日; Mac のターミナルを使う方法の覚書です。ターミナルの設定や基本的なコマンド、リダイレクトやパイプの使い方など。

WordPress ブロックエディター Gutenberg に対応: 2019年07月29日; WordPress 5.0 から導入されたブロックエディター（Gutenberg）を使った場合に、作成したテーマを対応させるための覚え書きです。テーマにブロックエディターのスタイルを適用させたり、逆にブロックエディターにテーマのスタイルを適用させる方法などについて。

WordPress パーマリンクリライトルール: 2019年07月22日; パーマリンクやリライトルールの基本的なことやリライトルールを追加する関数 add_rewrite_rule()、add_rewrite_endpoint()、リライトルール関連のフィルター rewrite_rules_array の使い方などについての覚え書きです。

WordPress パンくずリストの作成: 2019年07月04日; プラグインを使わずに functions.php に記述してパンくずリストを表示する方法と JSON-LD で構造化マークアップする方法の覚え書きです。以前ブログに掲載したパンくずリストのコードを更新・修正しました。
2019年07月10日
記事で複数のカテゴリーやタームを選択している場合に、カスタムフィールドを使ってカテゴリーやタームを選択できるようにしました。その他、いくつかコードの修正をしました。

WordPress ページネーションページャー: 2019年06月25日; 前後の投稿や一覧ページ、分割されたページへのリンクを出力するページャやページネーションの使い方や設定方法について。基本的な関数の使い方から前後の投稿へのリンクを表示する際にアイキャッチ画像を表示したり、ページネーションでの出力を Bootstrap の形式に変換する方法、the_post_navigation() などで自動的に出力されるナビゲーションマークアップのカスタマイズ方法なども掲載しています。

Google Code-Prettify シンタックスハイライト: 2019年06月15日; プログラムのコードをキーワードや構文などにより色分けして表示する機能（シンタックスハイライト）を簡単に実装できる Google Code-Prettify の設定方法や基本的な使い方、WordPress でのショートコードの作成方法について。

WordPress ショートコードの作成: 2019年06月12日; WordPress で独自のショートコードを作成する方法やショートコードを使って Youtube の動画や Googlemap を表示する方法についての覚え書きです。

Bootstrap4 の使い方(4) にライトボックスの実装方法を追加: 2019年05月30日; Bootstrap 4 のモーダルを使ったライトボックスの実装方法（プラグインなし）や WordPress での利用方法を追加しました。

WordPress で Bootstrap 4 のカルーセルを使う: 2019年05月29日; WordPress で Bootstrap 4 のカルーセルを使うと投稿に表示してある画像や images フォルダの画像、一覧ページのアイキャッチ画像をスライドショーのように表示することができます。プラグインなどを使わずに簡単なスライドショー（カルーセル）を表示する方法についての覚え書きです。

WordPress アイキャッチ画像や添付画像: 2019年05月26日; アイキャッチ画像の基本的な使い方や設定方法、自動的に生成されるサムネイル画像の設定や不要なサムネイル画像の制御、アイキャッチ画像や添付画像関連の関数の使い方などに関する覚え書き。

WordPress カスタム投稿タイプカスタム分類: 2019年05月16日; カスタム投稿タイプとカスタム分類の設定方法（register_post_type、register_taxonomy）やカスタム投稿タイプとカスタム分類の表示方法などに関する覚え書き。

WordPress カスタムフィールドの使い方: 2019年05月04日; カスタムフィールドの基本的な使い方や add_meta_box で独自にカスタムフィールドを追加する方法、その際の wp_nonce_field を使った CSRF 対策などについて。

WordPress ループで使うテンプレートタグや関数: 2019年04月16日; ループで良く使うテンプレートタグや関数の使い方などに関しての覚え書き。

WordPress テーマにウィジェット機能を追加: 2019年04月03日; WordPress の作成したテーマでウィジェット機能を追加して利用する方法について。register_sidebar や dynamic_sidebar の使い方など。

WordPress ナビゲーションメニュー（カスタムメニュー）: 2019年03月31日; register_nav_menus() を使った登録方法や wp_nav_menu() を使ったメニューの出力方法、管理画面でのメニューの作成方法などについて。

WordPress のループ: 2019年03月20日; WordPress のループの使い方や仕組み、グローバル変数 $wp_query や WP_Query クラス、ページ読み込み時の WordPress の処理の流れなどを理解するための覚え書きです。

WordPress スラッグ（slug）を取得: 2019年03月15日; WordPressのページのスラッグ（slug）を取得する方法について。ループ内やループ外での取得方法についての解説やスラッグを id や class として出力サンプルなど。

XAMPP の再インストール: 2019年03月03日; PHP 7.3 をローカル環境で試すために、XAMPP を再インストールした際の覚書。

WordPress title タグの出力: 2019年02月08日; WordPress4.4 以降でタイトルタグを出力する仕組みや方法について。

WordPress エスケープ処理: 2019年01月17日; WordPress でデータを無害化 (サニタイズ) する方法について。エスケープ処理の方法など。

WordPress のフック（Hooks）: 2019年01月18日; WordPress のフックについての解説。仕組みや使い方について。

WordPress CSSやJavaScriptファイルの読み込み: 2019年01月18日; WordPress での CSS や JavaScript の推奨される読み込み方法につて。

WordPress のユーザー・一覧表示対策: 2019年01月18日; WordPress のいくつかの機能により、ユーザーのログイン ID などを外部から取得することができるようになっているので、その対策について。

Bootstrap 4 の使い方: 2018年12月28日; Twitter 社が開発した CSS フレームワーク Bootstrap 4 の使い方について。Content編、Components編 1、Components編 2、Components編 3、Utilities編もあります。

AMP の導入と実装（基本的なこと）: 2018年8月23日; AMP（Accelerated Mobile Pages）を導入する際に考慮する点や AMP を使ったページの基本的な作り方について。

Google Maps の使い方・利用方法: 2018年7月25日; 2018年7月16日から「Google Maps Platform」という新しいサービスに統合され、利用方法が少し変更になりました。APIキーの取得方法から各種 API を使った Google Maps の表示、マーカー、情報ウィンドウの表示方法や設定、ジオコーディングやジオロケーション、ルートの表示、周辺検索などについて。基本的な使い方から簡単な応用などの解説です。
※ バージョンの指定方法が変更になったので、更新しました。（2018年8月9日）

Font Awesome 5 の基本的な使い方: 2018年6月28日; バージョンが５になった Font Awesome 5 の基本的な使い方について。

Font Awesome 5 の使い方（SVG と JavaScript 編）: 2018年6月28日; Font Awesome 5 を SVG として使用する場合のオプションについての説明。

Google カスタム検索（サイト内検索）の設置: 2018年4月29日; Google が提供する無料のサイト内検索サービスの設置方法や Google インデックス登録・申請について。

SEO 対策（検索エンジン最適化）: 2018年04月23日; SEO 対策の基本的な方法の解説。主に内部対策や、構造化データマークアップ、XML サイトマップの作成・通知、robots.txt などについて。

レスポンシブ Web デザイン作成資料: 2018年3月3日; レスポンシブ Web デザインを作成する際に、必要な知識や情報、サンプルなどを掲載。（Viewport、Media Queries、レスポンシブイメージ、文字のレスポンシブ対応、テーブルのレスポンシブ対応、開閉式ナビゲーションメニューなど）

更新日：2025年06月07日

Personal Web Reference

内容

HTML

CSS

JavaScript / TypeScript / jQuery

PHP

Plugins ＆その他

WordPress

Blog / Web 制作メモ

Blog トップページ

VS Code 「フォルダーを開く」で開くディレクトリ（デフォルトフォルダ）を設定

CATEGORY: HTML/CSS

2023年9月11日

VS Code で「フォルダーを開く」をクリックすると、デフォルトではユーザーのホームディレクトリが開きます。以下は「フォルダーを開く」をクリックした際に開くディレクトリ（デフォルトのフォルダ）を指定する方法です。ツールバーから［Code］→［基本設定］→［設定］を選択して設定エディタを開きます。 macOS の場合、ショートカットコマンドの comma…

VS Code でエクスプローラーのアイコンが消える（エクスプローラーが表示されない）

CATEGORY: HTML/CSS

2023年5月10日

Visual Studio Code で突然エクスプローラーのアイコンが消える（エクスプローラーが表示されない）現象が発生しました。きっかけと原因は不明ですが、解決方法を掲載します。解決方法コマンドパレットを開いて以下の表示位置を初期状態（デフォルト）に戻すコマンドを入力して実行します。 View: Reset View Locations 参考：Fi…

video/audio 要素 iPhone で currentTime が設定できない

CATEGORY: jQuery

2023年5月2日

video 要素や audio 要素で JavaScript を使って currentTime に0以外を設定すると、iPhone では期待通りに動作しません（0を設定する場合は問題ありません）。例えば、以下を設定すると、PC では Chrome や Firefox、Safari では13秒の時点から再生されますが、iPhone では最初（0の位置）から再…

疑似要素を JavaScript でアニメーション（Web Animation API）

CATEGORY: jQuery

2023年4月7日

通常、疑似要素は JavaScript で直接操作できませんが、Web Animation API を利用すると比較的簡単に素の JavaScript でアニメーションを設定することができます。 animate() メソッドの第2引数（または KeyframeEffect() の第3引数）のオブジェクトで pseudoElement プロパティに疑似要素を指…

Mac で Google Chrome のデフォルト言語を変更する方法

CATEGORY: HTML/CSS

2023年3月24日

Windows では、Chrome のすべての設定とメニューを希望の言語で表示するように設定できますが、Mac または Linux の場合、パソコンで使用しているデフォルトのシステムの言語で自動的に表示されます。 Google Chrome ヘルプ：Chrome の言語の変更とウェブページの翻訳そのため、Mac の場合、Chrome の設定からはデフォルト…

Web Design Leaves

Web 制作リファレンス （＋α）

更新情報

Personal Web Reference

Blog / Web 制作メモ

VS Code 「フォルダーを開く」で開くディレクトリ（デフォルトフォルダ）を設定

VS Code でエクスプローラーのアイコンが消える（エクスプローラーが表示されない）

video/audio 要素 iPhone で currentTime が設定できない

疑似要素を JavaScript でアニメーション（Web Animation API）

Mac で Google Chrome のデフォルト言語を変更する方法

Web 制作リファレンス（＋α）