https://watashi.xyz わたしの情報をわたします Mon, 09 Feb 2026 15:40:23 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://watashi.xyz/wp-content/uploads/2024/03/cropped-Watashi-32x32.png https://watashi.xyz 32 32 https://watashi.xyz/popup-modal-difference/ Mon, 09 Feb 2026 15:37:41 +0000 https://watashi.xyz/?p=6720 ポップアップとモーダルの違いが曖昧で、仕様書や実装で迷っていませんか。本記事では定義の違いから、別ウィンドウと画面上に重なるUIの判別、alertやtoastとの関係、HTML/CSS/JavaScriptでの実装注意点、UXを踏まえた使い分け判断まで分かりやすく解説します。現場ですぐ役立ちます。初心者向け。

The post ポップアップとモーダルの違いを定義・実装・判断フローまで完全網羅｜Web制作の混乱を今すぐ解消 first appeared on WATASHI.xyz.]]> https://watashi.xyz/cache-control-guide/ Mon, 15 Sep 2025 15:00:00 +0000 https://watashi.xyz/?p=6370 Cache-Controlの設定方法を分かりやすく解説。no-cacheやno-storeなどの違いから、Apache・Nginx・WordPress・HTMLでの具体的な記述例、画像やCSS・JSを長期キャッシュするベストプラクティスまで網羅。SEO改善や表示速度向上に役立つ実践的な知識をまとめています。

The post 【完全版】Cache-Control設定方法まとめ | ブラウザ別挙動・CDN対応・セキュリティ強化まで完全ガイド first appeared on WATASHI.xyz.]]> https://watashi.xyz/ogp-meta-tags-html/ Wed, 10 Sep 2025 15:00:00 +0000 https://watashi.xyz/?p=6153 OGPタグの基本から応用までをわかりやすく解説！必須タグ一覧や正しい書き方、SNS別の表示仕様、SEOとの関係、画像サイズの最適解まで網羅しています。TwitterやFacebook、LINEでシェアしたときに理想的な表示を実現したい方におすすめの保存版ガイドです。テンプレートや記述例も豊富に掲載しています。

The post OGPタグ一覧｜Facebook・Twitter・LINEで正しく表示させる設定と画像サイズの最適解 first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-diagnostic-test/ Tue, 09 Sep 2025 15:00:00 +0000 https://watashi.xyz/?p=6120 JavaScriptで診断テストを自作したい方必見！この記事では、HTML＋JavaScriptで作る基本構造から、得点式・条件分岐型ロジックの実装方法まで解説します。性格診断や適職診断などに応用できるコード例や、初心者でもコピペで動かせるテンプレート付きで、すぐに魅力的な診断コンテンツを公開できます。

The post JavaScript診断テストの作り方：コピペで複雑な性格診断・得点ロジックを実装！応用まで完全解説 first appeared on WATASHI.xyz.]]> https://watashi.xyz/dialog-modal-window/ Sat, 16 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=1108 HTMLのdialogタグを使えば、モーダルや確認ダイアログをシンプルに実装できます。本記事では基本的な使い方から、show()やshowModal()の違い、閉じるボタンやESCキー対応、背景ぼかし・z-index調整などのデザイン方法まで丁寧に解説。初心者から実務で使いたい方まで幅広く役立つ内容です。

The post HTMLのdialogタグでモーダルダイアログを実装！基本・構造・閉じ方までわかる完全ガイド first appeared on WATASHI.xyz.]]> https://watashi.xyz/sp-firstview-size/ Tue, 05 Aug 2025 15:00:00 +0000 https://watashi.xyz/?p=4903 スマホのファーストビューサイズに迷っていませんか？本記事では「スクロールなしで見える領域」の定義から、最適な高さ・幅の目安、数値の根拠をわかりやすく解説。さらにCTAやキャッチコピーの配置バランス、フォントやボタンの適切なサイズ、余白設計のコツまで具体的に紹介。CVR改善やユーザー体験向上を目指す方におすすめです。

The post 【2025年最新版】スマホのファーストビュー最適サイズ完全ガイド｜高さ・幅の目安と成果を出すレイアウト first appeared on WATASHI.xyz.]]> https://watashi.xyz/hvideo-embed-mp4/ Tue, 22 Jul 2025 15:00:00 +0000 https://watashi.xyz/?p=4590 HTMLでMP4動画を埋め込む基本的な手順から、コピペで使える具体的なコード例、videoタグとiframeの使い分けまで解説。再生されない原因の対処法やスマホ対応のレスポンシブ設定、MOVやWebMなど他形式との違いも詳しく紹介。さらに、SEO対策や動画のダウンロード防止設定など、実用的な知識も網羅したガイドです。

The post MP4動画をHTMLにスマートに埋め込む｜iframeとの違い、SEO効果とパフォーマンス最適化 first appeared on WATASHI.xyz.]]> https://watashi.xyz/hotlinking-forbidden/ Fri, 11 Jul 2025 15:00:00 +0000 https://watashi.xyz/?p=4336 直リンクはなぜ禁止されているのか？この記事では、直リンクの基本から、間接リンクやディープリンクとの違い、禁止される理由を技術・法的・倫理的な観点で解説。さらに、.htaccessやWordPressプラグインを使った対策、万が一直リンクされた際の発見・対応方法まで、初心者の方にも丁寧にご紹介します。

