Web制作 【CSS】モーダルウインドウ実装時に後ろの要素がスクロールするのを防ぐ （スクロール連鎖防止）
position: fixedで配置した要素の後ろの要素がスクロールしてしまうモーダルウインドウなどposition: fixedでスクロール可能な要素を固定して配置した場合、要素の下部の境界に到達するとブラウザは次にbody要素をスクロー...
Web制作 
フォーム Google reCAPTCHA V3を導入する
PHPメールフォームの場合です。1. シークレットキー・サイトキーを発行するGooglereCAPTCHAの管理画面でドメインを指定し、 シークレットキーとサイトキーを発行します。reCAPTCHA管理画面reCAPTCHAタイプはV2かV...
Web制作 JavaScriptでスクロールを監視するならIntersection Observerが便利
Intersection ObserverとはIntersection Observerは、特定の領域を監視して、監視対象の要素がその領域に交差したかどうかを検知します。デフォルトでは、viewport（見えている範囲）とある要素が交差した...
Web制作 SNS（ソーシャルメディア）公式ロゴアイコン配布ページまとめ
いちいち探すのが面倒なのでよく使うものだけをまとめました。使用にあたっては事前にガイドラインをご確認ください。X（エックス）X logo free downloadX logo という見出しの右横の「Download」ボタンから一式ダウンロ...
Web制作 JavaScriptの同期通信でPHPとJSONデータをやりとりする
PHPから返ってきた結果ををreturnしたいときなど、どうしても非同期ではなく同期通信でやりたいとき用です。下記のようにXMLHttpRequestのrequest.openの第三引数をfalseにすることで同期通信が可能です。const...
OFFICE 【エクセル】VBAマクロを使ってシートの内容をCSVファイル（UTF-8 BOMなし）で書き出す
エクセルのデータをCSVファイル（UTF-8 BOMなし）でエクスポートするVBAマクロです。指定したシートの全セルをチェックし、空行は無視して書き出します。CSVファイルはエクセルファイルと同じフォルダに出力するよう設定しています。Sub...
Web制作 サブディレクトリ配下をドキュメントルートとして読むように設定する
本番環境はルートディレクトリで運用し、テストの環境のみサブディレクトリで運用したい場合、CSSや画像のパスが異なるため公開時にすべてのパスを変更しなければなりません。パスをすべて変更するのは面倒かつ変更漏れのリスクもあるため、パスの指定は本...
Web制作 【JavaScript】フォームの要素を取得する際、要素名に変数を設定する
<form name="myform"> <input name="title" type="text"></form>たとえば、上記のフォームからinputのvalueを取得したい場合、const value = document.for...
Web制作 【JavaScript/PHP】生年月日から年齢を計算する
現在の日付から生年月日を引いて、1万で割ると年齢を計算することができます。それぞれ、19900401の部分に生年月日を設定します。PHP$calcAge = floor((date('Y/m/d') - 19900401) / 10000)...
Web制作 【HTML】em・i・strong・mark・bタグの違い
テキストを強調する要素として「em」「i」「strong」「mark」「b」などがありますが、使い分けの判断に迷うことがあるので各要素の違いをまとめてみました。emタグ強勢する（アクセントを付ける）箇所を表します。同じ文でもどの個所を強勢す...