Generated by All in One SEO v4.9.10, this is an llms.txt file, used by LLMs to index the site.

# webfrontend.ninja

Webエンジニア向け HTML, CSS, JavaScript 情報を発信

## Sitemaps

- [XML Sitemap](https://webfrontend.ninja/sitemap.xml): Contains all public & indexable URLs for this website.

## 投稿

- [【JavaScript】日本語の文章から単語を分割する Intl.Segmenter](https://webfrontend.ninja/js-intl-segmenter-word-japanese/) - 前回の記事で日本語の文字を正しく分割する方法に Intl.Segmenter を使いましたが、Intl.Seg
- [【JavaScript】文字数のカウントになぜ String.length を使ってはいけないのか](https://webfrontend.ninja/js-string-length-intl-segmenter/) - JavaScript で文字列の文字数をカウントするには String.length を使うことが多いのではな
- [【JavaScript】スペースの URL エンコードの結果は %20 と + のどちらが正解なのか](https://webfrontend.ninja/js-url-encoding-space/) - クエリパラメータのエンコードとデコードには encodeURIComponent() 関数と decodeUR
- [【HTML】inert 属性でコンテンツをまとめて不活性にする](https://webfrontend.ninja/html-inert-attribute/) - [2024-05-19 更新] 特定のコンテンツに注目させたいときや、何かしらの処理を実行中の場合など、それ以
- [【JavaScript】ブラウザーで OpenAI API のチャット (Chat Completions) のストリームを扱う方法](https://webfrontend.ninja/js-openai-chat-completions-stream/) - 過去 2 回の記事では OpenAI API の音声認識 (Speech to Text) と音声合成 (Te
- [【JavaScript】ブラウザーで OpenAI API の音声認識 (Speech to Text) でマイク音声を録音してアップロードする方法](https://webfrontend.ninja/js-openai-stt-microphone/) - 前回は「ブラウザーで OpenAI の音声合成 (Text to speech) のダウンロード再生とストリー
- [【JavaScript】ブラウザーで OpenAI の音声合成 (Text to speech) のダウンロード再生とストリーム再生する方法](https://webfrontend.ninja/js-openai-tts-stream/) - いま話題の OpenAI API ですが、数多くラインナップされた API の中に音声合成 (Text to
- [【HTML】折り畳みウィジェットやアコーディオンを作る details 要素と summary 要素のマークアップからスタイリング](https://webfrontend.ninja/html-details-summary-element/) - [2023-12-12 更新] Bootstrap などの CSS フレームワークではおなじみの Collap
- [【JavaScript】Web Speech API - SpeechSynthesis (音声合成、Text-to-Speech) の使い方](https://webfrontend.ninja/js-web-speech-api-speechsynthesis/) - AI の進化により音声合成の性能も向上し、さまざまなシーンで使われるようになってきました。多くは有料ですが、音
- [【JavaScript】入力フォームで IME 確定時の Enter 誤判定を何とかする](https://webfrontend.ninja/js-input-ime-enter/) - 近年のウェブアプリケーションでは、テキストボックスに文字を入力して Enter キーを押すことでアクションを起
- [【JavaScript】データを GZIP/ZLIB/DEFLATE で圧縮そして展開する](https://webfrontend.ninja/js-gzip-zlib-deflate-compress/) - ウェブブラウザの JavaScript でデータの圧縮と展開を行う場合、JavaScript ライブラリの「p
- [【JavaScript】Streams API を使って fetch の逐次ダウンロード & ファイル保存](https://webfrontend.ninja/js-streams-api-fetch-download-and-save/) - [2023-12-02 更新] JavaScript を使って巨大なファイルをダウンロードして、それをストレー
- [【JavaScript】文字エンコーディングの橋渡しを行う Encoding API](https://webfrontend.ninja/js-encoding-api/) - [2023-12-02 更新] 近年ウェブの世界で文字エンコーディングといえば UTF-8 一択となりました。
- [【JavaScript】User-Agent Client Hints API で端末情報を取得する](https://webfrontend.ninja/user-agent-client-hints-api/) - [2023-12-02 更新] ブラウザーがサーバーにリクエストのたびに送信している User-Agent 文
- [【JavaScript】画面遷移時にビーコンをサーバーに送信する Beacon API](https://webfrontend.ninja/beacon-api/) - [2023-12-02 更新] ウェブページやウェブアプリケーションからサーバーに対して何かしらのイベント情報
- [【JavaScript】GZIP/ZLIB/DEFLATE データをダウンロードして Compression Streams API で解凍する](https://webfrontend.ninja/js-compression-streams-api-gzip/) - [2023-12-02 更新] データの圧縮や解凍といえば ZIP や 7Z などのファイルフォーマットを思い
- [【HTML】自動的に目次が作れるアウトライン](https://webfrontend.ninja/html-outline/) - [2023-08-28 更新] HTML 仕様では、HTML マークアップから目次（アウトライン）を作るルール
- [【HTML】footer 要素は最初と最後に2つ配置しても良い？](https://webfrontend.ninja/html-footer-element/) - [2023-08-23 更新] 一般的に footer 要素はページの最後に 1 つだけ配置することが多いので
- [【HTML】section 要素を見つめなおす](https://webfrontend.ninja/html-section-element/) - [2023-08-22 更新] HTML5 で新たに導入された section 要素、みなさんは適切に使いこな
- [【HTML】SEO で重要視される見出し要素 h1 ～ h6](https://webfrontend.ninja/html-h1-h6-element/) - [2023-08-22 更新] 恐らくウェブ業界でない人の間ですら知られているもっとも有名な HTML 要素と
- [【HTML】2023年の今、hgroup は廃止？それとも使えるの？](https://webfrontend.ninja/html-hgroup-element/) - [2023-08-22 更新] ウェブ業界にいる人であれば知っている人は多いでしょうが、かつて HTML(5)
- [【JavaScript】印刷のイベント - beforeprint / afterprint](https://webfrontend.ninja/js-print-events/) - 誰しもウェブページを印刷することはあるのではないでしょうか。ウェブサイト制作において印刷を意識するとしたら、メ
- [【JavaScript】送信ボタンでフォームを送信したことにする requestSubmit()](https://webfrontend.ninja/js-requestsubmit/) - JavaScript からフォームを送信する方法として form 要素の DOM オブジェクトの submit
- [【JavaScript】フォームのカレンダーやファイルピッカーを JavaScript から呼び出す showPicker()](https://webfrontend.ninja/js-showpicker/) - フォームの date 型の input 要素をクリックするとカレンダーが表示されます。file 型の inpu
- [【JavaScript】初心者向けオブジェクトのコピー詳説：シャローコピー、ディープコピー、JSON、スプレッド構文、そして structuredClone()](https://webfrontend.ninja/js-object-copy-details/) - みなさんはどのように JavaScript でオブジェクトをコピーしていますでしょうか。オブジェクトのコピーと
- [新画像フォーマット AVIF はもう使えるのか？](https://webfrontend.ninja/html-image-avif/) - [2022-09-26 更新] 2021 年 10 月にリリースされた Firefox 93 に気になる機能追
- [【JavaScript】express ライクな URL ルーティング URLPattern](https://webfrontend.ninja/js-urlpattern/) - [2022-10-26 更新] URL ルーティングといえば主にサーバーサイドの話ですが、node の exp
- [【JavaScript】Web storage 詳説 - ストレージなのに 7 日で消える?](https://webfrontend.ninja/js-web-storage/) - HTML5 という用語が流行りだしたころからブラウザーで利用可能な Web storage ですが、フロントエ
- [【HTML】徹底解説 dialog 要素 - マークアップからスタイリング、JavaScript による操作まで](https://webfrontend.ninja/html-dialog-element/) - [2022-07-28 更新] dialog 要素はかなり以前より HTML5 仕様に存在していましたが、Sa
- [【JavaScript】ブラウザーでリソースをロックする Web Locks API](https://webfrontend.ninja/js-web-locks-api/) - バックエンドではファイルなどのリソースのロック処理は当たり前のように行われていますが、これまでフロントエンドの
- [【JavaScript】すべてのウィンドウにメッセージを同報する BroadcastChannel](https://webfrontend.ninja/js-broadcast-channel/) - 前回の記事で「クロスオリジンのウィンドウ間でメッセージを送受信する Cross-document messag
- [【JavaScript】クロスオリジンのウィンドウ間でメッセージを送受信する Cross-document messaging](https://webfrontend.ninja/js-cross-document-messaging/) - ウェブサイトやウェブアプリを開発していると、新たにブラウザーウィンドウやタブを開いて、元のタブと連携したいと考
- [【HTML】ping 属性でリンクがどれだけ踏まれたかを計測する](https://webfrontend.ninja/html-ping-attribute/) - ページにはさまざまなリンクが張られていますが、そのリンクがどれだけ踏まれたかを計測するには、リダイレクトが良く
- [【JavaScript】File System Access API – ドラッグ&ドロップ 編](https://webfrontend.ninja/js-file-system-access-api-drop-and-drop/) - File System Access API は、ファイル選択ダイアログやディレクトリ選択ダイアログだけでなく
- [【JavaScript】File System Access API – ディレクトリを開く方法 showDirectoryPicker() 編](https://webfrontend.ninja/js-show-directory-picker/) - File System Access API にはファイルを開く showOpenFilePicker() メ
- [【JavaScript】File System Access API – ファイルピッカーを表示してファイルを保存する方法 showSaveFilePicker() 編](https://webfrontend.ninja/js-show-save-file-picker/) - ファイル保存ダイアログを表示し、ユーザーに PC やスマートフォン内にファイルを保存するには 2 つの方法あが
- [【JavaScript】File System Access API – ファイルピッカーを表示して選択ファイルを読み取る方法 showOpenFilePicker() 編](https://webfrontend.ninja/js-show-open-file-picker/) - ファイルピッカーを表示し、ユーザーに PC やスマートフォン内のファイルを選択させ、選択されたファイルの中身を
- [【JavaScript】File System Access API - 仮想的なファイルシステム Origin Private File System 編](https://webfrontend.ninja/js-file-system-access-origin-private-file-system/) - JavaScript で扱えるストレージといえば Web Storage や Indexed Database
- [【JavaScript】DOM の変化を監視する MutationObserver](https://webfrontend.ninja/js-mutationobserver/) - ウェブサイトやウェブアプリを開発する際に、自身が書いた JavaScript で HTML ドキュメントの D
- [【JavaScript】HTML 要素のリサイズを検知する Resize Observer](https://webfrontend.ninja/js-resize-observer/) - ウェブブラウザーのウィンドウをリサイズするなどして、コンテンツのサイズが変わることがあります。そのリサイズに合
- [【JavaScript】HTML 要素の寸法の取得方法まとめ](https://webfrontend.ninja/js-how-to-get-dimension-of-html-element/) - JavaScript から HTML 要素の横幅と高さを取得する方法はいくつか存在します。しかし、それぞれの方
- [【JavaScript】配列のすべての値をまとめて評価、Array.every() と Array.some()](https://webfrontend.ninja/js-array-every-some/) - 配列の値すべてが条件を満たしているか、配列の値のいずれか 1 つでも条件を満たしているか、といった処理はときど
- [【JavaScript】とても便利なてんてんてん「...」スプレッド構文](https://webfrontend.ninja/js-spread-syntax/) - 最近は JavaScript コードのサンプルで「...」が配列の中で使われているのをよく見ます。中には関数の
- [【JavaScript】オブジェクトのプロパティの存在をチェックする 4 つの方法と特性の違い](https://webfrontend.ninja/js-check-property-in-object/) -  オブジェクトの中に特定のプロパティが存在するかをチェックする方法はいくつかあります。しかし、どの方法を使うか
- [【CSS】独自プロパティを作る CSS Properties and Values API (Houdini)](https://webfrontend.ninja/css-properties-and-values-api/) - CSS といえばブラウザーが用意したプロパティを使って書くものですが、W3C で策定している「CSS Prop
- [【CSS】CSS 変数 (CSS カスタムプロパティ) でサイト制作と運用が楽になる](https://webfrontend.ninja/css-custom-properties/) - CSS を書いていると、同じ値を何度も書いていることに気づきます。とりわけ色の値では顕著ではないでしょうか。プ
- [【CSS】CSS 界隈で大きな話題になっている Houdini って何？](https://webfrontend.ninja/css-houdini/) - ウェブのフロントエンドを仕事にしている方で業界のトレンドに敏感な方であれば Houdini を耳にしたことがあ
- [【HTML】b 要素、知名度は高いですが本当に正しく使っていますか？](https://webfrontend.ninja/html-b-element/) - b 要素は HTML 要素の中で知名度が高い要素の一つですが、正しく使ってますか？HTML4 以前の時代のよう
- [【HTML】下線じゃない、u 要素の本当の意味は？](https://webfrontend.ninja/html-u-element/) - u 要素の u は下線を意味する underline 由来の名前のため、どうしても下線を引くという意味で認知し
- [【HTML】mark 要素がハイライトは間違い？](https://webfrontend.ninja/html-mark-element/) - HTML5 から新たに導入された mark 要素ですが、ネットでは「ハイライト」「目立たせる」「マーカー」と説
- [【JavaScript】マウス、タッチ、ペンを包括的に扱う PointerEvent](https://webfrontend.ninja/js-pointer-events/) - 近年の入力デバイスにはマウスやタッチのほかペンも存在します。JavaScript で入力を扱うために、マウスで
- [【HTML】inputmode 属性と enterkeyhint 属性で適切な入力モードとアクションラベルに変更してイラっとさせない仮想キーボードを](https://webfrontend.ninja/html-inputmode-enterkeyhint-attributes/) - スマートフォンでテキストボックスに数字を入力しなければいけないのに、仮想キーボードに数字が無くてイラっとしたこ
- [【JavaScript】Web Share API でリンクやファイルを共有](https://webfrontend.ninja/js-web-share-api/) - スマートフォンのネイティブアプリでは当たり前に用意されているリンクやファイルの共有機能ですが、Web Shar
- [【HTML】data 要素や data-* 属性を使ってスクリプト用のデータを埋め込む](https://webfrontend.ninja/html-data-element-custom-data-attribute/) - よく HTML の中にデータを埋め込んでおきたいことはあります。しかし、そのデータをどのように HTML に埋
- [【HTML】time 要素で表現できる日付と時刻](https://webfrontend.ninja/html-time-element/) - time 要素で日時を表現できますが、そのルールは少し複雑です。今回は time 要素の日付フォーマットの詳細
- [【JavaScript】const では無理、freeze() や seal() を使ってオブジェクトを変更不可に](https://webfrontend.ninja/js-freeze-seal/) - 近年の JavaScript (ECMAScript) では const を使って定数を定義できます。しかし、
- [【JavaScript】現在日時をエレガントに出力する方法](https://webfrontend.ninja/js-date-time/) - JavaScript でウェブアプリ開発をしていて避けられないのが日時の扱いでしょう。とりわけ日時を画面に表示
- [【JavaScript】数値のゼロ埋めや文字列の桁数合わせを一発で実現する padStart() と padEnd() メソッド](https://webfrontend.ninja/js-pad-start-end/) - 月や日のように 1 桁の場合は先頭を 0 で埋めて "01" に変換したり、文字列の前か後ろにスペースを入れて
- [【JavaScript】生成データをファイルとして保存（ダウンロード）させる方法](https://webfrontend.ninja/js-download-blob/) - JavaScript で何かしらのデータを生成した後、それをユーザーの PC やスマートフォンにファイルとして
- [【HTML】i 要素はイタリックではなくアイコン？](https://webfrontend.ninja/html-i-element/) - 以前は i 要素は斜体を表現するために使われてきましたが、HTML5 以降、スタイリング目的に HTML 要素
- [【JavaScript】クリップボードに文字列や画像データをコピーする方法](https://webfrontend.ninja/js-clipboard-write/) - さまざまなウェブサイトでクリップボードにテキストをコピーする機能が使われています。しかし、クリップボードにはプ
- [【JavaScript】クリップボードの内容を読み取る方法](https://webfrontend.ninja/js-clipboard-read/) - クリップボードにコピーする方法はネットに数多く見つかりますが、クリップボードの内容を読み取る方法は意外に少ない
- [Chromium と WebKit でシェア 9 割以上に、ブラウザーシェアの激動の 10 年史をダラダラと語る](https://webfrontend.ninja/browser-10-years-history-chromium-webkit/) - ウェブ開発者であれば、だれもが気にせざるを得ないのがブラウザーのシェアです。いまや Chrome と Safa
- [【CSS】チェックボックスとラジオボタンの色を変える方法 - accent-color プロパティ](https://webfrontend.ninja/css-accent-color/) - フォーム要素を CSS でデコレーションするのは非常に難しいことは誰もが経験済みでしょう。せめてチェックボック
- [【JavaScript】at() で配列の最後の要素の読み取る](https://webfrontend.ninja/js-array-at-method/) - 配列の最後の要素はどうやって読み取りますか？今回は、そんな些細な話を取り上げます。 pop() メソッド 配列
- [【JavaScript】sleep/wait する方法](https://webfrontend.ninja/js-node-sleep/) - 記事タイトルの通り、JavaScript という非同期な世界で sleep する方法を考えてみます。もちろん、
- [【HTML】ここは自動翻訳しないで translate 属性](https://webfrontend.ninja/html-translate-attribute/) - 海外のウェブサイトを読みたいとき、Google 翻訳を活用した人は多いのではないでしょうか。筆者は、英語なら何
- [【JavaScript】console.log() だけじゃない、便利機能満載の Console オブジェクト](https://webfrontend.ninja/js-console-object/) - JavaScript のデバッグに大活躍の Console オブジェクトですが、普段は console.log
- [【HTML】使い道が分かりづらい cite 要素](https://webfrontend.ninja/html-cite-element/) - HTML の要素には cite と quote がありますよね。日本語にするとどちらも「引用」なので混乱します
- [【JavaScript】画像の本来のサイズを取得する naturalWidth と naturalHeight プロパティ](https://webfrontend.ninja/js-naturalwidth-naturalheight/) - img 要素の画像がどれくらいのサイズでレンダリングされているのかを JavaScript から取得することは
- [【HTML】article と section はどう使い分ければ良い？](https://webfrontend.ninja/html-article-element/) - HTML を学び始めた初心者から、HTML4 時代から知識をアップデートしようとした古参まで、最新の HTML
- [【JavaScript】画面の色を抜き出す Eye Dropper API](https://webfrontend.ninja/js-eye-dropper-api/) - 先日 Chrome 95 がリリースされました。いつもながら、様々な機能が追加されたわけですが、その中に Ey
- [【HTML】aside 要素の使いどころ](https://webfrontend.ninja/html-aside-element/) - 分かったようで分からない、そんなもやもやする HTML 要素の一つに aside 要素があるのではないでしょう
- [【HTML】nav 要素は無くても構わないコンテンツ？](https://webfrontend.ninja/html-nav-element/) - セクションを表す要素には article 要素、section 要素、aside 要素、nav 要素の 4 つ
- [【HTML】hr 要素は罫線じゃない？](https://webfrontend.ninja/html-hr-element/) - hr 要素を罫線と思っているあなた！知識をアップデートしないといけません。でも、hr 要素って便利ですよね。簡
- [【CSS】aspect-ratio プロパティで縦横比を固定する](https://webfrontend.ninja/css-aspect-ratio/) - ＨTML 要素の縦横比を CSS だけで固定したいときってありませんか？レスポンシブウェブデザインが主流になっ
- [【CSS】list-style-type プロパティで Safari 15 に加わった新たなリストマーカー、漢数字も](https://webfrontend.ninja/css-list-style-type/) - Safari 15 に、list-style-type プロパティに指定可能なリストマーカーが新たにいくつか追
- [【HTML】古くて新しい menu 要素をもう一度見つめなおす](https://webfrontend.ninja/html-menu-element/) - HTML の menu 要素って使ったことありますか？恐らくほとんどの人は使ったことないのではないでしょうか。
- [【JavaScript】配列のソートを極める - sort() から localeCompare() まで](https://webfrontend.ninja/js-sort-localecompare/) - 配列のソートが必要になることは多いのですが、コードの書き方を意外に忘れてしまいます。また、実は非常に不効率なソ
- [【HTML】address 要素の正しい使いかた](https://webfrontend.ninja/html-address-element/) - address 要素は住所に使う、という誤解はかなり昔からありました。実は、address 要素が誕生したとき
- [【HTML】main 要素 - 最新の仕様に準拠してますか？](https://webfrontend.ninja/html-main-element/) - main 要素はページの主要なコンテンツを表しますが、ネットで調べると、細かい点では記事によって言っていること
- [【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法](https://webfrontend.ninja/js-audio-autoplay-policy-and-delay/) - オーディオの自動再生に大きな制約があるといえば、以前は iOS Safari に限った話でした。しかし、現在は
- [【JavaScript】click と touchend の両方のイベントリスナーのうち touchend だけを実行する](https://webfrontend.ninja/js-click-and-touchend-events/) - デスクトップ向けのブラウザーとスマートフォン向けのブラウザーどちらにも対応する場合、クリックとタップの両方のイ
- [【JavaScript】一発で数値に桁区切りのカンマを入れる方法 - toLocaleString() と Intl.NumberFormat](https://webfrontend.ninja/js-tolocalestring-numberformat/) - 数値に桁区切りのカンマを入れるシーンは多いのではないでしょうか。以前は文字列操作でカンマを入れるコードを書いて
- [【JavaScript】ランダムな文字列を生成する](https://webfrontend.ninja/js-random-string/) - これまで何度書いたか思えていないほど頻繁に必要であったにもかかわらず、毎度、ゼロから考えてコードを書いていた処
- [【JavaScript】配列から要素を検索する 6 つの方法](https://webfrontend.ninja/js-find/) - JavaScript で配列から特定の条件を満たす要素が存在するかをチェックしたり、該当の要素を抜き出すといっ
- [【CSS】相対的長さの単位：em や rem たち](https://webfrontend.ninja/css-em-rem/) - CSS で、フォントやマージンなど、さまざまな大きさや長さを指定しますが、CSS では様々な単位が定義されてい
- [【HTML】th 要素の scope 属性の使い方](https://webfrontend.ninja/html-th-scope-attribute/) - HTML で表を作るとき、th 要素の scope 属性を使ったことはあるでしょうか？筆者は長年ウェブ業界にい
- [【HTML】meta 要素の theme-color を使ってテーマカラーでブランディング](https://webfrontend.ninja/html-meta-theme-color/) - スマートフォンのブラウザーのアドレスバーなどの領域に色がついているウェブサイトを見たことはないでしょうか。とり
- [【HTML】知っておきたいリンクタイプ nofollow - SEO にとって本当に重要？](https://webfrontend.ninja/html-link-type-nofollow/) - 数あるリンクタイプの中でも、とりわけ nofollow は SEO と絡めて語られることが多いのではないでしょ
- [はじめまして](https://webfrontend.ninja/greeting/) - このブログ管理人でウェブエンジニアのninjaです。 これまで何度も同じようなコードを書き続けてきたにもかかわ

## 固定ページ

- [プロフィール](https://webfrontend.ninja/profile/) - 会社員ネットワークエンジニアから独立しウェブ業界に入ったフリーランス（法人化しているのでフリーランスとは言わな
- [お問い合わせ](https://webfrontend.ninja/contact/) - 氏名 メールアドレス 題名 メッセージ本文
- [プライバシーポリシー](https://webfrontend.ninja/privacy-policy/) - 個人情報の利用目的 当ブログでは、お問い合わせや記事へのコメントの際、名前やメールアドレス等の個人情報を入力い

## カテゴリー

- [お知らせ](https://webfrontend.ninja/category/info/)
- [JavaScript](https://webfrontend.ninja/category/javascript/)
- [CSS](https://webfrontend.ninja/category/css/)
- [HTML](https://webfrontend.ninja/category/html/)
- [コラム](https://webfrontend.ninja/category/columns/)