The post なぜ直リンクは禁止なのか？技術・法律・マナーの観点から徹底解説＆今すぐできる対策まとめ first appeared on WATASHI.xyz.]]> https://watashi.xyz/line-break-without-br/ Sun, 06 Jul 2025 15:00:00 +0000 https://watashi.xyz/?p=4250 brタグを使わずにHTMLで正しく改行する方法をご紹介。SEOやアクセシビリティの観点からなぜbr多用がNGなのかを解説し、pタグやCSS、Flexboxを活用した実践的なテクニックも丁寧にご紹介します。エディタとブラウザの表示ズレ、改行コードの違い、HTMLメールやCMSでの注意点など、現場で役立つ情報が満載です。

The post brタグ以外でHTMLをきれいに改行！SEO・アクセシビリティも高める完全ガイド！ first appeared on WATASHI.xyz.]]> https://watashi.xyz/html-living-standard/ Tue, 17 Jun 2025 15:00:00 +0000 https://watashi.xyz/?p=3697 HTML Living Standardの基礎知識からHTML5との決定的な違い、廃止されたタグ、セマンティックな書き方、そしてバリデーションやSEO効果まで、実務で役立つ情報を網羅的に解説。最新のHTMLコーディング規約を理解し、より堅牢で高品質なウェブサイトを構築するためのヒントが満載です。

The post HTML Living Standardの書き方～HTML5との違い・廃止タグ・使えるタグ・実例コードまで〜 first appeared on WATASHI.xyz.]]> https://watashi.xyz/tailwind-config-js/ Mon, 12 May 2025 15:00:00 +0000 https://watashi.xyz/?p=2834 「tailwind.config.jsがない」はもう古い常識？Tailwind CSS v4.0で導入された「CSSファースト設定」により、設定ファイルが不要になった理由を詳しく解説。新しいカスタマイズ方法や旧バージョンからの移行手順、Vite/Next.js連携のコツまで網羅し、あなたの疑問を全て解決します。

The post 【初心者向け】tailwind.config.jsが見当たらない理由とCSSファースト時代の正しい使い方 first appeared on WATASHI.xyz.]]> https://watashi.xyz/js-dropdown/ Fri, 09 May 2025 15:00:00 +0000 https://watashi.xyz/?p=2762 HTMLとJavaScriptでプルダウンメニューを簡単に実装！CSSでの見た目の整え方から、JavaScriptを使った要素の取得、選択値の取得、ユーザーのアクションを検知するchangeイベントの使い方、デフォルト項目を設定する方法まで基礎を網羅。よくあるエラーの解決策といった実践的な応用テクニックまで紹介します。

The post HTMLプルダウンメニューをJavaScriptで強化！初心者向け実装ガイドと動的機能の作り方 first appeared on WATASHI.xyz.]]> https://watashi.xyz/sortable-table/ Mon, 28 Apr 2025 15:00:00 +0000 https://watashi.xyz/?p=2594 HTMLのtableにソート機能を追加する方法を初心者向けにやさしく解説！基本のJavaScript実装から、コピペOKなサンプル、ライブラリtablesorter・List.jsの活用法、Bootstrapの連携からスマホ対応テクニックまで幅広く紹介します。これを読めばソート可能なテーブルはバッチリです。

The post 【初心者向け】HTMLテーブルにソート機能を追加！コピペOK＆JavaScriptだけで簡単並び替えする方法 first appeared on WATASHI.xyz.]]> https://watashi.xyz/textarea-size-adjust/ Fri, 01 Nov 2024 14:23:07 +0000 https://watashi.xyz/?p=1197 はじめに WEBサイトで長い文字列を入力可能にするtextareaタグですがデフォルトのままだと行が増えていくと初期の高さを超えた時に上部の文字が見えなくなってしまいます。スクロールバーが出現してスクロールをすることによ […]

The post 入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS、jQuery、ライブラリを使った各方法） first appeared on WATASHI.xyz.]]> https://watashi.xyz/swiper-linkage-example/ Tue, 27 Feb 2024 14:39:06 +0000 https://watashi.xyz/?p=1010 はじめに カルーセル（スライダー）をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper.jsの利用サンプルです。 ▼Swiperhttps://swiperjs.com/ 今回作りたい […]

The post jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法 first appeared on WATASHI.xyz.]]> https://watashi.xyz/input-number-only/ Sat, 11 Nov 2023 15:00:00 +0000 https://watashi.xyz/?p=906 はじめに フォームで入力欄に全角数字だけを入力してほしいときがあります。 javascriptでリアルタイム変換が可能なのでひと手間かけて処理を追加しておくと間違いが減ってよりよいフォームになるでしょう。 今回はjQue […]

The post inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用） first appeared on WATASHI.xyz.]]> https://watashi.xyz/input-type-number-trap/ Tue, 07 Nov 2023 14:39:17 +0000 https://watashi.xyz/?p=890 はじめに ユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？ 数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。 input […]

The post ちょっと待って！！知っていますか？input type=numberの落とし穴 first appeared on WATASHI.xyz.]]>