css プラグインを使わずにモーダルウィンドウを作成しました【JavaScript/CSS】
JavaScriptの練習で簡単なモーダルウィンドウを作成しました。表示する要素にテキストや画像を指定できますが動画には対応しておりません、、。プラグインを使うほどではない時の実装に使えそうなのでメモ。 完成したモーダルウィンドウを確認する...
css 
css プラグインを使わずにLightbox（ライトボックス）風ギャラリーを作りました【JavaScript】
Javascriptの練習でライトボックス風のギャラリーを作成しました。スマホでスワイプできると思いますが、Androidでは確認しておりません。。プラグインを使うほどではない！CDNを読み込みたくない！jQueryを使いたくない！場合に使...
JavaScript 配列の要素を順番に繰り返し取り出す方法【JavaScript】
ボタンを押すたびに配列の中身が表示されるサンプルを作りました。値をすべて取り出したら最初に戻ります。繰り返し処理させるのがポイントです。配列でこういった処理をすることは多いので、コピペできるようにメモしておきます。 配列の要素を順番に繰り返...
Linux ファイルやディレクトリのパーミッションについて調べました【Linux】
毎回分からなくなるパーミッションについて調べたのでメモします。 Linuxすべてのファイルとディレクトリには、ユーザーごとに内容を確認したり編集できるアクセス権が決まってます。これをパーミッションといいます。 所有権と実行権について ユーザ...
WordPress MW WP Formでフォームのバリデーションとエラーをカスタマイズする【WordPress/PHP】
高機能なフォームを手軽に作成できる『MW WP Form』は、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をインストールします。以下のサイトから最新のLT...
JavaScript 商品の色をボタンで選択できるカートボタンを作成しました【Javascript】
アパレル系ショップで、色やサイズをボタンで選択できるカートをちらほら見かけます。ユニ●ロやH&●の有名サイトでも採用されているようです。 今回、商品の色をボタンで選択できるカートを作成したのでメモ。 商品の色をボタンで選択できるカートを確認...
JavaScript Javascriptのクラスで足し算と引き算ができる計算機を作成しました【JavaScript/Class】
Javascriptのクラス構文の練習で色々な計算機を作成しました。 足し算できる計算機のサンプル クラスの構文は次の通りです。まずは足し算をする機能をもったクラスを作成します。 // クラス名、最初は大文字 class Sample { ...
Linux リベースの使い方とマージとの違いについてまとめました【Git/rebase】
リベースは、主に作業ブランチにmasterの内容を取り込む際に使用しています。今回、使い方とマージとの違いをまとめたのでメモ。 仮にこのようなツリーがあったとします。※見やすいようにGitクライアントの『GitKraken』の画面をキャプチ...
Linux Gitで作業中のファイルを一時退避させる【Git/stash】
作業中のファイルを一時中断して、退避する「stash」についてまとめたのでメモ。 stashコマンドを使うと、中途半端な作業の途中でコミットする必要がありません。退避させたいファイルを、一時的に違う場所によけておくイメージです。 基本のコマ...
JavaScript DOMを監視して、要素の追加や削除を検知する方法【Javascript/MutationObserver】
Javascriptで動的に追加した要素にイベントを設定したい！または追加した要素が存在すればこういった処理をしたい。ってことが時々あります。 その場合、どうやって実装すれば良いか調べたのでメモ。DOMの変更を監視する「MutationOb...
Linux GitHubにSSHで接続する方法【Git/GitHub】
2021年8月13日以降、GitHubにパスワード接続でpushやpullができなくなりました。 今回、改めてSSHでの接続方法をまとめたのでメモ。GitHubの公式HPにSSH接続の方法が掲載されています。そちらの情報を参考にしました。ち...
css ページのローディング中にPACEプラグインでプログレスバーを表示する【Javascript/CSS】
表示に時間がかかるような重いページを開く時、プログレスバーなどで読み込み状況を表示させるとページ離脱防止になります。今回、お手軽にプラグインで実装したのでメモ。 PACEプラグインでプログレスバーを表示 設置は簡単で、以下コードをheadタ...
css 要素を背景イメージの大きさに合わせる【CSS/SCSS】
要素に設定した背景イメージを表示させるには、その要素に幅と高さの設定が必要です。幅と高さをイメージにフィットさせたい場合、幅は設定できても、高さを設定できない場合が多いと思います。理由は、レスポンシブデザインだと要素そのものが可変になるので...
css ブラウザのスクロールに応じてアニメーションを実行する方法【Javascript/Intersection Observer】
ブラウザをスクロールすると、文字や画像がふわっと表示されるサイトがあります。こういったスクロールの量によって発火するイベントはjQueryのプラグインを使っていました。今回、jQueryを使用しない実装方法を調べたのでメモ。 Interse...
css PhotoSwipeをオプションとCSSだけでカスタマイズしました【JavaScript/CSS】
PhotoSwipeは、拡大画像をポップアップ表示するライトボックス系のプラグインです。少し古いプラグインですが、最近では新しいバージョンも開発中らしいです。こちらが本家のサイトです。 カスタマイズの内容（デモ） 設置方法はいろいろなブログ...
Linux Gitのコンフリクト（conflict）を解消する手順についてまとめました【Git】
クライアントソフトでGitを使っていますが、コマンドでも操作できるようになりたいので一連の操作をメモしておきます。 マージする時、どうしても発生してしまうコンフリクト（競合）。今回、コンフリクトの発生から解消方法をまとめました。 マージす...
JavaScript 配列の要素がオブジェクトの場合、キーの値でソート・抽出する方法【Javascript/filter/sort】
配列の要素がオブジェクトの場合、キーの値でソート、抽出する方法を調べたのでメモ。今回操作する配列には、このようにオブジェクトが格納されているとします。それぞれのオブジェクトには、id、画像名、日付、グループ名をキーとして登録します。 con...