header_image

このサイトにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

サムネイル

WPで下書きページを第三者と共有できるプラグイン【Publi……

2024年11月07日
WordPressにおける下書き状態のページは非ログイン状態では閲覧することができないので、新規追加予定ページをクライアントにチェックしてもらう時の良い方法を探 […]
サムネイル

WordPressの予約語とは?【カスタム投稿タイプ・カスタ……

2024年11月07日
WordPressのカスタム投稿タイプやカスタムタクソノミーを扱うにあたり、予約語について学んだので備忘録としてまとめます。 予約語とは? WordPressで […]
サムネイル

HTMLのpicture要素とsourceタグの使い方【レス……

2024年11月07日
picture要素を使った画像の表示について備忘録としてまとめます。 picture要素とは? HTMLのpicture要素は、様々な画面サイズやブラウザに合わ […]
サムネイル

JSでビデオやピクチャが現在どのソース要素を表示しているか取……

2024年11月07日
表示中のsource要素のファイルパスをJSで取得したい picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、Jav […]
サムネイル

CSSの疑似クラスnth-childとnth-of-type……

2024年11月07日
疑似クラスnth-childとnth-of-typeについて CSSの疑似クラス「:nth-child」と「:nth-of-type」はどちらも何番目の要素とい […]
サムネイル

【Chrome】デベロッパーツールでWebPを無効にする方法

2024年10月02日
WebPとは? WebPは、JPGやPNGといった従来のファイル形式よりも、高画質を維持しつつファイルサイズを大幅に小さくできる次世代画像フォーマットと呼ばれる […]
サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

video要素とsource要素で画面サイズに応じて読み込む……

2024年09月19日
最終更新日:2024年11月07日
HTMLのsource要素とは? HTMLのsource要素は、video要素やpicture要素の子要素として複数のメディアソースを指定したいときに使う要素で […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]
サムネイル

JSで文字列の中の任意の位置に別の文字を挿入する【slice……

2024年09月04日
JavaScriptに文字列の中の任意の位置に別の文字を挿入するにはslice()メソッドを利用します。sliceは特定の文字列の任意の位置から任意の文字数分を切り出すメソッドで、これを使って対象の文字列を一旦分解し、挿入したい文字と一緒新しい文字列としてくっつけ直します。
サムネイル

HTMLのテキストボックスにクリアボタンを実装【inputの……

2024年09月04日
inputのtype属性を「search」にすれば自動的にクリアボタンが表示されます。簡単ですがデザインはブラウザに依存しておりカスタマイズはできません。JSを使って処理を自作する方法は、HTML・CSS・JSに関するある程度の知識が必要ですが、自由にカスタマイズできます。
サムネイル

【数値のゼロ埋め】JSのpadStart(padEnd)メソ……

2024年09月04日
JavaScriptのpadStartは対象の文字列が任意の桁数になるまで、その先頭から指定した文字で文字埋めを実行するメソッドです。第一引数に最終的な桁数、第二引数に埋める文字を指定します。
サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

WPから送信したメールがGmailに届かない時の対応【WP ……

2024年08月01日
WordPressのCF7で作ったメールフォームから送信されたメールがGmailだと受信できなくなっていることに気づきました。WP側の送信方法を見直す必要があり、WP Mail SMTPというプラグインを導入することで解決できたので、そのとき学んだ内容を備忘録として残します。
サムネイル

JSのsetIntervalで一定時間ごとに繰り返し処理を実……

2024年08月01日
JSのsetIntervalとは? 業務においてJavaScriptを使って一定時間おきに繰り返し処理を実行させたい場面があり、これまで大まかにしか理解していな […]
サムネイル

JSのsetTimeoutで指定した時間後に処理を実行させる……

2024年08月01日
setTimeout()は、指定した時間が経過したら処理を一度だけ実行するといったタイマーのような設定ができる関数です。一定間隔で処理を繰り返すsetIntervalと異なり、処理が一回しか実行されない点が特徴です。停止させる場合はclearTimeoutを使います。
サムネイル

Windows10で日付と時刻を自動調整する方法【日時のズレ……

2024年08月01日
PCの時計は実際の時計と同じように手動で時刻を合わせることもできますが、Windows10には時刻の自動設定というものが用意されており、この設定を有効化すれば常に正しい時刻が表示されます。
サムネイル

PHPで配列内を検索してインデックス番号を取得する【arra……

2024年07月03日
array_searchは、配列内から特定の値を検索し、見つかった場合はその値のキー(インデックス番号)を返す関数です。該当する値が複数ある場合は、はじめに見つかったインデックス番号を返します。
サムネイル

PHPで配列内に値が存在するか判定する【in_array】

2024年07月02日
PHPのin_arrayは、配列内に特定の値が存在するかを判定して、結果をtrueかfalseで返してくれる関数です。第一引数に「調べたい値」、第二引数に「対象の配列」を指定して判定を行います。
サムネイル

JSでセレクト値が変更されたらフォームを送信を実行する方法【……

2024年07月02日
ユーザーがセレクトボックスの値を変更したタイミングでフォームの送信を実行するという処理を実装する機会があったので、その方法を備忘録として残しておきます。