# WATASHI.xyz > わたしの情報をわたします --- ## 投稿 - [CSS clip-pathで曲線を描く方法｜SVGのpath関数や波・角丸・吹き出しデザインまで完全ガイド](https://watashi.xyz/css-clip-path/): clip-path 曲線を使ったデザイン... - [ハンバーガーメニューをページ内リンクで確実に閉じる方法とトラブル解消法【jQuery＆Vanilla JS対応】](https://watashi.xyz/js-hamburger-menu/): 「ハンバーガーメニューのページ内リンクで... - [JavaScriptで「もっと見る」ボタンを作る！クリックで表示・閉じる・10件ずつ展開まで対応した実装方法を徹底解説！](https://watashi.xyz/js-more-read/): Webサイトの長いリスト、どう表示してい... - [もう迷わない！ChatGPTに伝わるMarkdownプロンプトの書き方と現場で使える実践テンプレート集【完全版】](https://watashi.xyz/markdown-prompt/): ChatGPTにMarkdown形式でプ... - [【初心者必見】Markdownでできることを徹底解説！歴史や成り立ち、基本記法からGitHubやQiitaでの活用法まで](https://watashi.xyz/markdown/): 「Markdownで何ができるの？」Ma... - [CSS Subgridの使い方を完全マスター！高さ揃え＆孫要素も自由自在に配置！みんながわかる実践ガイド](https://watashi.xyz/css-subgrid/): CSS Subgridの基本概念や従来の... - [HTML＆CSSプログレスバー実装ガイド｜おしゃれ・アニメ・円形・React対応まで＋コピペOKサンプル付き](https://watashi.xyz/html-progress-bar/): HTMLプログレスバーのデザインをもっと... - [【初心者向け】tailwind.config.jsが見当たらない理由とCSSファースト時代の正しい使い方](https://watashi.xyz/tailwind-config-js/): 「tailwind. config. j... - [WordPress検索機能の自作手順を完全解説！カスタム投稿・絞り込みまで対応する実装方法とは？](https://watashi.xyz/wp-search/): WordPressの検索機能を自作する理... - [CSSタイムラインの作り方まとめ｜沿革・経歴・スケジュールに使えるデザインと実装コードを厳選紹介！](https://watashi.xyz/timeline/): タイムラインを自作したいけれど方法がわか... - [HTMLプルダウンメニューをJavaScriptで強化！初心者向け実装ガイドと動的機能の作り方](https://watashi.xyz/js-dropdown/): HTMLとJavaScriptでプルダウ... - [WordPressウィジェット作り方完全ガイド｜自作・エリア追加・表示制御まで初心者向けに徹底解説！](https://watashi.xyz/wp-custom-widget/): WordPressでオリジナルのウィジェ... - [【徹底解説】.htaccessでWordPressのIP制限を設定する方法 | 強固なセキュリティ対策！](https://watashi.xyz/wp-htaccess-ip/): WordPressは世界で最も人気のある... - [リファラーが取得できない理由と対策｜(direct)/(none)の原因からPHP・JSの実装・リダイレクト問題まで](https://watashi.xyz/referrer-error/): リファラーが取得できない原因にお悩みの方... - [HTMLのツールチップ、title属性では改行できない？広く使えるCSS・JavaScriptでの実装テクニック](https://watashi.xyz/tooltip-line-break/): HTMLのツールチップで改行を実現する方... - [SVGで地図や図解をインタラクティブに！クリッカブルマップの実践例とテクニックを紹介](https://watashi.xyz/clickable-map/): 「svg クリッカブル マップ」の基本的... - [HTML detailsタグアニメーション簡単実装ガイド！CSS・JSでアコーディオン、三角アイコン変更を実現](https://watashi.xyz/details-html/): detailsタグ アニメーションの実装... - [【プラグイン不要】WordPressお問い合わせフォームを完全自作！初心者向けに確認画面・スパム対策も解説](https://watashi.xyz/wp-contact-form/): WordPressでお問い合わせフォーム... - [【保存版】CSS var()の使い方徹底解説！カスタムプロパティで色・サイズ・レイアウトを一括管理するテクニック＆実践例](https://watashi.xyz/css-var-usage/): CSS変数でCSS設計を効率化！カスタム... - [fetchでCORSエラーが出た時の対処法｜no-corsやAccess-Control-Allow-Originを解説](https://watashi.xyz/fetch-cors-error/): fetchで困るCORSエラーを解説！「... - [Astroでブログを構築する方法｜レイアウト設計から記事管理・デプロイまでまるっと解説！初心者にも最適](https://watashi.xyz/astro-blog/): Astroでブログを始めたい方に向けてデ... - [JavaScriptでリンクを別ウインドウ・タブで開くには？window.openの使い方・サンプルコード付き！](https://watashi.xyz/js-open-window/): JavaScriptで別ウインドウを開く... - [【初心者向け】HTMLテーブルにソート機能を追加！コピペOK＆JavaScriptだけで簡単並び替えする方法](https://watashi.xyz/sortable-table/): HTMLのtableにソート機能を追加す... - [Astroでディレクトリ構成を最適化する方法｜初心者でもできる構造設計の完全ガイド](https://watashi.xyz/astro-directory/): AstroJSプロジェクトのディレクトリ... - [Astro JSの始め方ガイド：最初の一歩から応用まで｜初心者でもわかるステップバイステップ解説](https://watashi.xyz/astro-starter/): Astro JSを始めてみたいけれど、何... - [localStorageが使えない5つの原因と対処法｜ブラウザ依存・落とし穴・代替手段まで完全解説！](https://watashi.xyz/localstorage-not-working/): localStorageが動作しない原因... - [npmパッケージ一覧を一発表示！初心者でも迷わないnpm listコマンドの使い方＆おすすめパッケージ](https://watashi.xyz/npm-packages/): npmでインストール済みのパッケージ一覧... - [【初心者必見】3分でできるViteの始め方！爆速開発環境を最短ステップで完全構築【2025年最新版】](https://watashi.xyz/vite-starter/): 【Vite入門決定版】初心者でも分かる正... - [Webpackは本当に開発終了したのか？現状と後継候補（Vite・Turbopack）への移行手順まで全まとめ](https://watashi.xyz/webpack-end/): Webpackの開発終了に関する真相を公... - [npmキャッシュ削除で解決！インストール失敗を防ぎ開発をスムーズに進める方法【完全解説】](https://watashi.xyz/npm-cache-clear/): npmキャッシュクリアの完全ガイド。開発... - [【初心者OK】npm audit fixとは？エラーの意味・--forceの使い方・解決しないときの対処法まで徹底解説](https://watashi.xyz/npm-audit-fix/): npm audit fixの基本から応用... - [npm version を確認する方法｜インストール済みのバージョン確認・変更・管理](https://watashi.xyz/npm-version-check/): npmのバージョン確認方法を総合的に解説... - [Tailwind CSSで要素・テキストを右寄せする最適解｜初心者でもわかる使い分け＆実践例付き](https://watashi.xyz/tailwind-right/): TailwindCSSで右寄せを実装する... - [Tailwind CSSで「display: none」にしたい？非表示にする方法を解説！](https://watashi.xyz/tailwind-display-none/): Tailwind CSSで「displa... - [CSSの「@property」の使い方完全ガイド｜基礎・実例・注意点まで徹底解説【初心者向け】](https://watashi.xyz/css-property-rules/): CSSの@propertyは、カスタムプ... - [JavaScriptでブラウザバックを正確に判定する方法｜よくある失敗と対処法もセットで解説](https://watashi.xyz/catch-browserback-js/): JavaScriptでブラウザバックを判... - [初心者でもできる！JavaScriptバージョンの確認方法とESバージョンの違いをわかりやすく解説](https://watashi.xyz/check-js-version/): JavaScriptのバージョン確認方法... - [Bing検索の結果表示がGoogleと違う場合の直し方～Bing検索とGoogle検索の違いも説明](https://watashi.xyz/bing-search-result/): Bingの検索結果がGoogleと違って... - [簡単にできる！特定のサイトのIPアドレスの調べ方【コマンド・WEBツール】](https://watashi.xyz/search-ip-address/): Webサイトのアドレスを簡単に調べる方法... - [【2025年最新】Day.jsの使い方完全マスターガイド - Moment.js比較から実践テクニックまで](https://watashi.xyz/dayjs/): JavaScript開発者必見！2KBの... - [Astro.jsでSEO対策を実装する方法：初心者向けガイド](https://watashi.xyz/astro-js-seo/): Astro. jsでSEO対策を完全攻略... - [JavaScriptのPromiseをわかりやすく解説！初心者向け入門ガイド](https://watashi.xyz/js-promise/): JavaScriptのPromiseを初... - [Astro.jsでSSRを導入！設定からデプロイまで解説](https://watashi.xyz/astro-ssr-start/): Astro. jsのSSR（サーバーサイ... - [ここまで出来る！Astro.jsルーティングの基本と動的ルート実装](https://watashi.xyz/astro-routing/): Astro初心者向けにのルーティングを基... - [JavaScriptでキャッシュをクリアする方法【完全ガイド】](https://watashi.xyz/js-cache-clear/): はじめに Web開発を行っていると、変更... - [なぜ使わないの？Astro.jsでモダン＆最速のWebサイト構築！Asrotoとは](https://watashi.xyz/about-astro/): Astro JSは、超高速＆最適化された... - [IndexedDBとは？ブラウザ内で使えるデータベースの基本と活用法](https://watashi.xyz/indexeddb/): IndexedDBは、ブラウザ内で大容量... - [WordPressは本当に危険？脆弱性の実態と安全対策](https://watashi.xyz/wordpress-vulnerability/): WordPressは脆弱性が多く、攻撃対... - [JavaScriptで一定時間後に自動で閉じるalertの実装方法](https://watashi.xyz/js-alert-close/): はじめに JavaScriptのaler... - [CSSのエラーチェック方法とおすすめツール](https://watashi.xyz/css-error-check/): はじめに CSSはWebサイトのデザイン... - [position: sticky が効かない？よくある原因と解決策を徹底解説](https://watashi.xyz/position-sticky-fix/): 1. はじめに CSSのposition... - [UTMパラメータの設定方法：utm_mediumとutm_sourceのどちらに「qr」を含めるべきか？](https://watashi.xyz/utm-qr-setting/): 1. はじめに QRコードを活用してウェ... - [JavaScriptで曜日を取得・変換する方法まとめ（moment.js Day.js サンプルコードあり）](https://watashi.xyz/js-day-of-week/): はじめに JavaScriptで日付を扱... - [JavaScriptのドット3つ（...）とは？スプレッド構文を徹底解説](https://watashi.xyz/js-spread-syntax/): 1. はじめに JavaScriptを学... - [CSSでスクロールできない問題の原因と解決策](https://watashi.xyz/css-scroll-problem/): はじめに Webサイトを制作していると、... - [JavaScriptやjQueryで特定の表示状態を持つ要素の中のインデックスを取得する方法 - display: none の要素は数えないで！](https://watashi.xyz/js-index-filter/): 1. はじめに JavaScriptを使... - [box-shadowを特定の方向だけに適用する方法 - 影を横には出さずに縦だけに出したいんです](https://watashi.xyz/box-shadow-direction/): CSSである要素に強調を持たせるために、... - [2手で完了!? Astroフレームワークにtailwindcssを追加する方法](https://watashi.xyz/astro-with-tailwindcss/): はじめに 静的サイトジェネレーターAst... - [WordPressでAjax処理を行う時の簡単な方法と流れ](https://watashi.xyz/wp-ajax-flow/): はじめに WordPressでオリジナル... - [Astro.jsにReactを導入する完全ガイド｜Astro×Reactでインタラクティブなサイトを作る](https://watashi.xyz/astro-with-react-start/): Astro. jsは超高速な静的サイトジ... - [【CSS】floatした画像を文章の右下に回りこませる方法](https://watashi.xyz/float-right-bottom/): はじめに デザイナーから渡されるデザイン... - [入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法）](https://watashi.xyz/textarea-size-adjust/): はじめに WEBサイトで長い文字列を入力... - [Astroフレームワークで生成フォルダをdistから任意のフォルダ名にする方法 - Astro.jsで静的サイト制作](https://watashi.xyz/astrojs-change-folder/): 最新のWEBフレームワーク「Astro.... - [Astroフレームワークを相対リンクにする方法](https://watashi.xyz/astro-relative-link/): はじめに ウェブフレームワークAstro... - [これは便利！HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法](https://watashi.xyz/dialog-modal-window/): モーダルウインドウ機能を実装するのに古い... - [jsでもっとちゃんとタブUIを実装する（jQuery不使用）- ページ更新してもタブがリセットされないやり方](https://watashi.xyz/better-tab-ui/): WEBサイトに一般的なタブのUIを追加し... - [意外と簡単！WSL2にCentos9Streamをインストールする方法](https://watashi.xyz/wsl2-centos9stream/): はじめに 最近CentOS9Stream... - [iPhone、safariでボタンの文字が青くなる原因と対処方](https://watashi.xyz/iphone-button-color-blue/): はじめに WEBサイトのコーディングも終... - [jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法](https://watashi.xyz/swiper-linkage-example/): はじめに カルーセル（スライダー）をWE... - [grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法](https://watashi.xyz/css-grid-area/): はじめに レスポンシブレイアウトを構築す... - [知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp](https://watashi.xyz/css-line-clamp/): はじめに あるブロック範囲内にテキストを... - [レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら](https://watashi.xyz/responsive-font-size-stylus/): はじめに レスポンシブのサイトを作る際に... - [スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法](https://watashi.xyz/fractal-nunjucks/): はじめに サイトやWEBアプリなどの見や... - [inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）](https://watashi.xyz/input-number-only/): はじめに フォームで入力欄に全角数字だけ... - [ちょっと待って！！知っていますか？input type=numberの落とし穴](https://watashi.xyz/input-type-number-trap/): はじめに ユーザーに何かを入力してもらい... - [ReactをCDNで利用した場合のuseState、useEffectの書き方](https://watashi.xyz/react-usestate-cdn/): はじめに ReactをCDNから利用する... - [これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法](https://watashi.xyz/react-cdn/): はじめに javascriptの人気ライ... - [npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話](https://watashi.xyz/prettier-gitignore/): はじめに npmを使用してサイト制作をす... - [tailwindcssの使い方をさくっと説明 - ざっくり入門したい人向け](https://watashi.xyz/tailwindcss-starter/): tailwindcssはcssフレームワ... - [Vscode＋wsl2でWordpressコード規約をもとにした自動整形を実現する方法 - 後の作業をもっと楽に](https://watashi.xyz/vscode-wordpress-format/): 今最も人気のあるコードエディタといえばM... - [新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール](https://watashi.xyz/smooth-scroll-pagetop/): WEBサイトの定番部品の「ページトップへ... - [tailwindcssをWordPressにマッチさせる方法 - テーマ開発における相性の悪さをカバーしよう](https://watashi.xyz/tailwindcss-adjust-wordpress/): tailwindcssというCSSフレー... - [jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法](https://watashi.xyz/ajax-json-without-jquery/): Ajaxとは Asynchronous ... - [Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用）](https://watashi.xyz/json-ajax-jquery/): WEBサイトで部分的に更新できるようにし... - [JSONファイルはコメントアウトできません。でもなんとかする方法](https://watashi.xyz/json_commentout/): JSONファイルでコメントアウトはできま... - [browserslistはpackage.jsonに書くか.browseslistrcに書くか](https://watashi.xyz/env-browserslist/): browserslistとは何か 名前の... - [Stylelintを利用してコードを自動整形する方法](https://watashi.xyz/stylelint-starter/): cssを分析して間違いを指摘してくれるツ... - [PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法](https://watashi.xyz/postcss-nesting-problem/): cssのポストプロセッサPostCSSは... - [Edgeで画像の右上のマークは何？出る条件と影響について](https://watashi.xyz/edge-image-mark/): 久しぶりにEdgeを画像にマウスカーソル... - [jsonファイルを利用してデータとテンプレートを分ける - npm + nunjucks + stylus で静的サイト制作を効率的にする(6)](https://watashi.xyz/env-npm-nunjucks-stylus-json/): テンプレートエンジンnunjucksの利... - [StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編）](https://watashi.xyz/stylus-media-query-mixin/): sassではよくメディアクエリを設定しや... - [webpackにbabelを導入する - npm + nunjucks + stylus で静的サイト制作を効率的にする(5)](https://watashi.xyz/env-npm-nunjukcs-stylus-babel/): webpackを使用してjsファイルを集... - [StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編）](https://watashi.xyz/stylus-mixin-spaces/): node. js製のCSSプリプロセッサ... - [flexbox使用の要素が折り返さない！？解決への鍵はflex-basisの値だった](https://watashi.xyz/flexbox-inner-wrap/): Webデザインで「要素を横並びにしたいの... - [webpackを使用してjavascriptを集束（バンドル）する - npm + nunjucks + stylus で静的サイト制作を効率的にする(4)](https://watashi.xyz/env-nunjukcs-stylus-webpack/): 前回までで次のようなことをやってきました... - [画像をコピーもしくは圧縮する - npm + nunjucks + stylus で静的サイト制作を効率的にする(3)](https://watashi.xyz/env-nunjucks-stylus-3/): npm + Nunjucks + sty... - [ファイル更新を感知し更新確認を簡単にする - npm + nunjucks + stylus で静的サイト制作を効率的にする(2)](https://watashi.xyz/env-nunjucks-stylus-2/): npm + Nunjucks + sty... - [npm + Nunjucks + Stylus で静的サイト制作を効率的にする](https://watashi.xyz/env-nunjucks-stylus/): 静的サイト制作時におすすめのタスク自動化... - [WordPressでSNS関連の独自オプションを管理画面に制作する](https://watashi.xyz/wp-sns-options/): 管理画面にSNSの独自オプションを置きた... - [WordPressでカスタムポストの複数記事の特定文字を一括変更するPHPコード](https://watashi.xyz/wp-modify-post-db/): 何十、何百と記事を投稿したあとにある言葉... --- # # Detailed Content ## 投稿 ### CSS clip-pathで曲線を描く方法｜SVGのpath関数や波・角丸・吹き出しデザインまで完全ガイド - Published: 2025-05-20 - Modified: 2025-05-20 - URL: https://watashi.xyz/css-clip-path/ - カテゴリー: css - タグ: UI clip-path 曲線を使ったデザインをわかりやすく解説します。clip-pathの基本構文からSVGパスを使った曲線の描き方、角丸や吹き出しの応用例まで実用的なサンプルコードを豊富に紹介。初心者でもつまずきやすいポイントやよくある質問も丁寧に解説しているので、自由自在に曲線デザインを楽しみたい方に最適です。 「CSSで曲線を描きたいけど、どうやって実現すればいいのかわからない... 」 そんな悩みをお持ちではありませんか？ 近年のWebデザインでは、直線的な要素だけでなく、曲線や波型など柔らかい表現が多く取り入れられるようになってきました。その中でも注目されているのが、CSSの clip-path プロパティ。要素を好きな形に“切り抜く”ことができるこのプロパティを使えば、コードだけで複雑なデザインも実現可能になります。 しかし一方で、 clip-path の基本的な使い方しか知らない 曲線を作るに... --- ### ハンバーガーメニューをページ内リンクで確実に閉じる方法とトラブル解消法【jQuery＆Vanilla JS対応】 - Published: 2025-05-19 - Modified: 2025-05-20 - URL: https://watashi.xyz/js-hamburger-menu/ - カテゴリー: javascript - タグ: UI 「ハンバーガーメニューのページ内リンクでメニューが閉じない…」そんな悩みを解決します！JavaScriptやjQuery、CSSだけで対応する方法をやさしく解説。原因の理解からコピペで使える実装例、さらに背景クリックやアクセシビリティ対応まで網羅しているので、初心者から実務レベルの方まで安心して参考にしていただけます。 スマートフォンサイトで欠かせないハンバーガーメニュー。しかし、メニューからページ内リンクをクリックしても、メニューが開いたままになってしまうという経験はありませんか？ ユーザーがページ内リンクをクリックした後もメニューが閉じないと、画面の大部分がメニューで覆われたままになり、コンテンツが見づらくなってしまいます。特にスマートフォンでは限られた画面サイズを有効活用することが重要なため、この問題は見過ごせません。 ハンバーガーメニューのページ内リンクをクリックした際に自動でメニューを閉じる実装は、ユ... --- ### JavaScriptで「もっと見る」ボタンを作る！クリックで表示・閉じる・10件ずつ展開まで対応した実装方法を徹底解説！ - Published: 2025-05-18 - Modified: 2025-05-18 - URL: https://watashi.xyz/js-more-read/ - カテゴリー: javascript - タグ: UI Webサイトの長いリスト、どう表示していますか？HTML, CSS, JavaScriptを使った「もっと見る ボタン js」で解決しましょう！この記事では、基本的な実装コードから、10件ずつ表示・開閉式・複数設置といった応用、実装時のエラーやパフォーマンス、レスポンシブ、アクセシビリティまで網羅的に解説しています。 Webページやアプリでよく見かける「もっと見る」ボタン。たとえば、ブログ記事一覧や口コミ表示などで、最初は一部だけを表示し、必要に応じて続きを表示する──そんな場面で使われますよね。でもいざ実装しようと思うと、「JavaScriptでどうやって表示を切り替えるの？」「複数あるときはどうする？」「n件ずつ表示させたいけど難しそう... 」と、意外とつまずきやすいのがこの「もっと見るボタン」です。 この記事では、HTML・CSS・JavaScriptを使って、「もっと見る」ボタンを実際に動く形で実装... --- ### もう迷わない！ChatGPTに伝わるMarkdownプロンプトの書き方と現場で使える実践テンプレート集【完全版】 - Published: 2025-05-17 - Modified: 2025-05-17 - URL: https://watashi.xyz/markdown-prompt/ - カテゴリー: その他 - タグ: markdown ChatGPTにMarkdown形式でプロンプトを指示すると、より正確で整理された出力が得られるってご存知ですか？本記事では、Markdownの基本記法からChatGPTでの活用方法、実務で使えるテンプレートや応用テクニックまで、わかりやすく解説。ChatGPTをもっと賢く使いこなしたい方は、ぜひチェックしてください。 「ChatGPTにもっと意図を正確に伝えられたら... 」 そう感じたことはありませんか？ ChatGPTを活用するうえで、多くの方がつまずくのが「プロンプトの書き方」です。ただ質問するだけでは、求めていた答えと少しズレてしまうことも。そんなときに有効なのが、Markdown形式でプロンプトを構造化する方法です。 Markdownは本来、文章をわかりやすく整形するための記法ですが、ChatGPTとのやりとりに取り入れることで、AIに意図をより正確に伝えることができます。特に、業務効率化や提案書・... --- ### 【初心者必見】Markdownでできることを徹底解説！歴史や成り立ち、基本記法からGitHubやQiitaでの活用法まで - Published: 2025-05-16 - Modified: 2025-05-16 - URL: https://watashi.xyz/markdown/ - カテゴリー: その他 - タグ: markdown 「Markdownで何ができるの？」Markdownの仕組みや歴史、シンプルさ・可搬性といった特徴から、見出し、リスト、コードブロック、テーブルなどの基本記法を実例付きで詳しく解説。GitHubやQiita、Notionでの具体的な活用シーン、おすすめエディタ比較、静的サイトジェネレーターでの使い方まで解説！ ブログ記事やドキュメント作成で「もっと効率的に文章を書きたい」と思ったことはありませんか？HTMLは複雑すぎるし、ワードプロセッサは重すぎる... 。そんなとき、多くの開発者やライターが選ぶのがMarkdownです。しかし「Markdownって何ができるの？」「本当に使いこなせるの？」と疑問をお持ちの方も多いでしょう。 実はMarkdownは、シンプルな記号だけで文書を美しく構造化できる強力なツールなのです。プログラミング知識がなくても、数分で基本を習得でき、驚くほど多様な表現が可能になります。... --- ### CSS Subgridの使い方を完全マスター！高さ揃え＆孫要素も自由自在に配置！みんながわかる実践ガイド - Published: 2025-05-15 - Modified: 2025-05-16 - URL: https://watashi.xyz/css-subgrid/ - カテゴリー: css - タグ: css CSS Subgridの基本概念や従来のCSS Gridとの違いから、具体的な使い方や親子・孫要素への適用テクニックまで丁寧に解説。高さを揃える最適化方法や、よくあるトラブルの原因と解決策も紹介。さらにTailwind CSSでの使用法もコード付きでわかりやすく説明しているので、初心者の方でも安心して学べます。 Web制作でレイアウトを整える際、CSS Gridはとても強力なツールですが、「入れ子構造で高さや幅を揃えたいのにうまくいかない」「子要素や孫要素まで親のグリッド線を継承させたい」なんて思ったことはありませんか？ そんな時便利なのが、CSS Gridの新機能「Subgrid（サブグリッド）」です。 Subgridを使えば、親グリッドの行や列のサイズを子グリッドがそのまま引き継げるため、複雑な入れ子レイアウトでも高さや幅を簡単に揃えられます。 しかし、Subgridはまだ比較的新しい機能で、使い方... --- ### HTML＆CSSプログレスバー実装ガイド｜おしゃれ・アニメ・円形・React対応まで＋コピペOKサンプル付き - Published: 2025-05-14 - Modified: 2025-05-14 - URL: https://watashi.xyz/html-progress-bar/ - カテゴリー: css, HTML - タグ: UI HTMLプログレスバーのデザインをもっと自由に！CSSで色や形をカスタマイズ、アニメーションやJavaScriptで動的な表現を加える方法をコピペで使えるサンプルコードと共に紹介します。円形プログレスバーの実装、Reactでの利用に加え、よくあるトラブルについても。初心者からステップアップしたい方におすすめです。 Webサイトやアプリで、ファイルアップロードやデータ読み込みの際に今どれくらい進んでいるのかを視覚的に伝えられる「プログレスバー」は、ユーザーのストレスを軽減し、安心感を与えるための重要な要素です。 しかし、HTML標準のタグだけでは、その見た目はブラウザのデフォルトに依存してしまい、サイト全体のデザインに馴染ませるのが難しいと感じたことはありませんか？「もっとおしゃれにしたい」「アニメーションで動きをつけたい」「進捗に合わせて色を変えたい」など、「html プログレスバー デザイン」にこだわり... --- ### 【初心者向け】tailwind.config.jsが見当たらない理由とCSSファースト時代の正しい使い方 - Published: 2025-05-13 - Modified: 2025-05-13 - URL: https://watashi.xyz/tailwind-config-js/ - カテゴリー: css - タグ: css, html, javascript 「tailwind.config.jsがない」はもう古い常識？Tailwind CSS v4.0で導入された「CSSファースト設定」により、設定ファイルが不要になった理由を詳しく解説。新しいカスタマイズ方法や旧バージョンからの移行手順、Vite/Next.js連携のコツまで網羅し、あなたの疑問を全て解決します。 「Tailwind config js ない」と検索して、この記事にたどり着いた方は、きっとこんな疑問や不安を感じているのではないでしょうか？ 「Tailwind CSSを導入したのに、tailwind. config. jsファイルが見当たらない... 」 「設定ファイルがないけど、ちゃんとカスタマイズできるの？」 実はその疑問、とても自然なものなんです。 Tailwind CSS v4からは大きな仕様変更があり、これまで当たり前だったtailwind. config. jsが"なくても使える... --- ### WordPress検索機能の自作手順を完全解説！カスタム投稿・絞り込みまで対応する実装方法とは？ - Published: 2025-05-12 - Modified: 2025-05-12 - URL: https://watashi.xyz/wp-search/ - カテゴリー: WordPress - タグ: WordPress WordPressの検索機能を自作する理由や標準機能の限界、プラグインでは実現できない要件、PHPによる柔軟なカスタマイズ方法を解説。searchform.phpやsearch.phpの役割から、カスタムフィールド・タクソノミーでの絞り込み、複数キーワード検索、検索結果ページの最適化まで、実践的な手順を紹介します WordPressの標準検索機能は、サイトの規模が大きくなったり、カスタム投稿やカスタムフィールドを使い始めるとすぐに限界が来てしまいます。プラグインを導入する手もありますが、「こんな細かい要件、どのプラグインでも対応できない」「プラグインが重くてサイトの表示速度が遅くなる」といった壁にもぶつかります。 「だったら自分で作ればいいんじゃない？」--そう、WordPressの検索機能はPHPやHTML/CSSを使って自作することで、柔軟性・高速化・UX改善など、プラグイン依存では実現できない“あな... --- ### CSSタイムラインの作り方まとめ｜沿革・経歴・スケジュールに使えるデザインと実装コードを厳選紹介！ - Published: 2025-05-11 - Modified: 2025-05-11 - URL: https://watashi.xyz/timeline/ - カテゴリー: css - タグ: css, javascript タイムラインを自作したいけれど方法がわからない方へ。この記事では、HTMLとCSSだけで縦型・横型タイムラインの基本構造から実装方法まで、初心者にもわかりやすく解説します。疑似要素を活用したデザイン、アイコンや画像を取り入れた多彩なスタイリング、スマホ対応のレスポンシブ設計まで、コピペで使えるコード例も掲載！ 「会社の沿革ページを作りたいけど、どうすればいいかわからない... 」「イベントのスケジュールをおしゃれに表示したいのに、プラグインに頼りたくない」「履歴書や経歴書のようなタイムラインをWEBサイトに実装したいけど、HTMLとCSSだけで本当にできるの？」 これらの課題、実はCSSの基本をマスターすれば意外と簡単に解決できます。タイムラインは情報を時系列で視覚的に伝えるための強力なデザイン要素。会社の歴史、プロジェクトの進行状況、個人のキャリアパスなど、さまざまな用途で活用できます。さらに、適切... --- ### HTMLプルダウンメニューをJavaScriptで強化！初心者向け実装ガイドと動的機能の作り方 - Published: 2025-05-10 - Modified: 2025-05-10 - URL: https://watashi.xyz/js-dropdown/ - カテゴリー: HTML - タグ: html, javascript HTMLとJavaScriptでプルダウンメニューを簡単に実装！CSSでの見た目の整え方から、JavaScriptを使った要素の取得、選択値の取得、ユーザーのアクションを検知するchangeイベントの使い方、デフォルト項目を設定する方法まで基礎を網羅。よくあるエラーの解決策といった実践的な応用テクニックまで紹介します。 Web制作で「タグの基本的な使い方はなんとなく分かるけれど、実際に動的な操作やスタイリングってどうやるんだっけ？」という方も多いのではないでしょうか。特に、ユーザーが選択した値を取得したり、選択肢を動的に追加・削除したり、レスポンシブ対応やアクセシビリティまで押さえようとすると、意外と分からないポイントがたくさん出てきます。 この記事では、htmlとjavascriptを使ったプルダウンメニューの実装から、より実践的な応用テクニック、トラブルシューティングまで、Web制作現場で「これだけは知って... --- ### WordPressウィジェット作り方完全ガイド｜自作・エリア追加・表示制御まで初心者向けに徹底解説！ - Published: 2025-05-09 - Modified: 2025-05-09 - URL: https://watashi.xyz/wp-custom-widget/ - カテゴリー: WordPress - タグ: WordPress WordPressでオリジナルのウィジェットを作成したい方必見。WP_Widgetクラスの基本、PHPコードの書き方、functions.phpへの登録方法を詳しく解説します。ウィジェットエリア追加や固定ページへの表示制御、デザイン調整、トラブル解決策まで網羅。あなたのサイトにぴったりのカスタムウィジェットを！ WordPressを使っていると「もっと自由にサイトをカスタマイズしたい」「特定の場所に独自の情報を表示したい」と感じることはありませんか？そんな時に活躍するのがウィジェットです。特に、自分だけの機能を追加できるカスタムウィジェットを作れるようになると、サイトの可能性は一気に広がります。しかし、コードが複雑だったり、実際にどう使えば良いのか分かりにくい記事も多いのが現実です。 この記事では、カスタムウィジェットの作り方を初心者でも理解できるように、基礎から実装・応用まで丁寧に解説します。 この記... --- ### 【徹底解説】.htaccessでWordPressのIP制限を設定する方法 | 強固なセキュリティ対策！ - Published: 2025-05-08 - Modified: 2025-05-08 - URL: https://watashi.xyz/wp-htaccess-ip/ - カテゴリー: WordPress - タグ: WordPress WordPressは世界で最も人気のあるCMSとして、全Webサイトの約40%以上で利用されています。この広範な普及は、同時に悪意ある攻撃者からの標的にもなりやすいことを意味します。あなたのWordPressサイトが小規模であっても、自動化されたボットによる攻撃は日常的に行われています。 特に管理画面（wp-admin）やログインページ（wp-login. php）は、サイトの「鍵」となる重要な入口です。これらへの不正アクセスを許してしまうと： 不正ログインによるサイト乗っ取り マルウェアの埋め... --- ### リファラーが取得できない理由と対策｜(direct)/(none)の原因からPHP・JSの実装・リダイレクト問題まで - Published: 2025-05-07 - Modified: 2025-05-07 - URL: https://watashi.xyz/referrer-error/ - カテゴリー: その他 - タグ: javascript, php リファラーが取得できない原因にお悩みの方へ。Google Analyticsで「(direct)」や「(none)」と表示される理由、HTTPSからHTTPへの遷移やリダイレクトによる影響、JavaScript・PHPでの取得方法、metaタグやサーバー設定による制御方法まで、実践的な対策をわかりやすく解説します。 「Google Analyticsの参照元が“(direct)”ばかりで分析が進まない... 」 「PHPやJavaScriptでリファラーを取得しようとしても、なぜか空になる... 」 そんな“リファラーが取得できない”問題に、頭を悩ませてはいませんか？ Web担当者や開発者にとって、リファラー（参照元）情報はユーザー行動を分析し、広告効果や流入経路を正しく把握するために欠かせないデータです。ですが、実際にはリファラーが正しく取得できない場面が多く、Google Analytics上でも「(n... --- ### HTMLのツールチップ、title属性では改行できない？広く使えるCSS・JavaScriptでの実装テクニック - Published: 2025-05-06 - Modified: 2025-05-06 - URL: https://watashi.xyz/tooltip-line-break/ - カテゴリー: HTML - タグ: css, javascript HTMLのツールチップで改行を実現する方法を探していますか？title属性では改行が難しい仕様がありますが、CSSやJavaScriptを使ってカスタムツールチップを作成することで改行が可能です。BootstrapやReactなどのフレームワーク対応方法も含め、改行可能なツールチップの実装方法や注意点を解説します。 Webサイトを作成していると、専門用語や補足説明が必要な箇所にツールチップを設置したくなりますよね。マウスを乗せるだけで追加情報が表示される便利な機能ですが、改行に関するトラブルに悩まされている方も多いのではないでしょうか。 「コピペしたコードなのに、なぜか改行されない... 」 このような疑問を抱えているあなたのために、今回はHTMLツールチップの改行問題について徹底解説します。 この記事でわかること なぜHTMLのtitle属性では改行ができないのか、その仕様と注意点 CSSやJavaScr... --- ### SVGで地図や図解をインタラクティブに！クリッカブルマップの実践例とテクニックを紹介 - Published: 2025-05-05 - Modified: 2025-05-06 - URL: https://watashi.xyz/clickable-map/ - カテゴリー: HTML 「svg クリッカブル マップ」の基本的な仕組みや画像マップとの違い、クリックできるエリアの作り方、レスポンシブ対応のテクニック、インタラクティブな演出方法、よくある不具合とその解決策、パフォーマンス最適化まで、初心者にもわかりやすく丁寧に解説しています。実用的な事例ととも、実装ノウハウが満載です。 ウェブサイトやアプリで地図や図解をクリック可能にする「クリッカブルマップ」は、従来の画像マップではレスポンシブ対応が難しいという課題がありました。特にスマホやタブレットでの表示が不安定になることが多く、ユーザーエクスペリエンスを損なう原因となっています。 記事のポイント SVGクリッカブルマップの基本仕組みとメリット：従来の画像マップとの違いと、SVGでクリック可能なエリアを作る方法 レスポンシブ対応の実装方法：viewBox属性を使った画面サイズ対応テクニックや、ライブラリを使わない実装方法 ... --- ### HTML detailsタグアニメーション簡単実装ガイド！CSS・JSでアコーディオン、三角アイコン変更を実現 - Published: 2025-05-04 - Modified: 2025-05-04 - URL: https://watashi.xyz/details-html/ - カテゴリー: HTML - タグ: css, javascript detailsタグ アニメーションの実装方法をCSS/JavaScript両面から解説。開閉時のスムーズな動きを実現するtransition設定法から、三角アイコンのカスタマイズ術、複数アコーディオンの排他制御まで。主要ブラウザ対応のクロスプラットフォーム戦略と実践サンプル付き。誰にでも分かりやすく丁寧にご紹介します。 Web制作やUIデザインでよく使われる「detailsタグ」。クリックひとつで情報を折りたたんだり展開したりできる便利な要素ですが、「アニメーションをつけてもっとスムーズに開閉させたい」と感じたことはありませんか？実は、detailsタグは標準仕様のままだとアニメーションが効かず、思ったような動きにならないという課題があります。そのため、「CSSだけで滑らかに動かしたい」「JavaScriptで細かく制御したい」「デフォルトの三角アイコンも自由に変えたい」など、さまざまな工夫やテクニックが求めら... --- ### 【プラグイン不要】WordPressお問い合わせフォームを完全自作！初心者向けに確認画面・スパム対策も解説 - Published: 2025-05-03 - Modified: 2025-05-03 - URL: https://watashi.xyz/wp-contact-form/ - カテゴリー: WordPress - タグ: WordPress WordPressでお問い合わせフォームをプラグインなしで自作するには？HTML、PHP、JavaScriptを使った完全な手順をコード例付きで解説。確認画面やスパム対策、セキュリティ対策はもちろん、Googleスプレッドシート連携まで対応。理想のフォームを無料で手に入れ、サイトを軽量化しましょう。 WordPressでお問い合わせフォームを設置したい。でも、「Contact Form 7のようなプラグインは便利だけど、もっとサイトを軽量化したいな... 」「デザインや機能を自分の思い通りにカスタマイズしたいけど、プラグインでは限界がある... 」「プラグインのアップデートや相性問題が心配... 」もしあなたが、そう考えているなら、この記事はきっとお役に立てます。プラグインに頼らず、ゼロから自分でお問い合わせフォームを自作するという選択肢があるのをご存知でしょうか？ この記事では、WordP... --- ### 【保存版】CSS var()の使い方徹底解説！カスタムプロパティで色・サイズ・レイアウトを一括管理するテクニック＆実践例 - Published: 2025-05-02 - Modified: 2025-02-15 - URL: https://watashi.xyz/css-var-usage/ - カテゴリー: css - タグ: css CSS変数でCSS設計を効率化！カスタムプロパティの基本（定義、var()、スコープ）はもちろん、カラーテーマ、レスポンシブ、ダークモードといった現場で即役立つ活用例、JavaScript連携などの応用テクニックまで、具体的なコードとともに詳しく解説します。CSS変数でよりメンテナンス性の高いコードを目指しましょう。 「同じ色を何度も何度もコピペするのに疲れた... 」 「大規模サイトのカラー変更が地獄すぎる... 」 「ダークモード実装、どうすれば効率的なの？」 そんなCSSの悩みを抱えていませんか？ 実はこれらの問題は、CSS変数（カスタムプロパティ）を使えば、あっという間に解決できるんです。でも「CSS変数って何？」「どう使えばいいの？」という疑問をお持ちの方も多いはず。 CSS変数とは、CSSの中で値を保存して再利用できる強力な機能です。色やサイズ、余白などを変数として一度定義しておけば、サイト全体で... --- ### fetchでCORSエラーが出た時の対処法｜no-corsやAccess-Control-Allow-Originを解説 - Published: 2025-05-02 - Modified: 2025-05-02 - URL: https://watashi.xyz/fetch-cors-error/ - カテゴリー: javascript - タグ: javascript fetchで困るCORSエラーを解説！「なぜ？」の仕組み、ブラウザ開発者ツールでのデバッグ、サーバー/クライアントでの具体的解決策（Access-Control-Allow-Origin設定など）、よくある失敗例、ローカル環境対策まで網羅。この記事でCORSエラーを理解し、自信を持って対処できるようになりましょう。 「fetch APIで通信しようとしたら、ブラウザコンソールに見慣れない赤い文字で『CORSエラー』が表示されて先に進めない... 」Web開発の現場で、このCORSエラーに遭遇し、時間を取られた経験は多くの人にあるのではないでしょうか。特に、フロントエンドとバックエンドが異なるオリジンにある場合に発生しやすく、その仕組みを理解していないと解決に手こずってしまいがちです。 この記事では、CORSがなぜ必要なのかという根本的な仕組みから、エラー発生時の具体的なデバッグ方法、そしてサーバー側・クライ... --- ### Astroでブログを構築する方法｜レイアウト設計から記事管理・デプロイまでまるっと解説！初心者にも最適 - Published: 2025-05-01 - Modified: 2025-05-02 - URL: https://watashi.xyz/astro-blog/ - カテゴリー: Astro - タグ: astro Astroでブログを始めたい方に向けてディレクトリやコンテンツの構成、Markdownを使った記事管理、レイアウト設計の考え方をやさしく解説。さらに、記事の一覧表示や詳細ページの作り方、ルーティング設定、VercelやNetlifyを使った公開方法までカバー。Astroで快適なブログ制作のきっかけに。 AstroでMarkdownブログを構築するなら、簡単さと高性能の両方が手に入ります。でも、多くの開発者が「どうやって始めればいいの？」「効率的な記事管理方法は？」「本番環境へのデプロイは難しくない？」と悩んでいます。 この記事では、Astroを使ったブログサイト構築の全工程を初心者にもわかりやすく解説します。基本的なディレクトリ構成からMarkdown記事の管理方法、効率的なコンポーネント設計、そして本番環境へのデプロイまで、実践的なコード例とともに説明していきます。 この記事を読めば、Ast... --- ### JavaScriptでリンクを別ウインドウ・タブで開くには？window.openの使い方・サンプルコード付き！ - Published: 2025-04-30 - Modified: 2025-04-30 - URL: https://watashi.xyz/js-open-window/ - カテゴリー: javascript - タグ: javascript JavaScriptで別ウインドウを開く方法について詳しく解説します。window.open()の基本的な使い方から、ウインドウサイズや位置の指定方法、ポップアップブロック対策、主要ブラウザでの注意点まで、実用的なサンプルコードとあわせて紹介します。 JavaScriptを使った別ウインドウのオープン、基本的なことは知っているけれど、いざ実装しようとすると細かい仕様を忘れていた... そんな経験、ありませんか？ 特にwindow. openの使い方ひとつとっても、単純なリンクだけではなく、ウインドウサイズや位置を制御したり、ポップアップブロックを回避する工夫が求められる場面もあります。さらに、ブラウザによる挙動の違いや、セキュリティ上必須のnoopener、noreferrer属性の対応など、中級以上の制作者でもつまずきやすいポイントが意外と... --- ### 【初心者向け】HTMLテーブルにソート機能を追加！コピペOK＆JavaScriptだけで簡単並び替えする方法 - Published: 2025-04-29 - Modified: 2025-04-29 - URL: https://watashi.xyz/sortable-table/ - カテゴリー: javascript - タグ: html, javascript HTMLのtableにソート機能を追加する方法を初心者向けにやさしく解説！基本のJavaScript実装から、コピペOKなサンプル、ライブラリtablesorter・List.jsの活用法、Bootstrapの連携からスマホ対応テクニックまで幅広く紹介します。これを読めばソート可能なテーブルはバッチリです。 Webサイトに大量のデータを載せたとき、「表（table）の中身を並び替えできたら、もっと見やすいのに」と思ったことはありませんか？ しかし、いざ自分でソート機能をつけようとすると、「JavaScriptの知識が必要？」「ライブラリって何を使えばいいの？」と迷ってしまう方も多いはずです。特にHTML初心者の方にとって、難しそうに感じる部分かもしれません。 この記事では、HTMLと少しのJavaScriptだけで、しかもコピペで簡単にtableにソート機能を追加できる方法をご紹介します。 さらに、... --- ### Astroでディレクトリ構成を最適化する方法｜初心者でもできる構造設計の完全ガイド - Published: 2025-04-28 - Modified: 2025-04-28 - URL: https://watashi.xyz/astro-directory/ - カテゴリー: Astro - タグ: astro, javascript AstroJSプロジェクトのディレクトリ構成、どうするのが正解？基本的な構成から画像管理、実践的なコンポーネント配置、ブログのMarkdown/MDX構造、さらにAstro.globによる自動読み込みやルーティング、チーム開発のコツまでじっくり解説。これを読めば、あなたの開発効率がきっと上がります。 Astroでプロジェクトを始めたものの、ファイルやフォルダをどう整理すれば良いか悩んでいませんか？ 初期構成のフォルダの役割がイマイチ分からず、大規模になったときの管理に不安を感じていませんか？ この記事では、Astroのディレクトリ構成を初心者でも理解できるよう、実践的な例とコード付きで詳しく解説します。 将来の拡張性と保守性を見据えたプロジェクト設計のノウハウをご紹介します。 この記事を読んでわかること Astroの基本ディレクトリ構成（src/pages, src/components, ... --- ### Astro JSの始め方ガイド：最初の一歩から応用まで｜初心者でもわかるステップバイステップ解説 - Published: 2025-04-27 - Modified: 2025-04-27 - URL: https://watashi.xyz/astro-starter/ - カテゴリー: Astro - タグ: astro Astro JSを始めてみたいけれど、何から手をつければいいのか分からないという方も多いのではないでしょうか？この記事では、Astroの開発環境構築から最初のウェブページ作成までを初心者向けに分かりやすく解説しています。これからAstroを学びたい方にぴったりの内容ですので、ぜひ最後までご覧ください。 「Astroって最近よく聞くけど、実際どうやって始めればいいの？」「公式ドキュメントだけでは分かりにくい」と感じたことはありませんか？ この記事では、次世代フレームワークAstro JSの基本を初心者の方でも理解できるよう丁寧に解説します。 実際のコード例と共に、あなたの最初のAstroプロジェクトを立ち上げる方法をご紹介します。 この記事でわかること Astroの開発環境の構築方法 初期構築でどんなファイルが生成されるか 実際にHello Worldページを作成する流れ Astroの開発環境を... --- ### localStorageが使えない5つの原因と対処法｜ブラウザ依存・落とし穴・代替手段まで完全解説！ - Published: 2025-04-26 - Modified: 2025-04-26 - URL: https://watashi.xyz/localstorage-not-working/ - カテゴリー: javascript - タグ: javascript localStorageが動作しない原因をブラウザ別に解説。Chrome/Edge/Safariの対応状況、プライベートモード制限、HTTPS要件など環境ごとの問題、getItem/setItemエラー解決策、DevToolsの確認方法、SafariとiOSの制約、代替手段の選び方、XSS対策まで網羅的に解説します。 「localStorageがなぜか使えない... 」——そんな経験をされたことはありませんか？JavaScriptで簡単にデータを保存できるlocalStorageは、Web開発において非常に便利な機能です。ユーザーの設定や状態を保持したり、再読み込み時にもデータを維持したりと、活用シーンはさまざまです。しかし、いざ実装してみると、getItemやsetItemがうまく動作しない、保存されたはずのデータが見つからない... といったトラブルに直面することもあります。 この記事では、localSt... --- ### npmパッケージ一覧を一発表示！初心者でも迷わないnpm listコマンドの使い方＆おすすめパッケージ - Published: 2025-04-25 - Modified: 2025-04-25 - URL: https://watashi.xyz/npm-packages/ - カテゴリー: javascript - タグ: npm, 開発環境 npmでインストール済みのパッケージ一覧を確認する方法を、初心者にもわかりやすく丁寧に解説。npm listの基本的な使い方から、グローバル・ローカルの違いや出力形式のカスタマイズ、package.jsonとの関係性さらに、依存関係を可視化する便利ツールや2025年版のおすすめパッケージも紹介します。 Web開発やアプリケーション開発において、今やnpmパッケージは開発を効率化し、様々な機能を実現するための強力な味方です。しかし、プロジェクトが進むにつれて、いったいどんなパッケージがどれくらいインストールされているのか、全体像が見えにくくなることはありませんか？依存関係が複雑になってくると、セキュリティの懸念や、意図しないパッケージの競合など、思わぬ問題に直面することもあります。また、新しい開発を始める際や、特定の課題を解決したい時に、「みんなが使っている便利なパッケージは何だろう？」「目的に... --- ### 【初心者必見】3分でできるViteの始め方！爆速開発環境を最短ステップで完全構築【2025年最新版】 - Published: 2025-04-24 - Modified: 2025-04-24 - URL: https://watashi.xyz/vite-starter/ - カテゴリー: javascript - タグ: vite, 開発環境 【Vite入門決定版】初心者でも分かる正しい読み方から始め方まで徹底解説！React・Vue対応のインストール手順、高速開発の秘密、Webpackとの違いを説明。コマンド一つで環境構築からデプロイまで、つまずきポイントやvite.config.jsのカスタマイズ例や各種ホスティングサービスへの公開方法も詳しく紹介。 Viteとは？初心者向けに概要と魅力を解説 フロントエンド開発の世界は日々進化を続けており、より高速で効率的な開発ツールが次々と登場しています。その中でも特に注目を集めているのがViteです。Vue. jsの生みの親であるEvan You氏によって開発されたViteは、現代のウェブ開発における課題を解決し、開発者体験を大幅に向上させるツールとして急速に人気を高めています。 この記事では、フロントエンド開発初心者の方でも理解できるよう、Viteの基本概念から実践的な使い方まで詳しく解説していきます... --- ### Webpackは本当に開発終了したのか？現状と後継候補（Vite・Turbopack）への移行手順まで全まとめ - Published: 2025-04-23 - Modified: 2025-04-23 - URL: https://watashi.xyz/webpack-end/ - カテゴリー: その他 - タグ: webpack, 開発環境 Webpackの開発終了に関する真相を公式情報やGitHubの状況をもとに徹底解説します。今後のサポートやセキュリティ面の懸念点、利用し続けるリスクを明確にし、代替ツール（Vite、Turbopack、esbuild）の特徴や違いを比較。また、移行手順や既存プロジェクトへの影響、最適な技術選定のポイントについても紹介 「Webpackはもう開発終了したらしい... 」 最近、そんな声をSNSや技術系ブログで目にすることが増えていませんか？Web制作やフロントエンド開発の現場で広く使われてきたWebpackですが、「開発終了」「時代遅れ」といった噂が広まり、今まさに技術選定を見直そうとしている方も多いのではないでしょうか。 この記事では、そうした不安や疑問にしっかり向き合い、「Webpackは本当に開発終了したのか？」という問題を、公式情報やGitHubの更新状況などをもとに客観的に検証します。また、なぜそう言... --- ### npmキャッシュ削除で解決！インストール失敗を防ぎ開発をスムーズに進める方法【完全解説】 - Published: 2025-04-22 - Modified: 2025-04-22 - URL: https://watashi.xyz/npm-cache-clear/ - カテゴリー: javascript - タグ: javascript, npm npmキャッシュクリアの完全ガイド。開発現場でよく遭遇するキャッシュ由来のエラーとその解決法を徹底解説します。基本的な「npm cache clean --force」の使い方から、環境別（Windows/Mac/Linux）のキャッシュクリア手順、クリア後の適切な対応まで。さらにpnpm・Yarn対応、Docker・CI/CD環境でのベストプラクティスも網羅。パッケージ管理の謎のエラーに悩むNode.js開発者必見の内容です。キャッシュクリアで開発効率を向上させましょう。 「なぜパッケージがうまくインストールできないんだろう？」「何度試してもビルドエラーが直らない... 」開発の現場で、こんな経験はありませんか？実は多くの問題は「npmキャッシュ」に潜んでいることがあります。 npm（Node Package Manager）は動作を高速化するために、ダウンロードしたパッケージをローカル環境にキャッシュとして保存しています。この便利な仕組みが、時として開発の足かせになることも。破損したキャッシュや古いバージョンが残ることで、謎のエラーやパフォーマンス低下を引き起こ... --- ### 【初心者OK】npm audit fixとは？エラーの意味・--forceの使い方・解決しないときの対処法まで徹底解説 - Published: 2025-04-21 - Modified: 2025-04-21 - URL: https://watashi.xyz/npm-audit-fix/ - カテゴリー: javascript - タグ: javascript, npm npm audit fixの基本から応用までを丁寧に解説する完全ガイド。脆弱性チェックの仕組みや自動修正の方法、--forceによる強制更新のリスク、よくあるエラーとその対処法を具体例付きで紹介します。さらにYarnユーザー向けの代替手段や、パッケージ更新前後の影響確認方法等も詳しく解説しています。 Node. jsプロジェクトを開発していて、「npm auditで脆弱性が検出されました」というメッセージを見たことはありませんか？あるいは「npm audit fix」というコマンドを実行したものの、すべての脆弱性が解決せず困っていませんか？ モダンなJavaScriptの開発環境では、数百もの依存パッケージを使うことが当たり前になっています。便利な一方で、そのどれかに脆弱性が含まれていればプロジェクト全体のセキュリティが脅かされるリスクも高まります。「npm audit fix」は、そんな脆... --- ### npm version を確認する方法｜インストール済みのバージョン確認・変更・管理 - Published: 2025-04-20 - Modified: 2025-04-20 - URL: https://watashi.xyz/npm-version-check/ - カテゴリー: javascript - タグ: node, npm npmのバージョン確認方法を総合的に解説！基本コマンド「npm -v」から、package.jsonでの確認、プロジェクト内パッケージのバージョン確認、エラー対処法まで。Node.jsとの連携やnvmを使った管理方法も紹介しています。初心者からプロの開発者まで役立つ情報が満載です。 開発中に「なぜか動かない... 」そんなとき、見落としがちな原因のひとつがnpmのバージョン違いです。ローカル環境とチームメンバー、あるいはCI環境とのバージョンのズレによって、意図しない挙動やエラーが発生することは少なくありません。特に複数のプロジェクトを扱っている場合、プロジェクトごとに異なるnpmやNode. jsのバージョンが混在して、混乱してしまうことも。 この記事を読むことで、以下のようなことがわかります。 npmとNode. jsの現在のバージョンを簡単に確認する方法 packag... --- ### Tailwind CSSで要素・テキストを右寄せする最適解｜初心者でもわかる使い分け＆実践例付き - Published: 2025-04-19 - Modified: 2025-04-19 - URL: https://watashi.xyz/tailwind-right/ - カテゴリー: css - タグ: tailwindcss TailwindCSSで右寄せを実装する方法をお探しですか？テキスト右寄せ、要素全体、さらにFlexやGridを使った右寄せの違いまで解説しています。ボタンや画像の右寄せ、複数要素のUI実装、トラブル対処法やレスポンシブ対応のテクニックまで、初心者から使えるTailwindの右寄せテクニックをマスターできます。 「Tailwindで要素を右寄せしたいけれど、text-rightやml-autoの使い分けがよく分からない」「思ったように右寄せできない... 」そんなお悩みを抱えていませんか？Tailwind CSSは直感的に使える便利なユーティリティファーストなCSSフレームワークですが、右寄せ一つを取っても複数の書き方があり、状況によって最適な方法が異なるため、混乱してしまう方も多いかもしれません。 この記事では、Tailwindで要素やテキストを右寄せするための基本的な方法から、FlexやGridを使... --- ### Tailwind CSSで「display: none」にしたい？非表示にする方法を解説！ - Published: 2025-04-19 - Modified: 2025-04-19 - URL: https://watashi.xyz/tailwind-display-none/ - カテゴリー: css - タグ: tailwindcss Tailwind CSSで「display: none」を実現するには、基本的に「hidden」クラスを使います。本記事では、hiddenの具体的な使い方やレスポンシブ対応で画面サイズごとに非表示にする方法等を解説します。Tailwindで効率よくUIを制御したい方に役立つ内容です。 「display: none」はWeb開発で頻繁に使われるプロパティですが、Tailwind CSSを使う場合はどのように記述するのでしょうか？ この記事では、Tailwind CSSで「display: none」を実現する方法を中心に、レスポンシブ対応の具体例、さらに非表示系クラスや、動的・条件付きでの表示切り替えテクニックまで幅広く解説します。よくある「うまく非表示にならない」エラーの対処法もご紹介するので、実践的な知識が身につきます。 この記事を読めば、Tailwind CSSで「dis... --- ### CSSの「@property」の使い方完全ガイド｜基礎・実例・注意点まで徹底解説【初心者向け】 - Published: 2025-04-18 - Modified: 2025-04-18 - URL: https://watashi.xyz/css-property-rules/ - カテゴリー: css - タグ: css CSSの@propertyは、カスタムプロパティに型や初期値、継承の有無を定義できる新しいルールです。この記事では、基本的な使い方や構文の解説はもちろん、アニメーションでの活用例やJavaScriptとの連携方法も紹介。主要ブラウザの対応状況や導入時の注意点までまとめているので、これから導入したい方にも安心です。 CSSでアニメーションをもっと滑らかに、もっと柔軟に制御したい... そんなときに注目されているのが、CSS Houdiniの機能のひとつ「@property」です。 ですが、「そもそも@propertyって何？」「どうやって使うの？」「まだ使えるブラウザあるの？」といった疑問から、なかなか手を出せずにいる方も多いのではないでしょうか。 本記事では、そんなCSS @propertyに関する基礎から応用までを徹底解説します。まずは、従来のカスタムプロパティ（--変数名）との違いや、@propert... --- ### JavaScriptでブラウザバックを正確に判定する方法｜よくある失敗と対処法もセットで解説 - Published: 2025-04-17 - Modified: 2025-04-17 - URL: https://watashi.xyz/catch-browserback-js/ - カテゴリー: javascript - タグ: javascript JavaScriptでブラウザバックを判定する方法を基礎から解説。popstate・pageshowイベントの違いや実装例、戻るボタンによる誤操作の防止方法、SPA（React・Vue・Next.js）やSafari特有の挙動への対応、Google Analyticsとの連携方法まで幅広く紹介しています。 ユーザーがブラウザの「戻る」ボタンを押した際の挙動に悩まされることはありませんか？「戻るボタンが効かない」「想定外のページに戻ってしまう」「戻る操作時に処理を走らせたい」など、JavaScriptでは一見シンプルそうで意外と難しいのが“ブラウザバックの判定”です。特にSPA（シングルページアプリケーション）やSafariなど、挙動にクセがある環境ではなおさらです。 本記事では、「JavaScriptでブラウザバックを判定・制御するにはどうすればいいのか？」という疑問に対して、基礎から応用まで丁寧... --- ### 初心者でもできる！JavaScriptバージョンの確認方法とESバージョンの違いをわかりやすく解説 - Published: 2025-04-15 - Modified: 2025-04-16 - URL: https://watashi.xyz/check-js-version/ - カテゴリー: javascript - タグ: javascript JavaScriptのバージョン確認方法とその仕組みを解説。ブラウザ別の確認手順からNode.jsでのコマンド操作、さらにバージョン互換性の問題解決法まで。異なる環境でも安定して動作するコードを書くための実践的なノウハウをわかりやすく紹介します。開発現場での混乱を減らすヒントが満載！ 「なぜ書いたコードが別の環境だと動かないんだろう？」「このJavaScript機能は使っても大丈夫なの？」開発者なら誰もが一度は頭を悩ませる問題ではないでしょうか。実はこの多くはJavaScriptのバージョンの違いが原因かもしれません。 本記事では、JavaScriptのバージョンがどのように決まるのか、その基本的な仕組みからECMAScriptとの関係、各ブラウザでの確認方法、そしてNode. jsなどのサーバーサイド環境での確認まで詳しく解説します。ChromeやEdgeなどのブラウザ別の... --- ### Bing検索の結果表示がGoogleと違う場合の直し方～Bing検索とGoogle検索の違いも説明 - Published: 2025-04-13 - Modified: 2025-04-16 - URL: https://watashi.xyz/bing-search-result/ - カテゴリー: その他 - タグ: bing Bingの検索結果がGoogleと違っておかしいと感じた方へ。canonicalタグの見直しやBingWebマスターツールの活用、不要なURLの削除依頼方法など、検索結果を統一するための具体的な対策をわかりやすく解説しています。WordPress特有の注意点にも触れているので、サイト運営者は必見です。 「同じ内容のページなのに、Bingの検索結果だけ表示が違う... 」といった問題に遭遇したことはありませんか？Googleでは狙い通りのタイトルやURLで表示されているのに、Bingでは意図しないURLや重複ページが出てしまうことがあります。 このような検索エンジン間の違いは、放置してしまうとクリック率の低下やSEO評価のブレにつながる恐れもあります。Bingユーザーが一定数存在する以上、GoogleだけでなくBingでも正しく情報を届けることは、今後のSEO戦略において無視できないポイントです... --- ### 簡単にできる！特定のサイトのIPアドレスの調べ方【コマンド・WEBツール】 - Published: 2025-04-11 - Modified: 2025-04-15 - URL: https://watashi.xyz/search-ip-address/ - カテゴリー: その他 - タグ: ip Webサイトのアドレスを簡単に調べる方法をご紹介します。Windows、Mac、スマホ別の確認手順や「nslookup」「ping」コマンドの使い方、便利な無料ツールまで完全網羅。IPアドレスの基礎知識からプロ級テクニックまで、初心者でもすぐに実践できる内容です。接続トラブル解決やセキュリティ確認に役立つ情報満載！ Webサイトを利用する際、その裏側で動いているIPアドレスについて考えたことはありますか？特定サイトの接続トラブルやセキュリティ確認が必要な場面で、実はIPアドレスを調べる知識は非常に役立ちます。しかし、「IPアドレスの調べ方」と聞くと難しそうに感じる方も多いのではないでしょうか。 実はWebサイトのIPアドレスは、専門知識がなくても簡単に調べることができます。WindowsやMacに標準搭載されている「nslookup」や「ping」コマンドを使えば数秒で確認できますし、スマートフォンからでも... --- ### 【2025年最新】Day.jsの使い方完全マスターガイド - Moment.js比較から実践テクニックまで - Published: 2025-03-14 - Modified: 2025-03-14 - URL: https://watashi.xyz/dayjs/ - カテゴリー: javascript - タグ: javascript JavaScript開発者必見！2KBの軽量ライブラリ「Day.js」の使い方を徹底解説。Moment.jsからの移行メリット、基本的な日付取得・フォーマット変更から、加算・減算・比較操作まで実践的なコード例付きで紹介。さらにReact/Node.js環境での活用法、locale設定、タイムゾーン処理のコツまでカバー。初心者から上級者まで使える日付操作テクニックが全て分かる完全ガイドです。 JavaScriptでの日付操作は厄介ですよね。特に標準のDateオブジェクトは直感的でなく、コードが煩雑になりがちです。 Day. jsは、そんな悩みを解決する軽量で使いやすい日付操作ライブラリです。わずか2KBのサイズながら、豊富な機能を提供し、モダンな JavaScript 開発に最適化されています。 この記事では、Day. jsの基礎から応用まで、実践的な使い方を徹底解説します。 この記事を読めば、Day. jsを使って日付関連の実装を大幅に簡素化でき、コードの可読性と保守性を向上させる... --- ### Astro.jsでSEO対策を実装する方法：初心者向けガイド - Published: 2025-03-11 - Modified: 2025-03-13 - URL: https://watashi.xyz/astro-js-seo/ - カテゴリー: Astro - タグ: astro Astro.jsでSEO対策を完全攻略！高速化、メタタグ、サイトマップの実装手順から成功事例まで、初心者も上級者も検索上位を目指せるガイド。 「Astro. jsで構築したサイト、SEO対策はこれであってるのかな？」 そんな悩みを抱えていませんか？ Astro. jsは高速なサイト構築に最適ですが、まだまだSEO対策できるかもしれません。 この記事では、Astro. jsでの基本的なSEO設定を紹介します。もし、まだ反映していないものがあれば参考にしていただければ幸いです。 この記事を読めば、あなたは以下のことがわかります。 その他SEO対策に役立つAstro. jsのインテグレーション活用法 Astro. jsでのメタタグ設定、ca... --- ### JavaScriptのPromiseをわかりやすく解説！初心者向け入門ガイド - Published: 2025-03-09 - Modified: 2025-03-11 - URL: https://watashi.xyz/js-promise/ - カテゴリー: javascript - タグ: javascript JavaScriptのPromiseを初心者向けにわかりやすく解説！非同期処理の基本概念、then()・catch()の使い方、async/awaitとの違いまで詳しく説明します。コールバック地獄を解消し、スムーズなコードを書けるようになりましょう！ JavaScriptを学習していると、「非同期処理」という言葉に出会うことがよくあります。特に、APIからデータを取得したり、時間のかかる処理を効率的に実行したい場合、非同期処理の仕組みを理解することが重要になります。その中で頻繁に使われるのが「Promise（プロミス）」です。 しかし、「Promiseってなんだか難しそう... 」「コールバックと何が違うの？」と感じる方も多いでしょう。そこで本記事では、Promiseの基本概念から、実際の使い方、そしてasync/awaitとの違いまでを初心... --- ### Astro.jsでSSRを導入！設定からデプロイまで解説 - Published: 2025-03-05 - Modified: 2025-03-11 - URL: https://watashi.xyz/astro-ssr-start/ - カテゴリー: Astro - タグ: astro Astro.jsのSSR（サーバーサイドレンダリング）を活用して、動的データを表示しながらSEOを最適化する方法を解説。SSGとの違いや実装手順を詳しく紹介します。 「Astroを導入したいけれど、SSRの実装方法がよく分からない」「AstroではSSRが使えるらしいけど『SSR』って何？ こんな疑問をもっている人に向けての記事です。 本記事では、Astro. jsのSSR（サーバーサイドレンダリング）の仕組みと実装方法を初心者向けに解説します。 まだAstroとかSSGとかSSRがピンと来ない方は最後まで読んで実際に手をつける弾みになれば幸いです。 記事のポイント Astro. jsでSSRを導入する具体的な手順 Astro. jsプロジェクトのデプロイの... --- ### ここまで出来る！Astro.jsルーティングの基本と動的ルート実装 - Published: 2025-02-27 - Modified: 2025-03-11 - URL: https://watashi.xyz/astro-routing/ - カテゴリー: Astro - タグ: astro Astro初心者向けにのルーティングを基礎を詳しく解説！ファイルベースの静的ルーティングはもちろん、動的ルーティングの設定方法やAPI連携によるデータ取得まで幅広く紹介します。具体的なコード例を交え、実践的な活用方法も紹介。Astroを活用した効率的なルーティングを学び、柔軟で高速なWebサイトを構築しましょう！ Web開発のフロントエンド技術は急速に進化し、開発者はより高速で柔軟なツールを求めています。その中で注目を集めているのが Astro です。Astroは、静的サイトジェネレーターの一種でありながら、動的コンテンツも扱える柔軟性を持つフレームワークです。特に、静的サイトの構築に最適化されており、軽量かつ高速なWebページを提供できる点が特徴です。 本記事では、Astroのルーティング に焦点を当て、その基本概念から実践的な実装方法まで詳しく解説します。ルーティングとは、ユーザーが特定のURLにアク... --- ### JavaScriptでキャッシュをクリアする方法【完全ガイド】 - Published: 2025-02-25 - Modified: 2025-03-05 - URL: https://watashi.xyz/js-cache-clear/ - カテゴリー: javascript - タグ: javascript, tips はじめに Web開発を行っていると、変更を加えたはずのJavaScriptファイルがブラウザにキャッシュされていて、意図した動作にならないことがあります。この記事では、JavaScriptを使用してキャッシュをクリアする方法を詳しく解説します。キャッシュの仕組みや、各種ブラウザでのキャッシュクリア手順についても紹介するので、ぜひ最後までご覧ください。 1. キャッシュとは？ キャッシュとは、ブラウザがWebページのデータ（HTML、CSS、JavaScript、画像など）を一時的に保存する仕組み... --- ### なぜ使わないの？Astro.jsでモダン＆最速のWebサイト構築！Asrotoとは - Published: 2025-02-21 - Modified: 2025-05-01 - URL: https://watashi.xyz/about-astro/ - カテゴリー: Astro - タグ: astro Astro JSは、超高速＆最適化された次世代フレームワーク！JavaScriptを最小限に抑えつつ、ReactやVueともスムーズに統合可能。アイランドアーキテクチャで必要な部分だけを動的にし、パフォーマンスを最大化。静的サイトを速く、美しく作りたい開発者必見！詳しく紹介します。 近年、Web開発の世界では「高速」「軽量」「柔軟性」が求められています。しかし、従来のフレームワークでは、パフォーマンス向上のために複雑な最適化が必要だったり、不要なJavaScriptが読み込まれてしまったりと、課題も少なくありません。そんな中、新たな選択肢として注目を集めているのが 「Astro」 です。 Astroは、静的サイト生成（SSG）に特化しながらも、React・Vue・Svelteなどの人気フレームワークと統合できる、画期的なWeb開発ツールです。最大の特徴は「アイランド・アーキ... --- ### IndexedDBとは？ブラウザ内で使えるデータベースの基本と活用法 - Published: 2025-02-15 - Modified: 2025-02-25 - URL: https://watashi.xyz/indexeddb/ - カテゴリー: javascript - タグ: indexeddb, javascript IndexedDBは、ブラウザ内で大容量データを保存・管理できるストレージ機能です。localStorageの制限を超え、オフライン対応も可能。この記事ではIndexedDBの基本概念や使い方、メリット・注意点をわかりやすく解説します。Web開発でデータ管理を効率化したい方は必見です！ 1. はじめに Web開発をしていると、「データをブラウザに保存したい」と思うことはありませんか？ 例えば、ログイン情報を保持したり、ユーザーの設定を記録したりする際には、cookieやlocalStorageを使うのが一般的です。しかし、localStorageは約5MBの制限があり、大量のデータを保存するには不向きです。 そこで登場するのがIndexedDBです。IndexedDBは、cookieやlocalStorageと同じくブラウザのストレージ機能ですが、大容量データを保存でき、検索や... --- ### WordPressは本当に危険？脆弱性の実態と安全対策 - Published: 2025-02-13 - Modified: 2025-05-13 - URL: https://watashi.xyz/wordpress-vulnerability/ - カテゴリー: WordPress - タグ: WordPress WordPressは脆弱性が多く、攻撃対象になりやすいと言われますが、本当に危険なのでしょうか？本記事では、WordPressの主な脆弱性と安全に運用するための対策をわかりやすく解説。初心者でも実践できるセキュリティ対策を紹介し、あなたのサイトを守る方法を詳しく説明します。 1. はじめに 「WordPressのサイトを運営しているけれど、セキュリティが不安... 」 「脆弱性ってよく聞くけど、実際にどんな危険があるの？」 「対策をすれば安全に使えるのか知りたい！」 このような悩みをお持ちではありませんか？ WordPressは世界で最も利用されているCMSですが、その人気の高さゆえに攻撃者の標的にもなりやすいのが現実です。実際、脆弱性を狙ったハッキングやマルウェア感染、サイトの乗っ取りといった被害は後を絶ちません。しかし、適切な対策を講じることで、WordPres... --- ### JavaScriptで一定時間後に自動で閉じるalertの実装方法 - Published: 2025-02-11 - Modified: 2025-03-12 - URL: https://watashi.xyz/js-alert-close/ - カテゴリー: javascript はじめに JavaScriptのalert関数は、簡単にダイアログを表示できる便利な機能ですが、通常はユーザーが手動で閉じる必要があります。しかし、特定の状況では一定時間後に自動で閉じたい場合もあります。本記事では、JavaScriptを使って自動で閉じるalertを実装する方法を詳しく解説します。 なぜalertを自動で閉じる必要があるのか？ 1. ユーザーエクスペリエンスの向上 alertは強制的に表示されるため、長時間残っているとユーザーの操作を妨げる可能性があります。一定時間後に自動で閉... --- ### CSSのエラーチェック方法とおすすめツール - Published: 2025-02-10 - Modified: 2025-02-15 - URL: https://watashi.xyz/css-error-check/ - カテゴリー: css - タグ: css はじめに CSSはWebサイトのデザインを決定する重要な技術です。しかし、コードが複雑になると、エラーや予期しないスタイル崩れが発生することがあります。効率的なエラーチェックを行うことで、保守性の高いコードを維持し、サイトの品質を向上させることができます。この記事では、CSSのエラーチェック方法と、役立つツールを解説します。 CSSのエラーチェックを行うべき理由 1. 意図しないデザイン崩れを防ぐ CSSの文法ミスやセレクターの誤りは、デザインの崩れを引き起こします。早期に発見し修正することで、... --- ### position: sticky が効かない？よくある原因と解決策を徹底解説 - Published: 2025-02-09 - Modified: 2025-03-11 - URL: https://watashi.xyz/position-sticky-fix/ - カテゴリー: css 1. はじめに CSSのposition: sticky;は、スクロールに応じて要素を固定表示させる便利なプロパティです。しかし、「意図した動作をしない」「効かない」といった問題によく直面します。 本記事では、position: sticky;が期待通りに動作しない主な原因と解決策を詳しく解説します。また、CSSを体系的に学ぶ方法も紹介します。 2. position: sticky;とは？ 2. 1 基本的な動作 position: sticky;は、スクロール時に指定した位置で要素を固定でき... --- ### UTMパラメータの設定方法：utm_mediumとutm_sourceのどちらに「qr」を含めるべきか？ - Published: 2025-02-08 - Modified: 2025-03-11 - URL: https://watashi.xyz/utm-qr-setting/ - カテゴリー: その他 1. はじめに QRコードを活用してウェブサイトのアクセスを解析する際、Googleが提供するCampaign URL Builderを利用することで、アクセス元を明確に把握し、マーケティング戦略を最適化できます。 しかし、QRコードからのアクセスを追跡する際、utm_mediumとutm_sourceのどちらに「qr」という値を設定すべきかのサイト毎に異なる方法が示されているためどちらが正しい設定方法か悩むことがあります。 本記事では、UTMパラメータの役割を整理し、QRコードに最適なパラメー... --- ### JavaScriptで曜日を取得・変換する方法まとめ（moment.js Day.js サンプルコードあり） - Published: 2025-02-07 - Modified: 2025-02-09 - URL: https://watashi.xyz/js-day-of-week/ - カテゴリー: javascript はじめに JavaScriptで日付を扱う際、曜日の取得や操作は頻繁に必要となります。しかし、実装時に具体的な書き方を思い出せないことも多いものです。本記事では、JavaScriptでの曜日の取得・操作方法を、初学者から実践者まで分かりやすく解説します。 JavaScriptで曜日を取得する方法 Dateオブジェクトを使う JavaScriptでは、Dateオブジェクトを使って曜日を取得できます。 const today = new Date; // 現在の日付を取得 const dayOfWe... --- ### JavaScriptのドット3つ（...）とは？スプレッド構文を徹底解説 - Published: 2025-02-06 - Modified: 2025-02-07 - URL: https://watashi.xyz/js-spread-syntax/ - カテゴリー: javascript - タグ: javascript 1. はじめに JavaScriptを学んでいると、... （ドット3つ）という記号を目にすることがあります。これは「スプレッド構文（Spread Syntax）」または「レスト構文（Rest Syntax）」と呼ばれ、配列やオブジェクトの操作を簡潔に記述できる便利な機能です。 本記事では、JavaScriptのスプレッド構文について、初心者にも分かりやすく解説します。また、実践者の方々の復習にも役立つよう、具体例を交えながら説明していきます。 2. スプレッド構文とは？ 2. 1 スプレッド構... --- ### CSSでスクロールできない問題の原因と解決策 - Published: 2025-02-05 - Modified: 2025-02-06 - URL: https://watashi.xyz/css-scroll-problem/ - カテゴリー: css - タグ: css はじめに Webサイトを制作していると、意図せずスクロールができなくなる問題に直面することがあります。本記事では、この問題が発生する原因と具体的な解決策を解説します。 初学者がつまずきやすいポイントから、現役エンジニアが見落としがちな細かい事項まで、特にスマホ環境での問題を詳しく説明していきます。 スクロールできない原因と対策 1. overflow: hidden; が適用されている CSSの overflow: hidden; は、親要素のサイズを超えたコンテンツを非表示にします。これにより... --- ### JavaScriptやjQueryで特定の表示状態を持つ要素の中のインデックスを取得する方法 - display: none の要素は数えないで！ - Published: 2025-02-04 - Modified: 2025-02-06 - URL: https://watashi.xyz/js-index-filter/ - カテゴリー: javascript - タグ: javascript 1. はじめに JavaScriptを使用して、特定の表示状態を持つ要素の中でインデックスを取得する方法について解説します。例えば、display: none; の要素を除外して、表示されている要素だけのインデックスを取得したい場合があります。 この記事では、jQueryを使用する方法とバニラJavaScript（純粋なJavaScript）を使用する方法の両方を紹介し、それぞれのメリット・デメリットについても解説します。 2. インデックス取得の基本概念 インデックスとは？ HTMLにおけるイ... --- ### box-shadowを特定の方向だけに適用する方法 - 影を横には出さずに縦だけに出したいんです - Published: 2025-01-23 - Modified: 2025-03-11 - URL: https://watashi.xyz/box-shadow-direction/ - カテゴリー: css - タグ: css CSSである要素に強調を持たせるために、プロパティbox-shadowは非常に有用な機能です。しかし、特定の方向だけに影を適用したいと思っても実際には不要な方向にも弱い影が出てしまうことがあります。この問題を回避するためのテクニックをご紹介します。 box-shadowの基本 box-shadowはCSSで影を指定するためのプロパティです。下のように書くことで、要素に影を指定できます。 box-shadow: x-offset y-offset blur-radius spread-radius... --- ### 2手で完了!? Astroフレームワークにtailwindcssを追加する方法 - Published: 2024-11-23 - Modified: 2025-03-11 - URL: https://watashi.xyz/astro-with-tailwindcss/ - カテゴリー: その他 - タグ: astro, tailwindcss はじめに 静的サイトジェネレーターAstroフレームワークにCSSフレームtailwindcssを導入する方法を記します。 tailwindcssの導入によってクラス名に悩んだりメディアクエリを無駄に増やすことを避けられて制作がスムーズに進められます。 前提 node. jsは既にインストールされている状態を想定しています。※node. jsって何？な人は「node. js インストール」でGoogle検索するか今ならChatGPTに質問すると環境構築の方法を知ることができます。 検証はWind... --- ### WordPressでAjax処理を行う時の簡単な方法と流れ - Published: 2024-11-17 - Modified: 2025-03-11 - URL: https://watashi.xyz/wp-ajax-flow/ - カテゴリー: WordPress - タグ: javascript, WordPress はじめに WordPressでオリジナルテーマやプラグインでAjax通信を設定する流れの備忘録です。 wp_localize_script wp_ajax_、wp_ajax_nopriv_ javascript これらのキーワードをこの順番で覚えておくと良いと思われます。 各処理の詳細は下記になります。 ①Ajax通信用のjavascriptで使用できるグローバルな変数を設定する 操作するファイル ⇒ functions. php ▼詳細関数「wp_localize_script」を使用して「a... --- ### Astro.jsにReactを導入する完全ガイド｜Astro×Reactでインタラクティブなサイトを作る - Published: 2024-11-10 - Modified: 2025-03-11 - URL: https://watashi.xyz/astro-with-react-start/ - カテゴリー: Astro - タグ: astro Astro. jsは超高速な静的サイトジェネレーターとして注目されていますが、Reactと組み合わせることで、柔軟でインタラクティブなサイト制作が可能になります。本記事では、AstroとReact の組み合わせによる開発手順を、初心者にもわかりやすく解説します。 公式 チュートリアルは体系的に学べるのが良いのですがサッと見て思い出したいときのために記事に残しておこうと思います。 Astro. jsプロジェクトを作成【astro js react】 まずはAstro. jsの新規プロジェクトを作成... --- ### 【CSS】floatした画像を文章の右下に回りこませる方法 - Published: 2024-11-04 - Modified: 2025-03-11 - URL: https://watashi.xyz/float-right-bottom/ - カテゴリー: css - タグ: css はじめに デザイナーから渡されるデザインカンプで画像が右下の回り込んでいるパターンを見たことがある人はどれだけいるのでしょうか？ 画像が回り込んでいる部分の幅や高さが固定値ならばそれほど困らないのですが画面幅によって見た目が変わるレスポンシブデザイン全盛の現在では対応に困ってしまいます。 そんな右下回り込み画像ですがCSSの進化によってJSを使用しないでも対応できるようになっていたのでこの記事ではそのやり方を記します。 完成版HTMLとCSS 回り込ませるテキスト。回り込ませるテキスト。回り込ま... --- ### 入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法） - Published: 2024-11-01 - Modified: 2025-03-11 - URL: https://watashi.xyz/textarea-size-adjust/ - カテゴリー: HTML, javascript - タグ: css, html, javascript はじめに WEBサイトで長い文字列を入力可能にするtextareaタグですがデフォルトのままだと行が増えていくと初期の高さを超えた時に上部の文字が見えなくなってしまいます。スクロールバーが出現してスクロールをすることによって見ることができはしますがいちいちスクロールするのは煩わしいので ユーザーが使いやすいように入力内容にあわせて高さが自動調整するようにした方がよいです。本記事では４種類のやりかたでtextareaタグの高さを自動調整する流れを紹介します。 高さを自動調整する４つの方法の概要 t... --- ### Astroフレームワークで生成フォルダをdistから任意のフォルダ名にする方法 - Astro.jsで静的サイト制作 - Published: 2024-04-05 - Modified: 2025-03-07 - URL: https://watashi.xyz/astrojs-change-folder/ - カテゴリー: Astro - タグ: astro 最新のWEBフレームワーク「Astro. js」で静的サイトを作成するために覚えておくとよいこと第2弾です。 今回はビルドコマンドで生成されるフォルダをデフォルトの「dist」から任意の名前に変更する方法です。 なぜ任意のフォルダ名にしたいか 既存のサイト内の子ページを作成したい場合にはフォルダ名を変更してアップロードする必要があります。 ビルドコマンドで生成の段階でフォルダ名を指定できれば便利です。 フォルダ名の設定方法 npm create astro@latest コマンドで生成される a... --- ### Astroフレームワークを相対リンクにする方法 - Published: 2024-03-29 - Modified: 2025-03-07 - URL: https://watashi.xyz/astro-relative-link/ - カテゴリー: Astro - タグ: astro はじめに ウェブフレームワークAstro（Astro. js）を利用して静的サイトを作成する際に各画像パスだったりサイト内リンクが相対リンクだと便利です。この記事を読むとAstro. jsでの相対リンクのプラグインの設定方法がわかります。 Astro（Astro. js）とは Astro. jsはウェブサイトやアプリを作るためのツールです。サイトの速度を上げ、リソースの使用を抑えることが目指されています。サーバーサイドで描画しながら静的なサイトを作ることができ、HTML、CSS、JavaScri... --- ### これは便利！HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法 - Published: 2024-03-13 - Modified: 2025-03-11 - URL: https://watashi.xyz/dialog-modal-window/ - カテゴリー: その他 - タグ: css, html, javascript モーダルウインドウ機能を実装するのに古い方法で作成していませんか？ 古い方法とは次のようなやり方です。 オーバーレイ（モーダルの背景）用のdivタグを用意 モーダルの実体用のdivタグを用意 cssもしくはjsでpositionやopacity、displayなどの値を操作 開閉イベントを登録 モーダルがアクティブ状態の時に背景がスクロールできないようにする この記事はdialogというHTMLタグを利用したモーダルウインドウの実装方法になります。 2022年9月以前はFireFoxが実装してい... --- ### jsでもっとちゃんとタブUIを実装する（jQuery不使用）- ページ更新してもタブがリセットされないやり方 - Published: 2024-03-08 - Modified: 2025-03-11 - URL: https://watashi.xyz/better-tab-ui/ - カテゴリー: その他 - タグ: javascript, tab WEBサイトに一般的なタブのUIを追加したい時、インターネットで実装のサンプルコードを探すことがあると思います。たくさんの記事が検索でひっかかりますが「とりあえず動けば良い」というようなコードも少なくありません。 タブを押せて該当するコンテンツが表示される動きはできているがブラウザを更新したらタブが戻る タブのコンテンツ内のアンカーリンクをクリックしたらタブの動きがおかしくなる jQueryを読み込まないと動かない このような不具合に出会ったことはないでしょうか？この記事では上記のような不具合が... --- ### 意外と簡単！WSL2にCentos9Streamをインストールする方法 - Published: 2024-03-05 - Modified: 2025-03-11 - URL: https://watashi.xyz/wsl2-centos9stream/ - カテゴリー: その他 - タグ: centos, wsl はじめに 最近CentOS9Streamを操作する必要が発生しましたがいきなり本番系で操作するのも不安なのでまずWSLにインストールして試してみようと思いました。 ただUbuntuはMicrosoftStoreでボタン一つで簡単にインストールできるのに対してCentOSはMicrosoft Storeにありません... 。 ネットの記事をいろいろ調べてインストールに挑戦したら思ったよりも簡単に成功したのでその流れを記します。 「WSLにCentOS9StreamをいれたいけどMicrosft S... --- ### iPhone、safariでボタンの文字が青くなる原因と対処方 - Published: 2024-02-29 - Modified: 2025-03-11 - URL: https://watashi.xyz/iphone-button-color-blue/ - カテゴリー: その他 - タグ: css はじめに WEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじゃないボタン（buttonタグ）の色が黒じゃない... 」という状態になったことはないでしょうか？Windowsの端末で作業している人は特に。 BootstrapなどのCSSフレームワークを使用していれば基本要素には全部ノーマライズ的なスタイルがあたっていると思って忘れがちな落とし穴です。 原因 この原因は単純でiOS15だからです。 iOS15ではbuttonタグのcolorに--apple-sy... --- ### jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法 - Published: 2024-02-27 - Modified: 2025-03-11 - URL: https://watashi.xyz/swiper-linkage-example/ - カテゴリー: javascript - タグ: html, javascript はじめに カルーセル（スライダー）をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper. jsの利用サンプルです。 ▼Swiperhttps://swiperjs. com/ 今回作りたいカルーセルの仕様 記事のリンクを想定しています。 上側は記事のサムネイル、下側は記事のテキスト情報を表示します。 さらにテキスト情報には以下の内容が入ります。 タイトル 抜粋 記事公開日 記事は１スライダーに１個だけ表示されスライドーしてほかの記事が見えるようにします。ただし... --- ### grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法 - Published: 2024-02-25 - Modified: 2025-03-11 - URL: https://watashi.xyz/css-grid-area/ - カテゴリー: css - タグ: css はじめに レスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？ display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。 どちらを使うかは条件によって分かれます。 例えば... ＜条件1＞スマホは1列、デスクトップは4列、要素は左詰めでOK ＜条件2＞スマホは1列、デスクトップは4列、要素は1番目が左上、2番目が左下、3番目が右上、4番目が右下に というような2種類の条件があるとして ＜条件1＞はdisplay:fle... --- ### 知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp - Published: 2024-02-23 - Modified: 2025-03-11 - URL: https://watashi.xyz/css-line-clamp/ - カテゴリー: css - タグ: css はじめに あるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は... （３点リーダー）として表示されます。 WordPressなどの記事の抜粋を表示するサイト制作の際にとても役にたつプロパティなのですがtext-overflow:ellipsis;は１行のテキストが対象になります。 １行ではなくて例えば３行（複数行）で収まるようにしたい場合はどうすればよいかというとline-clamp プロパティを使用します。 ... --- ### レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら - Published: 2024-01-10 - Modified: 2025-03-11 - URL: https://watashi.xyz/responsive-font-size-stylus/ - カテゴリー: stylus - タグ: css はじめに レスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？ この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。 CSSではなくnode製altcssのstylusのコードになります。 各要素に気軽に設定できるようにmixinになっています。 stylusとは SASSやLESSなどと同じALTCSSの１つです。node製で最終的にcssファイルを生成します。コロンやセミコロン、ブランケットを省略することができ入力手数... --- ### スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法 - Published: 2023-11-21 - Modified: 2025-03-11 - URL: https://watashi.xyz/fractal-nunjucks/ - カテゴリー: javascript - タグ: fractal はじめに サイトやWEBアプリなどの見やすいスタイルガイドを作成できるジェネレーターのひとつに「Fractal」というツールがあります。 Fractal Fractalは何も指定しなければテンプレートエンジンに「Handlebars」を使用しますが設定次第でそれを「nunjucks」に変更することができます。 今回はFractalでnunjucksを使用する方法を紹介します。 Fractalとは node製のスタイルガイドジェネレーターです。 スタイルガイドというのはスタイルの決まりをまとめたも... --- ### inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用） - Published: 2023-11-12 - Modified: 2025-03-12 - URL: https://watashi.xyz/input-number-only/ - カテゴリー: HTML, javascript - タグ: html, javascript はじめに フォームで入力欄に全角数字だけを入力してほしいときがあります。 javascriptでリアルタイム変換が可能なのでひと手間かけて処理を追加しておくと間違いが減ってよりよいフォームになるでしょう。 今回はjQueryは使用しないで処理を行うスクリプトです。 コードのサンプル 早速コードのサンプルです。 ①"oninput"属性を利用する場合 function NumberOnly(v) { return v. replace(//g, (s) => String. fromCharCod... --- ### ちょっと待って！！知っていますか？input type=numberの落とし穴 - Published: 2023-11-07 - Modified: 2025-03-11 - URL: https://watashi.xyz/input-type-number-trap/ - カテゴリー: HTML - タグ: css, html はじめに ユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？ 数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。 input type=numberには落とし穴があります。 input type=numberの落とし穴 Chromeでsizeが効かない chrome、edgeではsize属性で幅を変更することができません。幅を設定したい場合はcssもしくはstyle属性で調整します。 type属性の値が... --- ### ReactをCDNで利用した場合のuseState、useEffectの書き方 - Published: 2023-11-06 - Modified: 2023-11-06 - URL: https://watashi.xyz/react-usestate-cdn/ - カテゴリー: javascript - タグ: javascript, React はじめに ReactをCDNから利用することは以前の記事で書きました。 ▼過去の記事はこちら https://watashi. xyz/web/react-cdn/ Reactに限らずjavascriptのフレームワークでは状態管理が便利です。Reactの状態管理useStateとuseEffectですが、npmで構築する時と書き方が少し変わってきます。 今回はCDNでuseState、useEffectを利用する時の書き方を紹介します。 useState、useEffectとは useStat... --- ### これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法 - Published: 2023-11-02 - Modified: 2023-11-03 - URL: https://watashi.xyz/react-cdn/ - カテゴリー: javascript - タグ: javascript, React はじめに javascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。 それも良いのですが既にReactなしで出来上がったサイトに組み込みたい時や気軽にReactの良いとこどりをしたい時はnpmは使用せずcdnを利用するのも良い選択かもしれません。 この記事ではReactとJSXをcdnから利用する方法を紹介します。 気軽にReactをサイトに組みこんだり試したりしてみましょう。 Reactを使用する際にほぼ利用するjavascr... --- ### npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話 - Published: 2023-09-07 - Modified: 2025-03-13 - URL: https://watashi.xyz/prettier-gitignore/ - カテゴリー: その他 - タグ: prettier, 備忘録 はじめに npmを使用してサイト制作をする際にコード自動整形ツール「prettier」を使用しています。 prettierのバージョンが3にあがってから自動整形されなくなってしまいました。 バージョンのバグかと思っていましたがただの設定ミスだったというお話です。 prettierをどう入れていたか npm i -D prettier で最新のバージョンをインストールします npm-scriptsでタスク処理設定を行っていたのでpackage. jsonに下記項目を追加します "scripts":... --- ### tailwindcssの使い方をさくっと説明 - ざっくり入門したい人向け - Published: 2022-11-04 - Modified: 2025-03-11 - URL: https://watashi.xyz/tailwindcss-starter/ - カテゴリー: javascript - タグ: tailwindcss tailwindcssはcssフレームワークです。他のCSSフレームワークとの違いはtailwindcssはユーティリティークラスの集まりだということです。CSSフレームワークの代表的な存在の「Twitter Bootstrap」はユーティリティークラスの他にデザインされたコンポーネントを使用することができます。 Twitter Bootstrapを使用すると良くも悪くもTwitterBootstrapっぽいデザインができあがります。もともとコンポーネントとしてデザインが設定されているアイテムが... --- ### Vscode＋wsl2でWordpressコード規約をもとにした自動整形を実現する方法 - 後の作業をもっと楽に - Published: 2022-10-17 - Modified: 2023-10-28 - URL: https://watashi.xyz/vscode-wordpress-format/ - カテゴリー: WordPress - タグ: php, vscode, WordPress 今最も人気のあるコードエディタといえばMicrosoftのVisual Stuido Codeではないでしょうか？拡張機能を使えばコーディング規約に基づき自動整形をしてくれる等とても効率的に開発を行えます。PHPの自動整形も同様です。 しかし、普通のPHPではないWordPressコーディング規約に合わせて自動整形をしたい場合、少し設定が複雑になります。 この記事では Visual Studio Code(以降vscode）でWordPressのコーディング規約に基づいた自動整形を行う方法を記し... --- ### 新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール - Published: 2022-10-07 - Modified: 2022-12-01 - URL: https://watashi.xyz/smooth-scroll-pagetop/ - カテゴリー: javascript - タグ: css, javascript WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQueryのanimateを利用している人、そのコードもう古いかもしれません。IE11がサポート外になった今、もっと簡単な新しいコードで書いていきましょう。 ページ内リンクへのアンカースクロールはCSSで制御できる ページ内リンクへのスムーススクロールは今までjavascriptで制御してきました。今までのコードは次のようなものでした。※jQ... --- ### tailwindcssをWordPressにマッチさせる方法 - テーマ開発における相性の悪さをカバーしよう - Published: 2022-10-05 - Modified: 2025-03-11 - URL: https://watashi.xyz/tailwindcss-adjust-wordpress/ - カテゴリー: WordPress - タグ: tailwindcss, WordPress tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たところ相性について思うことがありましたのでお伝えします。 tailwindcssとは ユーティリティーベースのCSSフレームワークです。似たようなものにTwitterBootstrap等があります。TwitterBootstrap（以降bootstrap）と違いTailwindcssはすべてユーティリティクラスとして構成されています。Tailwindcss公式ページ tailwi... --- ### jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法 - Published: 2022-09-08 - Modified: 2022-09-12 - URL: https://watashi.xyz/ajax-json-without-jquery/ - カテゴリー: javascript - タグ: Ajax, javascript Ajaxとは Asynchronous + JavaScript + XMLの頭文字を使用した非同期処理のことです。jQueryで書くと楽に書くことができます。jQueryでの書き方は以下の記事に書きました。 https://watashi. xyz/web%e5%88%b6%e4%bd%9c/json-ajax-jquery jQueryを使う書き方の記事が多いが実はもうjQueryを使用しなくても簡単にAjax処理が書ける 頻繁にAjaxを使用していれば忘れることはありませんがたまにしか使わ... --- ### Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用） - Published: 2022-08-31 - Modified: 2023-04-05 - URL: https://watashi.xyz/json-ajax-jquery/ - カテゴリー: javascript - タグ: Ajax, javascript WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケースがあります。そんなときにはjsonデータなどの外部ファイルをAjaxで取得して表示させる処理も選択肢に入れれるように流れを覚えておくと良いです。 Ajaxとは 「Asynchronous Javascript + Xml」の略でAsynchronous（非同期）でJavascriptとXMLを使った処理のことを指します。同期と非同期という... --- ### JSONファイルはコメントアウトできません。でもなんとかする方法 - Published: 2022-08-26 - Modified: 2025-04-16 - URL: https://watashi.xyz/json_commentout/ - カテゴリー: その他 - タグ: javascript, json, React JSONファイルでコメントアウトはできません Ajaxを利用して外部データを取得、それをもとにレンダリングをする機会がかなり増えてきました。 この外部データで一番使いやすいのはjsonファイルです。データ構造がまんまjavascriptのオブジェクト型なのでデータを変数に入れるとそのままオブジェクとして扱えるのです。 jsonファイルにデータを保存しておいて運用するとHTML等のコーディングを軽量化できます。特にリスト表示のデータを外部データとして扱うと効果は絶大です。 ただ運用上不満が生まれま... --- ### browserslistはpackage.jsonに書くか.browseslistrcに書くか - Published: 2022-07-12 - Modified: 2025-03-13 - URL: https://watashi.xyz/env-browserslist/ - カテゴリー: javascript browserslistとは何か 名前のとおりターゲットブラウザを設定できるツールで色々なNodeのツールで使用できます。例えばautoprefixerやbabel、postcss-preset-envなどはbrowserslistを解析してそこで設定されているブラウザを対象にした処理を行うようになっています。2022年7月現在、browserslistの設定方法は２種類あります。 package. jsonにbrowserslistという項目として記述する. browserslistrcという... --- ### Stylelintを利用してコードを自動整形する方法 - Published: 2022-06-28 - Modified: 2022-06-30 - URL: https://watashi.xyz/stylelint-starter/ - カテゴリー: その他 cssを分析して間違いを指摘してくれるツールStylelint。これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。一度その仕組みを組んでしまえばあとは楽で便利ですが、導入部分が少し複雑なのでnpm-scriptsでStylelintを稼働して作法がバラバラなCSSファイルを自動整形できるようにするまでの流れを残して置きます。 前提条件 node. jsがインストールされている ディレクトリ構造作成＋パッケージインストール プロジェクトフォルダを作成し... --- ### PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法 - Published: 2022-06-22 - Modified: 2025-03-12 - URL: https://watashi.xyz/postcss-nesting-problem/ - カテゴリー: その他 - タグ: postcss cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い入れ子表記を実現可能にするプラグインpostcss-nestingを使用時にちょっと気になる問題があったのでその問題と解決策を紹介します。 問題１） Sassの&（アンパサド）のように親要素の名前をclass名に出力することはできない。よってBEMの時によく使う子要素の命名tip... --- ### Edgeで画像の右上のマークは何？出る条件と影響について - Published: 2022-06-14 - Modified: 2022-06-19 - URL: https://watashi.xyz/edge-image-mark/ - カテゴリー: その他 - タグ: edge 久しぶりにEdgeを画像にマウスカーソルをあてたらに右上に知らないアイコンが出て「おや？」と思ったかたはいないでしょうか？ 他の画像に同じことをしてもアイコンが出てこないのもあるし制作者の意図なのか紛らわしいですね。 クリックするとわかりますが正体はEdgeの画像検索機能です。 これはbingの画像検索機能に依存している機能で対象画像に関連コンテンツがあると判断されればボタンが表示されます。 例えば、日本地図が入っているの画像上の「画像検索」ボタンをクリックすると日本地図の画像が関連コンテンツに... --- ### jsonファイルを利用してデータとテンプレートを分ける - npm + nunjucks + stylus で静的サイト制作を効率的にする(6) - Published: 2022-06-13 - Modified: 2022-06-15 - URL: https://watashi.xyz/env-npm-nunjucks-stylus-json/ - カテゴリー: javascript, stylus - タグ: json テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができるリストのような同じ構造の大量のコードを一か所にまとめることができる 今回は２の詳細を紹介します。 具体的にはjsonファイルでリストデータを保持してテンプレートファイルにループ処理でリストタグを吐き出すようにします ▼今までの構築の流れはこちら npm + Nunjucks + Stylus で... --- ### StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編） - Published: 2022-06-12 - Modified: 2024-03-04 - URL: https://watashi.xyz/stylus-media-query-mixin/ - カテゴリー: stylus - タグ: stylus sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作るか紹介します。 実際に追加するコード mq(num) breakpoints = { sm: 576, md: 768, lg: 992, xl: 1200 } for key, val in breakpoints if (num == key) num = val @med... --- ### webpackにbabelを導入する - npm + nunjucks + stylus で静的サイト制作を効率的にする(5) - Published: 2022-06-11 - Modified: 2022-06-13 - URL: https://watashi.xyz/env-npm-nunjukcs-stylus-babel/ - カテゴリー: javascript, stylus webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。 そうならない為にひと手間加えてより確実に用意したjsコードが実行されるようにします。 今までの流れは下記記事に書いてあります。 npm + Nunjucks + Stylus で静的サイト制作を効率的にするファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2)画像をコ... --- ### StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編） - Published: 2022-06-10 - Modified: 2022-06-13 - URL: https://watashi.xyz/stylus-mixin-spaces/ - カテゴリー: stylus node. js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイルを効率的に作成することができます。 先発のCSSプリプロセッサsassでも同様のことができますがsassの記述をそのまま持ってきても当然動かないのでstylusでの書き方を最近sassから乗り換えた人や stylusを使い始めた人に紹介します。 stylusのコンパイル環境は各自調べるか下記記事をご参考に ▼npm + Nunjuck... --- ### flexbox使用の要素が折り返さない！？解決への鍵はflex-basisの値だった - Published: 2022-06-08 - Modified: 2025-03-12 - URL: https://watashi.xyz/flexbox-inner-wrap/ - カテゴリー: css - タグ: css Webデザインで「要素を横並びにしたいのに、勝手に折り返される... 」そんな経験はありませんか？flex-wrap: nowrap;を指定しているのに思ったように動作しない原因は、親要素のサイズ、CSSリセット、ブラウザの互換性など、さまざまな要因が考えられます。 この記事では、Flexboxで要素を折り返さないための具体的な解決策を詳しく解説。よくあるトラブルとその対処法、flex-wrapを活用したレイアウト例、レスポンシブ対応のポイントまで幅広く紹介します。 「flex-wrapを正しく... --- ### webpackを使用してjavascriptを集束（バンドル）する - npm + nunjucks + stylus で静的サイト制作を効率的にする(4) - Published: 2022-06-07 - Modified: 2022-06-08 - URL: https://watashi.xyz/env-nunjukcs-stylus-webpack/ - カテゴリー: javascript, stylus 前回までで次のようなことをやってきました。 nunjucks でhtml生成stylus でcss生成imagemin で画像圧縮 javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時のためにwebpackを使用してバンドルする流れも残しておきます。 今回はjavascriptを対象にしますがTypescriptを使用するケースもありますのでそれは別の記事で残しておきます。 複数のjavascriptファイルを適切にまとめてくれるツール。jsファイル以外のファイル... --- ### 画像をコピーもしくは圧縮する - npm + nunjucks + stylus で静的サイト制作を効率的にする(3) - Published: 2022-06-05 - Modified: 2022-06-08 - URL: https://watashi.xyz/env-nunjucks-stylus-3/ - カテゴリー: javascript, stylus npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。 ただ画像ファイルの処理がないのでその処理を追加していきます。 画像ファイル処理については大体２つのルートを考えます。 画像は画像ソフトでひとつひとつ適切に圧縮する画像は一括で圧縮してサイズを小さくする 画像をただコピーするパターン １）の場合はコピーだけで済ませるだけで十分かと思っています。その時は... --- ### ファイル更新を感知し更新確認を簡単にする - npm + nunjucks + stylus で静的サイト制作を効率的にする(2) - Published: 2022-06-04 - Modified: 2022-06-04 - URL: https://watashi.xyz/env-nunjucks-stylus-2/ - カテゴリー: javascript, stylus npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。 前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。 今回はファイル更新を感知して自動更新されるように設定します。 watchコマンドを設定する 前回同様package. jsonのscriptの項目内にファイル更新感知（watch）コマンドを用意します。 "watch:html": "chokidar \"src/**/*. njk\" -c \"npm r... --- ### npm + Nunjucks + Stylus で静的サイト制作を効率的にする - Published: 2022-06-03 - Modified: 2022-09-21 - URL: https://watashi.xyz/env-nunjucks-stylus/ - カテゴリー: javascript, stylus 静的サイト制作時におすすめのタスク自動化ツール構成 npm+Nunjucks+Stylus を紹介します。 各ツールの簡単な紹介 Node. jsのパッケージマネージャー。Node. jsをインストールすると自動的にインストールされる。 javascripで使用するテンプレートエンジン。Mozillaが開発している。 Node. js製のCSSプリプロセッサ。 前提条件があります 満たしていなければ用意してください nodeインストール済み Linuxツールインストール済み（※WSLが使用可、g... --- ### WordPressでSNS関連の独自オプションを管理画面に制作する - Published: 2022-06-02 - Modified: 2022-11-02 - URL: https://watashi.xyz/wp-sns-options/ - カテゴリー: WordPress 管理画面にSNSの独自オプションを置きたい場合は次のようなコード追加で実現できます。 SNS設定 --- ### WordPressでカスタムポストの複数記事の特定文字を一括変更するPHPコード - Published: 2022-05-31 - Modified: 2025-03-13 - URL: https://watashi.xyz/wp-modify-post-db/ - カテゴリー: WordPress - タグ: WordPress 何十、何百と記事を投稿したあとにある言葉が日本語が間違っていたなんてことはないでしょうか？ ひとつひとつの記事を管理画面から修正するなんて考えたら気が重くなります。 効率よく複数記事の内容を変更する方法は何個かあると思いますが今回はPHPプログラムを書いて変更する処理を書いていきます。 間違っている状況例 本文中の「（仮）」が不要になったので一括で削除したいカスタム投稿のpost_typeは「cp」 前提条件 htaccessが操作できる環境であるphpMyAdminなどは使えない 最初にサーバ... --- ---