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

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

更新情報

New React を使ってみる（入門編）
2020年07月15日
React の基本的な使い方を公式ページの「一段階ずつ学べるガイド」を基に個人的にまとめた覚書です。
New React の環境構築（セットアップ）
2020年06月23日
React を使うための環境を構築する方法についての覚書です。CDN を参照して React を使う方法や Create React App を使った環境構築、独自に Bable と webpack を使って環境を構築する方法など。
New Promise の使い方 / 非同期処理 Async Function
2020年06月17日
JavaScript ES6（ECMAScript 2015）で導入された Promise や Async Function（async/await）の基本的な使い方についての覚書です。
New webpack の基本的な使い方
2020年06月08日
webpack のインストール方法や webpack.config.js、Loaders ローダー、Plugins プラグイン、splitChunks などの基本的な使い方についての覚書です。
New Node.js の exports と module.exports
2020年05月27日
Node.js を使ったモジュールのエクスポートとインポート、require、exports、module.exports の使い方についての覚書です。
New npm の基本的な使い方
2020年05月24日
npm（Node Package Manager）の基本的な使い方について覚書です。パッケージのインストール、アンインストール、検索、アップデートなどの基本的な使い方や package.json、package-lock.json を使ったバージョン管理、npm-check-updates を使った更新方法などについて。
New Node.js を Mac にインストール（nodebrew の使い方）
2020年05月11日
Node.js のバージョン管理ツール nodebrew を使って Mac に Node.js をインストールする方法と nodebrew の基本的な使い方についての覚書です。
New 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 を使う
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、レスポンシブイメージ、文字のレスポンシブ対応、テーブルのレスポンシブ対応、開閉式ナビゲーションメニューなど）

更新日：2020年07月15日

Personal Web Reference

Web 制作リファレンス目次ページ　
HTML
CSS
jQuery/JavaScript
PHP
Plugins ＆その他
WordPress

Blog / Web 制作メモ

Blog トップページ

最近の覚書やメモ

htmlcss 解析不能な構造化データ 値の型が正しくありません

CATEGORY: HTML/CSS

2020年5月27日

「Search Console により、貴サイトに影響する「解析不能な構造化データ」関連の問題が 1 件検出されました。」というメールが Google Search Console Team より届きました。内容は以下のようなものです。 原因は結論から言うと、JSON-LD で構造化マークアップしたパンくずリストの不注意による記述ミス（引用符の片方が削除され…

続きを読む

htmlcss reCAPTCHA v3 送信時にトークンを取得

CATEGORY: HTML/CSS

2020年3月22日

reCAPTCHA v3 を使う際に、送信時にトークンを取得する方法についての覚書です。 reCAPTCHA v3 のガイドに掲載されている以下の例の場合、ページを読み込んですぐにトークンを取得しているので、2分後にはこのトークンの有効期限が切れてしまいます。 <script src="https://www.google.com/recap…

続きを読む

wordpress add_theme_support html5 「The type attribute is unnecessary for JavaScript resources」エラー/警告

CATEGORY: WordPress

2020年1月12日

wp_enqueue_script で JavaScript を読み込むと今までは以下のように HTML5 では不要な script 要素の type 属性が出力されたため、W3C のバリデーションでチェックすると「The type attribute is unnecessary for JavaScript resources」のような警告（Warnin…

続きを読む

htmlcss Microsoft Remote Desktop 10 を使って Mac から Windows へリモートデスクトップ接続（カスペルスキー インターネット セキュリティ 2019）

CATEGORY: HTML/CSS

2019年8月7日

Microsoft Remote Desktop 10 を使って Mac から Windows へリモートデスクトップ接続する方法の覚書です。 また、ウィルス対策ソフト「カスペルスキー インターネット セキュリティ 2019」を使っている場合の設定方法についても記載しています。　 目次 Windows 側の確認 リモートデスクトップ接続するには、Window…

続きを読む

htmlcss Dreamweaver CC 2019 に Emmet をインストール

CATEGORY: HTML/CSS | TAG:

2019年8月5日

Dreamweaver CC 2019 には Emmet が既に入っていますが、拡張機能として追加する方法の覚書です（以下は Mac版 についてです）。 Dreamweaver 標準で搭載されている Emmet では Wrap with abbreviation などの一部機能が使えないために別途インストールしました。 Adobe の Extension M…

続きを読む

Category

Tags