【テクニカル・上級編】 ::spelling-error 擬似要素によるスペルミス表示 – CSS実践ガイド

ブラウザのネイティブスペルチェッカーを手なづける：`::spelling-error` 擬似要素のアーキテクチャと深層最適化

フロントエンドのパフォーマンスチューニングにおいて、私たちは常にDOMノードの数、レイアウトシフト（CLS）、再描画（Repaint/Reflow）、そしてJavaScriptのメインスレッド占有率に神経を尖らせてきた。しかし、ブラウザが暗黙的に、そして非同期に実行している「テキストのネイティブ機能」に目を向けたことはあるだろうか？

その代表格がスペルチェックだ。ユーザーが``や``、あるいは`contenteditable`な要素に文字を入力する際、ブラウザの内部エンジン（Blink, WebKit, Gecko）は密かにスペルミスを検出し、あの独特な赤い波線をレンダリングしている。</p> <p>このネイティブの視覚フィードバックを、CSSの力で完全にコントロールするためのインターフェースが <b>`::spelling-error` 擬似要素</b> である。</p> <p>今回は、このマイナーだが極めて強力な擬似要素について、ブラウザの内部挙動、メモリ効率、そして実務の現場で絶対に踏んではいけない地雷の回避策まで、フロントエンドのアーキテクトの視点から徹底的に解剖していこう。</p> <p>—</p> <h3><span id="toc1">1. `::spelling-error` の正体とブラウザ内部のレンダリングパイプライン</span></h3> <p>まず大前提として、この擬似要素は通常のCSSセレクタとは根本的にライフサイクルが異なる。開発者がJavaScriptで明示的にクラスを付与したり、仮想DOMがレンダリングしたりするものではない。</p> <p>ブラウザのスペルチェッカー（OSのネイティブ辞書やChromium内蔵のHunspellなど）がテキストを解析し、「あ、これスペル間違ってるわ」と判定した瞬間、ブラウザのレイアウトエンジンは内部的にテキストの該当範囲（Range）に対して動的なスタイリングフラグを立てる。</p> <p>[ユーザー入力]<br /> ↓<br /> [ブラウザ内部のスペルチェックエンジン（非同期）]<br /> ↓<br /> [スペルミス部分のRange特定]<br /> ↓<br /> [::spelling-error 適用（コンポジター・ペイント層）]</p> <p>ここで重要なのは、<b>この擬似要素に適用できるプロパティが極めて限定されている</b>という点だ。仕様上、セキュリティやプライバシー、そしてレンダリングの一貫性を保つため、変更が許可されているプロパティは以下の数個に限られる。</p> <ul> <li>`color`（文字色）</li> <li>`background-color`（背景色）</li> <li>`text-decoration` およびその関連プロパティ（下線の色、スタイル、太さなど）</li> <li>`text-shadow`（テキストシャドウ）</li> </ul> <p>レイアウトを根本から揺るがすようなプロパティ（例えば `font-size` や `display`、`margin` など）は一切効かない。なぜなら、もしスペルミスによって文字サイズやボックスサイズが変わってしまえば、入力中のテキストがガタガタと揺れ動き（レイアウトシフト）、ユーザーエクスペリエンスが地獄のようなことになってしまうからだ。ブラウザの設計思想として、これは非常に理にかなっている。</p> <p>—</p> <h3><span id="toc2">2. 実務における堅牢なスタイリングと「CSS変数」の活用</span></h3> <p>デフォルトの赤い波線は、時としてブランドのカラーパレット（例えば、ダークモード主体のサイバーなUIや、厳格なデザインシステムを持つSaaSアプリケーション）において強烈なノイズになる。</p> <p>次世代のデザイントークンと同期させ、かつブラウザごとのデフォルト挙動をリセットするための堅牢なCSS設計の例を見てみよう。</p> <p>/ contenteditableを持つリッチテキストエディタのルート /<br /> .editor-root {<br /> / デザインシステムのトークンをCSS変数で定義 /<br /> –editor-spelling-color: #ff3366;<br /> –editor-spelling-bg: rgba(255, 51, 102, 0.08);<br /> }</p> <p>/<br /> ::spelling-error 擬似要素の定義<br /> ブラウザのデフォルトの「赤波線」を上書きし、<br /> デザインシステムに完全に調和させる<br /> /<br /> .editor-root ::spelling-error {<br /> / 文字色自体を変えるのは可読性を下げるため、基本はアンダーラインや背景色を調整する /<br /> color: inherit;</p> <p> / 微高精度なハイライトとして背景色を薄く敷く（一部ブラウザでサポート） /<br /> background-color: var(–editor-spelling-bg);</p> <p> / ネイティブの波線をカスタムスタイルに置換する /<br /> text-decoration: underline wavy var(–editor-spelling-color);<br /> text-decoration-thickness: 2px;<br /> text-underline-offset: 3px;<br /> }</p> <p>ここでプロフェッショナルとして注意しなければならないのは、<b>「すべてのブラウザが `::spelling-error` を同じように解釈するわけではない」</b>という残酷な現実だ。</p> <p>—</p> <h3><span id="toc3">3. レンダリング負荷とメモリ効率：見落とされがちな「非同期の競合」</span></h3> <p>「擬似要素をスタイリングするだけでしょ？何がパフォーマンスに影響するの？」と思うかもしれない。しかし、ここに大きな罠がある。</p> <h3><span id="toc4">メモリと再描画のコスト</span></h3> <p>スペルチェックは、ユーザーがキーボードを叩くたび（厳密にはタイピングのデバウンス後や、フォーカスが外れた `blur` 時など）に、バックグラウンドのスレッド、あるいはメインスレッドのアイドルタイムに実行される。</p> <p>特に数万文字に及ぶ巨大な `contenteditable` 要素や、コードエディタのようなDOM構造を持つアプリケーションにおいて、ブラウザは「どの文字がどのRangeに属しているか」を常にトラッキングしている。<br /> ここに複雑な `text-shadow` や不必要なペイントコストを伴うスタイルを `::spelling-error` に対して適用すると、タイピング中のインプット遅延（Input Latency）を引き起こす原因になる。</p> <h3><span id="toc5">回避すべきアンチパターン</span></h3> <p>以下のようなスタイルは、GPUのコンポジットレイヤーに悪影響を及ぼし、フレームレートの低下（Jank）を招くため絶対に避けるべきだ。</p> <p>/ ❌ やってはいけない例：重いシャドウやブラーを適用する /<br /> ::spelling-error {<br /> text-shadow: 0 0 8px rgba(255, 0, 0, 0.8); / ペイントコストが跳ね上がる /<br /> background-color: rgba(255, 0, 0, 0.5); / 濃すぎる背景色はDOMの視認性を破壊する /<br /> }</p> <p>スペルミスのハイライトは、あくまで「控えめに、しかし確実にユーザーに気づかせる」のがプロフェッショナルなUIデザインの鉄則だ。</p> <p>—</p> <h3><span id="toc6">4. バグとブラウザ間の不整合への対処法</span></h3> <p>現在、`::spelling-error` は主要なモダンブラウザ（Chromium, Safari, Firefox）でサポートが進んでいるが、その実装度合いや、文法チェック用の `::grammar-error` との兼ね合いにおいて、いまだに微妙な挙動の違いが存在する。</p> <p>例えば、<b>「ユーザーが明示的にスペルチェックを無効化（`spellcheck=”false”`）している要素」</b>に対して、CSS側で無理やりスタイルを当てようとしても、ブラウザのエンジンレベルでフラグが立たないため、当然ながらスタイルは適用されない。</p> <p>また、JavaScriptによるDOMの動的な書き換え（仮想DOMの差分パッチなど）が頻発する環境では、ブラウザのスペルチェックエンジンが「おい、どのテキストをチェックし直せばいいんだよ」と混乱し、一時的にハイライトが消えたり、予期せぬ位置に残像のように残り続けたりするバグ（ゴースト・ハイライト問題）に遭遇することがある。</p> <h3><span id="toc7">堅牢性を高めるための実務的ハック</span></h3> <p>もし、サードパーティ製のWYSIWYGエディタなどでスペルミスの表示が不安定な場合、CSSだけに頼るのではなく、DOMの更新サイクルと同期させるセーフティネットを検討すべきだ。</p> <p>/</p> <ul> <li>巨大なエディタでスペルチェックのバグ（残像現象）が発生した際、</li> <li>強制的にブラウザの再描画とチェックの再評価を促すためのギークなハック</li> </ul> <p> /<br /> function forceRefreshSpellcheck(editableElement) {<br /> if (!editableElement) return;</p> <p> // 一時的にスペルチェックを無効化してDOMを強制リフレッシュ<br /> const currentVal = editableElement.getAttribute(‘spellcheck’);<br /> editableElement.setAttribute(‘spellcheck’, ‘false’);</p> <p> // ブラウザのレンダリングキューを強制的にフラッシュさせるための強制リフロー<br /> void editableElement.offsetHeight;</p> <p> // 元の状態に戻すことで、ブラウザのスペルチェックエンジンに再スキャンを強制する<br /> if (currentVal !== null) {<br /> editableElement.setAttribute(‘spellcheck’, currentVal);<br /> } else {<br /> editableElement.removeAttribute(‘spellcheck’);<br /> }<br /> }</p> <p>このような泥臭いハックが必要になるのも、ブラウザのネイティブ機能とフロントエンドの仮想DOMフレームワークが綱引きをしている現場ならではのリアルだ。</p> <p>—</p> <h3><span id="toc8">5. まとめ：ネイティブの力を信じ、しかしコントロールを手放さない</span></h3> <p>`::spelling-error` は、私たちがゼロからJavaScriptでスペルチェッカーの波線を自前実装するという「車輪の再発明」から解放してくれる、美しく洗練されたCSS機能だ。</p> <p>しかし、それは「ブラウザに丸投げして放置して良い」という意味ではない。</p> <ul> <li><b>デザインシステムとの統合</b>：デフォルトの毒々しい赤色を、プロダクトの文脈に合わせた色とトーンに落とし込む。</li> <li><b>パフォーマンスへの配慮</b>：レイアウトやペイントの負荷を最小限に抑え、タイピングの滑らかさを死守する。</li> <li><b>環境の差異への備え</b>：ブラウザの非同期処理やDOM書き換えの競合を見据えた設計を行う。</li> </ul> <p>これらを深く理解し、実践しているエンジニアこそが、真の意味で「フロントエンドのアーキテクト」を名乗る資格を持つ。</p> <p>さあ、今すぐあなたのプロジェクトのエディタ周りのCSSを開き、野放図になっているネイティブのスペルミス表示に、美しいデザインの統制をもたらしてやろう。</p> </div> <footer class="article-footer entry-footer"> <div class="entry-categories-tags ctdt-one-row"> <div class="entry-categories"><a class="cat-link cat-link-3" href="https://frontend.intronational.com/category/css/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>CSS</a><a class="cat-link cat-link-31" href="https://frontend.intronational.com/category/css/%e5%9f%ba%e6%9c%ac%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf%e3%81%a8%e7%b5%84%e3%81%bf%e5%90%88%e3%82%8f%e3%81%9b%ef%bc%88%e3%82%bf%e3%82%b0-%e3%82%af%e3%83%a9%e3%82%b9-id-%e5%ad%90%e5%ad%ab%e3%83%bb/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）</a></div> </div> <div class="ad-area no-icon ad-content-bottom ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock"> <div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div> <div class="ad-wrap"> <div class="ad-responsive ad-usual"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7214025567716564" data-ad-slot="6558619545" data-ad-format="rectangle" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="sns-share ss-col-3 bc-brand-color sbc-hide ss-bottom"> <div class="sns-share-message">シェアする</div> <div class="sns-share-buttons sns-buttons"> <a href="https://x.com/intent/tweet?text=%E3%80%90%E3%83%86%E3%82%AF%E3%83%8B%E3%82%AB%E3%83%AB%E3%83%BB%E4%B8%8A%E7%B4%9A%E7%B7%A8%E3%80%91+%3A%3Aspelling-error+%E6%93%AC%E4%BC%BC%E8%A6%81%E7%B4%A0%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B9%E3%83%9A%E3%83%AB%E3%83%9F%E3%82%B9%E8%A1%A8%E7%A4%BA+%E2%80%93+CSS%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89&url=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F09%2F24%2F%25e3%2580%2590%25e3%2583%2586%25e3%2582%25af%25e3%2583%258b%25e3%2582%25ab%25e3%2583%25ab%25e3%2583%25bb%25e4%25b8%258a%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-spelling-error-%25e6%2593%25ac%25e4%25bc%25bc%25e8%25a6%2581%25e7%25b4%25a0%25e3%2581%25ab%25e3%2582%2588%25e3%2582%258b%25e3%2582%25b9%25e3%2583%259a%2F" class="sns-button share-button twitter-button twitter-share-button-sq x-corp-button x-corp-share-button-sq" target="_blank" title="Xでシェア" rel="nofollow noopener noreferrer" aria-label="Xでシェア"><span class="social-icon icon-x-corp"></span><span class="button-caption">X</span><span class="share-count twitter-share-count x-share-count"></span></a> <a href="//www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F09%2F24%2F%25e3%2580%2590%25e3%2583%2586%25e3%2582%25af%25e3%2583%258b%25e3%2582%25ab%25e3%2583%25ab%25e3%2583%25bb%25e4%25b8%258a%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-spelling-error-%25e6%2593%25ac%25e4%25bc%25bc%25e8%25a6%2581%25e7%25b4%25a0%25e3%2581%25ab%25e3%2582%2588%25e3%2582%258b%25e3%2582%25b9%25e3%2583%259a%2F&t=%E3%80%90%E3%83%86%E3%82%AF%E3%83%8B%E3%82%AB%E3%83%AB%E3%83%BB%E4%B8%8A%E7%B4%9A%E7%B7%A8%E3%80%91+%3A%3Aspelling-error+%E6%93%AC%E4%BC%BC%E8%A6%81%E7%B4%A0%E3%81%AB%E3%82%88%E3%82%8B%E3%82%B9%E3%83%9A%E3%83%AB%E3%83%9F%E3%82%B9%E8%A1%A8%E7%A4%BA+%E2%80%93+CSS%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89" class="sns-button share-button facebook-button facebook-share-button-sq" target="_blank" title="Facebookでシェア" rel="nofollow noopener noreferrer" aria-label="Facebookでシェア"><span class="social-icon icon-facebook"></span><span class="button-caption">Facebook</span><span class="share-count facebook-share-count"></span></a> <a href="//b.hatena.ne.jp/entry/s/frontend.intronational.com/2026/09/24/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-spelling-error-%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%83%9a/" class="sns-button share-button hatebu-button hatena-bookmark-button hatebu-share-button-sq" data-hatena-bookmark-layout="simple" target="_blank" title="はてブでブックマーク" rel="nofollow noopener noreferrer" aria-label="はてブでブックマーク"><span class="social-icon icon-hatena"></span><span class="button-caption">はてブ</span><span class="share-count hatebu-share-count"></span></a> <a href="//timeline.line.me/social-plugin/share?url=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F09%2F24%2F%25e3%2580%2590%25e3%2583%2586%25e3%2582%25af%25e3%2583%258b%25e3%2582%25ab%25e3%2583%25ab%25e3%2583%25bb%25e4%25b8%258a%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-spelling-error-%25e6%2593%25ac%25e4%25bc%25bc%25e8%25a6%2581%25e7%25b4%25a0%25e3%2581%25ab%25e3%2582%2588%25e3%2582%258b%25e3%2582%25b9%25e3%2583%259a%2F" class="sns-button share-button line-button line-share-button-sq" target="_blank" title="LINEでシェア" rel="nofollow noopener noreferrer" aria-label="LINEでシェア"><span class="social-icon icon-line"></span><span class="button-caption">LINE</span><span class="share-count line-share-count"></span></a> <a href="//www.pinterest.com/pin/create/button/?url=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F09%2F24%2F%25e3%2580%2590%25e3%2583%2586%25e3%2582%25af%25e3%2583%258b%25e3%2582%25ab%25e3%2583%25ab%25e3%2583%25bb%25e4%25b8%258a%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-spelling-error-%25e6%2593%25ac%25e4%25bc%25bc%25e8%25a6%2581%25e7%25b4%25a0%25e3%2581%25ab%25e3%2582%2588%25e3%2582%258b%25e3%2582%25b9%25e3%2583%259a%2F" class="sns-button share-button pinterest-button pinterest-share-button-sq" target="_blank" title="Pinterestでシェア" rel="nofollow noopener noreferrer" data-pin-do="buttonBookmark" data-pin-custom="true" aria-label="Pinterestでシェア"><span class="social-icon icon-pinterest"></span><span class="button-caption">Pinterest</span><span class="share-count pinterest-share-count"></span></a> <a role="button" tabindex="0" class="sns-button share-button copy-button copy-share-button-sq" data-clipboard-text="【テクニカル・上級編】 ::spelling-error 擬似要素によるスペルミス表示 – CSS実践ガイド https://frontend.intronational.com/2026/09/24/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-spelling-error-%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%83%9a/" title="タイトルとURLをコピーする" aria-label="タイトルとURLをコピーする"><span class="social-icon icon-copy"></span><span class="button-caption">コピー</span><span class="share-count copy-share-count"></span></a> </div> </div>  <div class="sns-follow bc-brand-color fbc-hide sf-bottom"> <div class="sns-follow-message">frontendintronationalをフォローする</div> <div class="sns-follow-buttons sns-buttons"> <a href="//feedly.com/i/discover/sources/search/feed/https%3A%2F%2Ffrontend.intronational.com" class="sns-button follow-button feedly-button feedly-follow-button-sq" target="_blank" title="feedlyで更新情報を購読" rel="nofollow noopener noreferrer" aria-label="feedlyで更新情報を購読"><span class="icon-feedly-logo"></span><span class="follow-count feedly-follow-count"></span></a> <a href="https://frontend.intronational.com/feed/" class="sns-button follow-button rss-button rss-follow-button-sq" target="_blank" title="RSSで更新情報を購読" rel="nofollow noopener noreferrer" aria-label="RSSで更新情報を購読"><span class="icon-rss-logo"></span></a> </div> </div> <div class="footer-meta"> <div class="author-info"> <span class="fa fa-pencil" aria-hidden="true"></span> <a href="https://frontend.intronational.com/author/frontendintronational/" class="author-link"> <span class="post-author vcard author" itemprop="editor author creator copyrightHolder" itemscope itemtype="https://schema.org/Person"> <meta itemprop="url" content="https://frontend.intronational.com/author/frontendintronational/"> <span class="author-name fn" itemprop="name">frontendintronational</span> </span> </a> </div> </div> </footer> </article> <div class="under-entry-content"> <aside id="related-entries" class="related-entries rect-entry-card"> <h2 class="related-entry-heading"> <span class="related-entry-main-heading main-caption"> 関連記事 </span> </h2> <div class="related-list"> <a href="https://frontend.intronational.com/2026/09/16/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91-required-%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-css%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】 :required 疑似クラス – CSS実践ガイド"> <article class="post-5801 related-entry-card e-card cf post type-post status-publish format-standard hentry category-css-post category-hover-focus-active-disabled-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-3">CSS</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【入門編】 :required 疑似クラス – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは！フロントエンド・チーフアーキテクトの私です。日々、数々のCSSコードと格闘していますが、今回はWeb制作の入り口で誰もが一度はつまずく（そして「おっ、これ便利だな！」と感動する）CSSの魔法、`:required` 疑似クラスに... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/17/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-%e5%b1%9e%e6%80%a7%e5%80%a4%e3%83%8f%e3%82%a4%e3%83%95%e3%83%b3%e3%83%aa%e3%82%b9%e3%83%88%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】属性値ハイフンリストセレクタ [attr|=val] – CSS実践ガイド"> <article class="post-6420 related-entry-card e-card cf post type-post status-publish format-standard hentry category-css-post category---id--post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-3">CSS</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【実務・中級編】属性値ハイフンリストセレクタ [attr|=val] – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> CSSの隠れた名脇役：属性値ハイフンリストセレクタ `` を使いこなすフロントエンドの現場で、特定のクラス名や属性値を条件にスタイルを当てる際、何を思い浮かべますか？おそらく、多くの人は `` のような前方一致セレクタを真っ先に選ぶはずです... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/18/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-only-child%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9%e3%81%ae%e6%9d%a1%e4%bb%b6-css%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】 only-child疑似クラスの条件 – CSS実践ガイド"> <article class="post-7051 related-entry-card e-card cf post type-post status-publish format-standard hentry category-css-post category-hover-focus-active-disabled-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-3">CSS</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【実務・中級編】 only-child疑似クラスの条件 – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> お疲れ。いいところに目を付けたな。CSSを書き始めて数年経ち、BEMだろうがTailwindだろうが一通りレイアウトが組めるようになった中級エンジニアが、次に直面する壁——それは「DOMの構造変化に強い、しなやかなコンポーネント設計」だ。A... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/18/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-enabled-%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-css%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】 :enabled 疑似クラス – CSS実践ガイド"> <article class="post-6865 related-entry-card e-card cf post type-post status-publish format-standard hentry category-css-post category-hover-focus-active-disabled-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-3">CSS</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【実務・中級編】 :enabled 疑似クラス – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> やあ、お疲れ。今日のコードレビューで、また「とりあえずクラス名で制御するスタイル」の山を見つけてしまってね、少しコーヒーを飲みながら君とCSSの原点について話したくなったところだ。君も中級の壁を越えて、日々のコンポーネント設計やアクセシビリ... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/26/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-%e5%b1%9e%e6%80%a7%e5%80%a4%e3%81%ae%e5%ae%8c%e5%85%a8%e4%b8%80%e8%87%b4-attrvalue-css%e5%ae%9f/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】属性値の完全一致 [attr=value] – CSS実践ガイド"> <article class="post-7886 related-entry-card e-card cf post type-post status-publish format-standard hentry category-css-post category-hover-focus-active-disabled-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-3">CSS</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【テクニカル・上級編】属性値の完全一致 [attr=value] – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> CSSの仕様書を枕に眠るようなフロントエンド・ギークの皆さん、こんにちは。今回は、数あるセレクタの中でも非常にプリミティブでありながら、モダンWebアプリケーションのアーキテクチャにおいて「諸刃の剣」となり得る属性値の完全一致セレクタ ``... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/17/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-empty-%e6%93%ac%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-css%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】 :empty 擬似クラス – CSS実践ガイド"> <article class="post-6384 related-entry-card e-card cf post type-post status-publish format-standard hentry category-css-post category---id--post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-3">CSS</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【実務・中級編】 :empty 擬似クラス – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> `:empty`擬似クラスの「嘘」と「真実」：現場でハマらないための実践的知見現場でコードをレビューしていると、たまに見かけるのが「この要素、空っぽなのにCSSが効いていない（あるいは効きすぎている）」という相談だ。特に`:empty`擬似... </div> </div> </article> </a> </div> </aside> <div class="ad-area no-icon ad-below-related-posts ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock"> <div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div> <div class="ad-wrap"> <div class="ad-responsive ad-usual"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7214025567716564" data-ad-slot="6558619545" data-ad-format="rectangle" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div id="pager-post-navi" class="pager-post-navi post-navi-default cf"> <a href="https://frontend.intronational.com/2026/09/24/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91list-style-image%e3%81%a8list-style-position%e3%81%ae%e6%8c%99%e5%8b%95-html%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" title="【実務・中級編】list-style-imageとlist-style-positionの挙動 – HTML実践ガイド" class="prev-post a-wrap border-element cf"> <div class="fa fa-chevron-left iconfont" aria-hidden="true"></div> <figure class="prev-post-thumb card-thumb"><img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image post-navi-no-image" width="120" height="68" /></figure> <div class="prev-post-title">【実務・中級編】list-style-imageとlist-style-positionの挙動 – HTML実践ガイド</div></a><a href="https://frontend.intronational.com/2026/09/24/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-array-isarray%e3%81%ab%e3%82%88%e3%82%8b%e9%85%8d%e5%88%97%e5%88%a4%e5%ae%9a-javascript%e5%ae%9f-3/" title="【テクニカル・上級編】 Array.isArrayによる配列判定 – JavaScript実践ガイド" class="next-post a-wrap cf"> <div class="fa fa-chevron-right iconfont" aria-hidden="true"></div> <figure class="next-post-thumb card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image post-navi-no-image" width="120" height="68" /></figure> <div class="next-post-title">【テクニカル・上級編】 Array.isArrayによる配列判定 – JavaScript実践ガイド</div></a> </div>  <div id="comment-area" class="comment-area"> <section class="comment-list"> <h2 id="comments" class="comment-title"> コメント </h2> </section> <aside class="comment-form-wrap"> <button type="button" id="comment-reply-btn" class="comment-btn key-btn">コメントを書き込む</button> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">コメントをどうぞ <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2026/09/24/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-spelling-error-%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b9%e3%83%9a/#respond" style="display:none;">コメントをキャンセル</a></small></h3><form action="https://frontend.intronational.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">メールアドレスが公開されることはありません。</span> <span class="required">※</span> が付いている欄は必須項目です</p><p class="comment-form-comment"><label for="comment">コメント <span class="required">※</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">

名前 ※

メール ※

サイト