WordPress MW WP Formでフォームのバリデーションとエラーをカスタマイズする【WordPress/PHP】
高機能なフォームを手軽に作成できる『MW WP Form』は、WordPressでお馴染みのプラグインです。今回、フォームに必須のバリデーション（入力チェック）およびエラー表示をカスタマイズしました。希望通りに実装できたのでメモ。ちょっと...
WordPress 
css CSSでボーダー（枠線）に画像を設定する方法【CSS/border-image】
CSSのborder-imageでボーダーに画像を設定する方法を調べました。設定項目が多くて混乱しましたが、必要なポイントだけ抑えたら希望通りの表現ができました。これでおしゃれな枠線も思いのままです！
作成した枠線のサンプルを確認す...
Linux Macでシンボリックリンクを相対パスで作成する方法【Linux/Mac】
シンボリックリンクはディレクトリやファイルのショートカットのことです。要はMacのエイリアスのことですが、Finderで作成するエイリアスはcdコマンドで移動ができません。そのため、できる限りシンボリックリンクで作成します。
シンボ...
JavaScript TypeScriptをインストールして自動的にコンパイル＋実行できるようにする（開発環境構築）【JavaScript】
TypeScriptを使う機会があったので開発環境を構築しました。忘れそうなのでメモしておきます。なお、パソコンはMacを使っています。
Node.jsをインストールする
まずはNode.jsをインストールします。以下のサイト...
JavaScript 商品の色をボタンで選択できるカートボタンを作成しました【Javascript】
アパレル系ショップで、色やサイズをボタンで選択できるカートをちらほら見かけます。ユニ●ロやH&●の有名サイトでも採用されているようです。
今回、商品の色をボタンで選択できるカートを作成したのでメモ。
商品の色をボタンで...
JavaScript Javascriptのクラスで足し算と引き算ができる計算機を作成しました【JavaScript/Class】
Javascriptのクラス構文の練習で色々な計算機を作成しました。
足し算できる計算機のサンプル
クラスの構文は次の通りです。まずは足し算をする機能をもったクラスを作成します。
// クラス名、最初は大文字
class...
Linux リベースの使い方とマージとの違いについてまとめました【Git/rebase】
リベースは、主に作業ブランチにmasterの内容を取り込む際に使用しています。今回、使い方とマージとの違いをまとめたのでメモ。
仮にこのようなツリーがあったとします。※見やすいようにGitクライアントの『GitKraken』の画...
Linux Gitで作業中のファイルを一時退避させる【Git/stash】
作業中のファイルを一時中断して、退避する「stash」についてまとめたのでメモ。
stashコマンドを使うと、中途半端な作業の途中でコミットする必要がありません。退避させたいファイルを、一時的に違う場所によけておくイメージです。
...
JavaScript DOMを監視して、要素の追加や削除を検知する方法【Javascript/MutationObserver】
Javascriptで動的に追加した要素にイベントを設定したい！または追加した要素が存在すればこういった処理をしたい。ってことが時々あります。
その場合、どうやって実装すれば良いか調べたのでメモ。DOMの変更を監視する「Mutati...
Linux GitHubにSSHで接続する方法【Git/GitHub】
2021年8月13日以降、GitHubにパスワード接続でpushやpullができなくなりました。
今回、改めてSSHでの接続方法をまとめたのでメモ。GitHubの公式HPにSSH接続の方法が掲載されています。そちらの情報を参考にしま...
css ページのローディング中にPACEプラグインでプログレスバーを表示する【Javascript/CSS】
表示に時間がかかるような重いページを開く時、プログレスバーなどで読み込み状況を表示させるとページ離脱防止になります。今回、お手軽にプラグインで実装したのでメモ。
PACEプラグインでプログレスバーを表示
設置は簡単で、以下コー...
css 要素を背景イメージの大きさに合わせる【CSS/SCSS】
要素に設定した背景イメージを表示させるには、その要素に幅と高さの設定が必要です。幅と高さをイメージにフィットさせたい場合、幅は設定できても、高さを設定できない場合が多いと思います。理由は、レスポンシブデザインだと要素そのものが可変になるの...
css ブラウザのスクロールに応じてアニメーションを実行する方法【Javascript/Intersection Observer】
ブラウザをスクロールすると、文字や画像がふわっと表示されるサイトがあります。こういったスクロールの量によって発火するイベントはjQueryのプラグインを使っていました。今回、jQueryを使用しない実装方法を調べたのでメモ。
Int...
css PhotoSwipeをオプションとCSSだけでカスタマイズしました【JavaScript/CSS】
PhotoSwipeは、拡大画像をポップアップ表示するライトボックス系のプラグインです。少し古いプラグインですが、最近では新しいバージョンも開発中らしいです。こちらが本家のサイトです。
カスタマイズの内容（デモ）
設置...
Linux Gitのコンフリクト（conflict）を解消する手順についてまとめました【Git】
クライアントソフトでGitを使っていますが、コマンドでも操作できるようになりたいので一連の操作をメモしておきます。
マージする時、どうしても発生してしまうコンフリクト（競合）。今回、コンフリクトの発生から解消方法をまとめました。
...
JavaScript 配列の要素がオブジェクトの場合、キーの値でソート・抽出する方法【Javascript/filter/sort】
配列の要素がオブジェクトの場合、キーの値でソート、抽出する方法を調べたのでメモ。今回操作する配列には、このようにオブジェクトが格納されているとします。それぞれのオブジェクトには、id、画像名、日付、グループ名をキーとして登録します。
...
JavaScript ローカルストレージとプロキシの使い方についてまとめました【JavaScript/LocalStorage/Proxy】
LocalStrage（ローカルストレージ）とProxy（プロキシ）についてまとめたのでメモ。
LocalStrage（ローカルストレージ）とは
LocalStrageは、キーと値の組み合わせをブラウザに保存する仕組みです。ブ...
css floatでキャプション付き画像にテキストを回り込ませる【CSS】
floatでテキストを画像に回り込ませるサンプルを作ったのでメモ。
floatでテキストを回り込ませるデモ（デモ）
ブラウザの幅を小さくすると、画像にテキストが回り込みます。PC版、SP版でも同じコードが使えます。
PC...
css ルビ（ふりがな）の位置を調整する方法【CSS】
ウェブページの漢字にルビ（ふりがな）をふる機会があったのですが、普通に表示させるとブラウザによって表示がずれます。今回、ずれない方法で表示させたのでメモ。
ルビをふるコード
こちらがルビをふるタグです。<rt>タグの部分...
css ページ全体に色違いの背景パターンを表示する方法【CSS】
ページ全体にパターンを表示させて、色違いの背景色を重ねたい時のサンプルを作ったのでメモ。
完成したページを確認する（デモ）
こちらが完成したページです。背景のパターンは透過pngで作成しています。画像を差し替えれば色々なデザイ...