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

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

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

更新情報

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

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

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

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

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

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

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

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

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

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

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

New 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、レスポンシブイメージ、文字のレスポンシブ対応、テーブルのレスポンシブ対応、開閉式ナビゲーションメニューなど）

更新日：2023年09月12日

Personal Web Reference

内容

HTML

CSS

JavaScript / 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 制作リファレンス（＋α）