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

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

更新情報

New MediaElement.js の使い方
2023年5月27日
JavaScript オープンソースのメディアプレーヤー（音声・動画プレーヤー）MediaElement.js の基本的な使い方とサンプルです。MediaElement.js を使うと簡単に audio 要素や video 要素による音声データや動画をクロスブラウザで統一したスタイルで表示することができます。
New audio 要素と JavaScript でオーディオプレーヤーを作成
2023年5月13日
HTML と CSS、JavaScript で音声プレーヤーやプレイリストを独自に作成することができます。SVG アイコンを使えばボタンなども簡単にそれなりに表示することができます。
New audio タグ（要素）を Javascript を使って操作
2023年5月13日
JavaScript で音声ファイルを再生するための基本的な操作方法について。 HTMLMediaElement インターフェイスのプロパティやメソッド、イベントの基本的な使い方や音声を再生、停止、ボリュームの調整、ミュート、ループなどについて。
New HTML audio タグ（要素）の使い方
2023年5月13日
HTML audio タグ（要素）を使って音声ダータを再生させる基本的な使い方や知っておくと便利な各属性の使い方について。
New input type=range レンジスライダーをカスタマイズ
2023年5月10日
ブラウザによってデフォルトのスタイルが異なるレンジスライダーをCSS でスタイルを統一する方法や JavaScript を使って入力値に合わせてトラックの色を塗り分ける方法について。
New HTML video タグで動画埋め込み（背景動画）
2023年4月30日
video タグの基本的な使い方や動画を背景として表示する方法、スマホでは動画を読み込まないようにしたり、JavaScript を使った操作方法、動画を軽量化する方法などについて。
New JavaScript でメディアクエリ（matchMedia と MediaQueryList）
2023年4月26日
JavaScript でメディアクエリを利用する方法（matchMedia と MediaQueryList の使い方）やビューポート幅により条件分岐する方法、一定の幅未満ではビデオを読み込まない方法について。
New details と summary 要素 + JavaScript で作るアコーディオン
2023年4月13日
details 要素（詳細折りたたみ要素）と JavaScript を使ってアコーディオンを実装する方法の覚書です。summary 要素の矢印アイコンのカスタマイズ方法などについても。
New CSS ::marker 擬似要素
2023年4月12日
::marker 擬似要素は、リスト項目（li 要素）のマーカー（記号や番号）や summary 要素の矢印アイコンを選択するセレクタで、::marker を使うと、リスト項目などのマーカー（記号や番号）をカスタマイズすることができます。
New CSS 擬似要素 ::before ::after
2023年4月5日
CSS 擬似要素の ::before と ::after の基本的な使い方や画像や SVG、ユニコードを表示する方法及びその際のサイズの指定方法、斜めの背景の設定や疑似要素で矢印や三角形のアイコンを作成して表示する方法などについて。
New 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年05月27日

Personal Web Reference

内容
HTML
CSS
JavaScript / jQuery
PHP
Plugins ＆その他
WordPress

Blog / Web 制作メモ

Blog トップページ

最近の覚書やメモ

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

CATEGORY: HTML/CSS

2023年5月10日

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

続きを読む

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

CATEGORY: jQuery

2023年5月2日

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

続きを読む

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

CATEGORY: jQuery

2023年4月7日

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

続きを読む

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

CATEGORY: HTML/CSS

2023年3月24日

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

続きを読む

jquery TypeScriptの変数定義時のコンパイルエラー ：ブロック スコープの変数 ‘name’ を再宣言することはできません。ts(2451)

CATEGORY: jQuery

2023年2月8日

TypeScript で name などの特定の識別子を使って変数を定義するとコンパイルエラーが発生します（ファイルがモジュールでない場合）。 index.ts const name: string = 'foo'; console.log(name); % npx tsc //コンパイルを実行 src/index.ts:1:7 – erro…

続きを読む

Category

Tags