フレームワーク・ライブラリ Day.jsの使い方｜インストールからformat・日付計算・比較まで
Day.js の基本を実例でマスター。インストール、フォーマット、日付操作、比較、locale・プラグイン対応。
フレームワーク・ライブラリ 
開発環境・インフラ npm listの使い方｜パッケージ一覧・依存関係・グローバルを確認
npm パッケージ一覧を表示するnpm listの使い方を解説。--depth=0や--all、-g、特定パッケージの確認まで、用途別にコマンドを整理します。
css CSSで下線の位置を調整する方法｜text-underline-offset・position
text-decorationの下線が文字と重なる・近すぎる悩みを解消。offsetやpositionでの位置調整方法をコード付きで解説します。
開発環境・インフラ npmキャッシュクリアの正しい手順と安全なキャッシュ削除法
npmのキャッシュクリア方法を実例コマンド付きで解説。Windows・Mac・Linux別の手順や安全性、エラーが直らない時の対処法まで網羅的に紹介します。
JavaScript JSONコメントアウトはなぜ書けない?代替法とJSONC活用術
JSONでコメントが書けない理由をRFC8259から解説し、代替の書き方やJSONC・JSON5、YAML移行、CI/CD運用ルールまで紹介します。
JavaScript localStorageにアクセスできない原因と解決策まとめ
localstorageにアクセスできない原因と解決策を解説！安全な実装や、本番環境でデータが消える理由、各種代替手段まで体系的にまとめました。
開発環境・インフラ サイトのIPアドレスの調べ方｜Webツールからコマンドまで
WebサイトのIPアドレスを簡単に調べる方法。無料ツール・コマンド・逆引きをOS別に紹介。初心者から実務者まで必読のガイド。
JavaScript JSでブラウザバックを検知！popstateからNavigation APIまで
JavaScriptでブラウザバックを検知・制御する方法を解説。popstateやNavigation API、BFCache対策まで網羅して紹介
開発環境・インフラ npmのバージョン確認・更新のすべて｜Node環境お困り解決
npm -v でバージョン確認する基本から、エラー解決、アップデート、package.json での環境統一まで実務ガイド。
JavaScript window.open の使い方｜別タブ・サイズ指定・ポップアップ対策
window.open()で別タブ・別ウィンドウを開く方法。ポップアップブロック対応やセキュリティ対策まで、実務で役立つ実装方法をコード例で解説。
css will-changeの使いどころと注意点！CSSアニメーション最適化術
CSS will-changeの正しい使いどころとは？常時指定がNGな理由から、transformでの活用法、JSやReactでの動的な着脱手順まで解説します。
JavaScript そのページでは使っていないjQueryプラグインでエラーを出さないように。jQueryプラグイン存在判定の方法
フロントエンドは開発方法の発展のスピードがすさまじくjavascriptもそのまま書かずwebpackなどのツールを使用することが増えてきました。jQueryに関しては脱jQueryが段々広まっているように見えますが案件によってはまだまだjQueryのお力を借りなければいけません。それはライブラリが豊富でスピーディーに...
JavaScript iPhoneでページ下部のタップイベントを確実に発火する方法
スマホ用に見やすく設定されたWEBページのパターンの1つに画面下に固定されたナビゲーションがあります。ユーザーの親指の位置に近いので良いデザインかと思いきやiPhoneで落とし穴があるので注意が必要です。iPhoneでページ下部固定メニューをタップしても一回では動かない問題iOSの標準ブラウザsafariで下に表示され...
WEB制作その他 AdobefontsのwebフォントがIE11表示されない！それでもIE11で表示させたい人へ
いままで問題なく表示されていたものが急にうまくいかなくなることはよくあることです。Adobeが提供しているフォントサービス「Adobefonts」を利用して表示させていたwebフォントがIE11で表示されなくなり困りました。IE11のコンソール画面を見てみるとjavascriptでエラーが発生しているようです。Prom...
JavaScript はまると面倒！？Instagramのタイムラインをサイトに表示させる方法
「facebookのページプラグインやTwitterの埋め込みタイムラインのようにインスタグラムの投稿をサイトに表示させたい」という要望があることがあります。しかしfacebookのページプラグインやTwitterのタイムラインのように気軽に表示することができません。表示するにはひと手間、ふた手間かかるので注意が必要で...
WordPress WordPressで投稿スラッグ（パーマリンク）を自動的に英数字に変更する方法とコード説明
WordPressの投稿を新規作成したとき、タイトルをつけると同時に投稿スラッグには日本語が入ります。ブラウザがchromeなどのWEBブラウザで直接サイトを見ている場合は日本語スラッグでも一見問題ないように見えますが、SNSなどでシェアした場合、日本語のスラッグは以下のようにエンコードされて貼り付けられてしまいます。...
WordPress 【WordPress】テーマ開発－ブロックパターンの追加方法
WordPressのエディタがGutenbergに変わってしばらく経ちますがブロックエディタは進化してきて馴染んできたと思います。特にブロックパターン機能はHTMLを書けない不慣れなユーザーにも扱いやすくするとても親切なツールです。管理画面を扱うユーザーにとって一度わかってしまえばとても便利なのでブロックパターンは多用...
WordPress WordPressで特定の投稿や固定ページにスタイルやスクリプトを挿入するカスタマイズ
WordPressのテーマ制作時に絶対といってよいほど加えるべき機能がこれです。運用が始まる前はコンテンツ内容は固まっていますが運用段階が始まってしばらくたつと例外処理が発生します。そんなときこの機能を用意しておくとテーマのcssファイルやjsファイルを変更する必要がなく、かつ本番系、開発系で処理をわけることが簡単にな...
開発環境・インフラ npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話
はじめにnpmを使用してサイト制作をする際にコード自動整形ツール「prettier」を使用しています。prettierのバージョンが3にあがってから自動整形されなくなってしまいました。バージョンのバグかと思っていましたがただの設定ミスだったというお話です。prettierをどう入れていたかnpm i -D pretti...
JavaScript inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）
はじめにフォームで入力欄に全角数字だけを入力してほしいときがあります。javascriptでリアルタイム変換が可能なのでひと手間かけて処理を追加しておくと間違いが減ってよりよいフォームになるでしょう。今回はjQueryは使用しないで処理を行うスクリプトです。コードのサンプル早速コードのサンプルです。①"oninput"...
フレームワーク・ライブラリ Astroフレームワークを相対リンクにする方法
はじめにウェブフレームワークAstro（Astro.js）を利用して静的サイトを作成する際に各画像パスだったりサイト内リンクが相対リンクだと便利です。この記事を読むとAstro.jsでの相対リンクのプラグインの設定方法がわかります。Astro（Astro.js）とはAstro.jsはウェブサイトやアプリを作るためのツー...
WordPress WordPressは本当に危険？脆弱性の実態と安全対策
WordPressは脆弱性が多く、攻撃対象になりやすいと言われますが、本当に危険なのでしょうか？本記事では、WordPressの主な脆弱性と安全に運用するための対策をわかりやすく解説。初心者でも実践できるセキュリティ対策を紹介し、あなたのサイトを守る方法を詳しく説明します。
フレームワーク・ライブラリ なぜ使わないの？Astro.jsでモダン＆最速のWebサイト構築！Asrotoとは
Astro JSは、超高速＆最適化された次世代フレームワーク！JavaScriptを最小限に抑えつつ、ReactやVueともスムーズに統合可能。アイランドアーキテクチャで必要な部分だけを動的にし、パフォーマンスを最大化。静的サイトを速く、美しく作りたい開発者必見！詳しく紹介します。
フレームワーク・ライブラリ ここまで出来る！Astro.jsルーティングの基本と動的ルート実装
Astro初心者向けにのルーティングを基礎を詳しく解説！ファイルベースの静的ルーティングはもちろん、動的ルーティングの設定方法やAPI連携によるデータ取得まで幅広く紹介します。具体的なコード例を交え、実践的な活用方法も紹介。Astroを活用した効率的なルーティングを学び、柔軟で高速なWebサイトを構築しましょう！