【実務・中級編】 :read-only 疑似クラス – CSS実践ガイド

こんにちは。君、最近のCSS、ちゃんと追いついてるかい？
「UIコンポーネントの実装なんて、とりあえずクラス付与してJSで制御すればいいや」なんて考えているとしたら、それは少しもったいない。CSSの標準仕様は、僕らが思っている以上に賢くなっているんだよ。

今回は、実務の現場でフォーム周りを実装するときに、知っているだけでコードの量が半分になり、保守性が劇的に跳ね上がる隠し味―― `:read-only` 疑似クラスについて話をしよう。

「ただの読み取り専用でしょ？ `:disabled` と何が違うの？」と思ったそこの君。
今日のこの記事を読み終わる頃には、君のフォーム設計の引き出しが確実に一つ深くなっているはずだ。さあ、いってみよう。

—

1. `:read-only` 疑似クラスとは何か？（標準仕様とブラウザの裏側）

まずは基本の定義からおさらいしておこう。
`:read-only` は、ユーザーが直接値を変更できない（読み取り専用の）フォーム要素を選択するための疑似クラスだ。対象となるのは主に `` や ``、そして内容編集可能な設定がされている要素だね。</p> <p>ここで、多くのエンジニアが混同しがちなのが `:disabled` との違いだ。</p> <ul> <li><b>`:disabled`</b>: 要素が無効化されている状態。クリックもフォーカスもできず、<b>フォームの送信（FormData）にも値が含まれない。</b></li> <li><b>`:read-only`</b>: 要素は読取専用だが、<b>フォーカスは当たるし、テキストの選択やコピーもできる。もちろん、フォーム送信時にも値はサーバーに飛ぶ。</b></li> </ul> <p>ブラウザの裏側の話を少ししよう。<br /> ブラウザはDOMを構築する際、要素の属性（`readonly` 属性がついているか、あるいはそもそも編集不可な性質を持つ要素か）を評価している。<br /> CSSの `:read-only` は、そのDOMの「編集可能性（Read/Writeな状態）」という内部フラグを直接監視してスタイリングを適用する。</p> <p>つまり、開発者がいちいち `.is-readonly` なんていう無駄なクラスをJavaScriptで付け外ししなくても、ブラウザがネイティブに「お、この入力欄は今触れないな」と判断してスタイルを当ててくれるというわけだ。最高にスマートだと思わないかい？</p> <p>—</p> <h3><span id="toc2">2. 実務で遭遇する「落とし穴」と、それを華麗に回避する知見</span></h3> <p>さて、ここからがシニアとしての腕の見せ所、実務の泥臭い話だ。<br /> 実は、`:read-only` を使う上で、CSSの仕様（Selectors Level 4）に起因する「ちょっとした罠」がある。</p> <p>歴史的な経緯もあり、ブラウザによっては <b>「通常のエディタブルな要素（デフォルトで書き換え可能な `<input type="text">` など）」までもが、`:read-only` の対象として誤認されてしまう実装</b> が過去に存在した（あるいは現在も厳密なセレクタ結合をしないと意図しない挙動をすることがある）。</p> <p>実務で安全に、かつ確実に「読み取り専用の要素」だけにスタイルを当てたい場合は、属性セレクタと組み合わせるのがプロの作法だ。</p> <p>/ 悪い例：これだけだと意図しない要素まで巻き込むリスクがある /<br /> input:read-only {<br /> background: #eee;<br /> }</p> <p>/ 良い例：readonly属性を持つ、または明示的に読み取り専用化された要素に絞る /<br /> input:read-only,<br /> textarea:read-only {<br /> / スタイルをここに記述 /<br /> }</p> <p>さらに、UI/UXの観点からも注意が必要だ。<br /> 「読み取り専用です」という見た目にするために、うっかり `cursor: not-allowed;` を指定したくなる気持ちは分かる。しかし、思い出してほしい。`:read-only` の要素は<b>「テキストを選択してコピーできるべき」</b>なんだ。<br /> クリックしてカーソルが出ない、テキストが選択できないとなると、ユーザーは激しいストレスを感じる。だからこそ、カーソルはデフォルト（あるいは `text`）を維持しつつ、背景色やボーダーで「入力できない（しかし情報は取得できる）」雰囲気を醸し出すのがベストプラクティスだ。</p> <p>—</p> <h3><span id="toc3">3. コピペで使える！洗練されたフォームスタイリングの実装例</span></h3> <p>百聞は一見にしかず。実務のプロダクション環境ですぐに使える、モダンでアクセシブルなフォームのサンプルコードを用意した。<br /> HTMLとCSSをそのままエディタに貼り付けて、挙動を確認してみてほしい。</p> <h3><span id="toc4">HTML</span></h3> <div class="form-group"> <label for="normal-input">通常の入力欄（編集可能）</label><br /> <input type="text" id="normal-input" value="自由に編集できます"> </div> <div class="form-group"> <label for="readonly-input">読み取り専用の入力欄（自動採番IDなど）</label><br /> <br /> <input type="text" id="readonly-input" value="ID-987654321（変更不可）" readonly> </div> <div class="form-group"> <label for="disabled-input">無効化された入力欄</label><br /> <br /> <input type="text" id="disabled-input" value="現在利用できません" disabled> </div> <h3><span id="toc5">CSS</span></h3> <p>/ 全体のベース設定 /<br /> .form-group {<br /> margin-bottom: 1.5rem;<br /> font-family: sans-serif;<br /> }</p> <p>.form-group label {<br /> display: block;<br /> margin-bottom: 0.5rem;<br /> font-weight: bold;<br /> font-size: 0.875rem;<br /> color: #333;<br /> }</p> <p>/ 通常のinputの基本スタイル /<br /> input[type=”text”] {<br /> width: 100%;<br /> max-width: 400px;<br /> padding: 0.75rem;<br /> font-size: 1rem;<br /> border: 1px solid #cbd5e1;<br /> border-radius: 0.375rem;<br /> background-color: #ffffff;<br /> color: #1e293b;<br /> transition: border-color 0.2s, box-shadow 0.2s;<br /> }</p> <p>/ フォーカス時の挙動 /<br /> input[type=”text”]:focus {<br /> outline: none;<br /> border-color: #3b82f6;<br /> box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);<br /> }</p> <p>/<br /> ★ ここが今回のメインテーマ：read-only 疑似クラスの適用<br /> 編集はできないが、テキストの選択やコピーは可能というUXを担保するため、<br /> カーソルは ‘text’（またはデフォルト）にし、視覚的な色味だけで読み取り専用を表現する。<br /> /<br /> input[type=”text”]:read-only {<br /> background-color: #f1f5f9;<br /> border-color: #e2e8f0;<br /> color: #64748b;<br /> cursor: text; / ユーザーが値をコピーできるようにあえてtextカーソルにする /<br /> }</p> <p>/<br /> 参考：:disabled のスタイル（read-onlyとの違いを視覚的にも明確にする）<br /> /<br /> input[type=”text”]:disabled {<br /> background-color: #e2e8f0;<br /> border-color: #cbd5e1;<br /> color: #94a3b8;<br /> cursor: not-allowed; / 操作自体が完全に不可なのでnot-allowed /<br /> }</p> <p>—</p> <h3><span id="toc6">4. チーフアーキテクトからのまとめ</span></h3> <p>どうだい？ `:read-only` 疑似クラスの魅力が伝わったかな。</p> <p>JavaScriptでわざわざ `element.readOnly` を監視してクラスをトグルする必要なんて、もうどこにもないんだ。ブラウザのネイティブな状態管理（HTMLの属性）とCSSを直接リンクさせることこそが、モダンでバグの少ない、そしてパフォーマンスの高いフロントエンドアーキテクチャの基本姿勢だよ。</p> <p>次にフォームを実装するときは、JSでの無駄な状態管理を疑い、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-32" href="https://frontend.intronational.com/category/css/%e5%b1%9e%e6%80%a7%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf%e3%81%a8%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9%ef%bc%88%e7%8a%b6%e6%85%8b%ef%bc%9ahover-focus-active-disabled%e7%ad%89%ef%bc%89/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）</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%E5%AE%9F%E5%8B%99%E3%83%BB%E4%B8%AD%E7%B4%9A%E7%B7%A8%E3%80%91+%3Aread-only+%E7%96%91%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9+%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%2F18%2F%25e3%2580%2590%25e5%25ae%259f%25e5%258b%2599%25e3%2583%25bb%25e4%25b8%25ad%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-read-only-%25e7%2596%2591%25e4%25bc%25bc%25e3%2582%25af%25e3%2583%25a9%25e3%2582%25b9-css%25e5%25ae%259f%25e8%25b7%25b5%25e3%2582%25ac%25e3%2582%25a4%25e3%2583%2589%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%2F18%2F%25e3%2580%2590%25e5%25ae%259f%25e5%258b%2599%25e3%2583%25bb%25e4%25b8%25ad%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-read-only-%25e7%2596%2591%25e4%25bc%25bc%25e3%2582%25af%25e3%2583%25a9%25e3%2582%25b9-css%25e5%25ae%259f%25e8%25b7%25b5%25e3%2582%25ac%25e3%2582%25a4%25e3%2583%2589%2F&t=%E3%80%90%E5%AE%9F%E5%8B%99%E3%83%BB%E4%B8%AD%E7%B4%9A%E7%B7%A8%E3%80%91+%3Aread-only+%E7%96%91%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9+%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/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-read-only-%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="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%2F18%2F%25e3%2580%2590%25e5%25ae%259f%25e5%258b%2599%25e3%2583%25bb%25e4%25b8%25ad%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-read-only-%25e7%2596%2591%25e4%25bc%25bc%25e3%2582%25af%25e3%2583%25a9%25e3%2582%25b9-css%25e5%25ae%259f%25e8%25b7%25b5%25e3%2582%25ac%25e3%2582%25a4%25e3%2583%2589%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%2F18%2F%25e3%2580%2590%25e5%25ae%259f%25e5%258b%2599%25e3%2583%25bb%25e4%25b8%25ad%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-read-only-%25e7%2596%2591%25e4%25bc%25bc%25e3%2582%25af%25e3%2583%25a9%25e3%2582%25b9-css%25e5%25ae%259f%25e8%25b7%25b5%25e3%2582%25ac%25e3%2582%25a4%25e3%2583%2589%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="【実務・中級編】 :read-only 疑似クラス – CSS実践ガイド 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-read-only-%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/" 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/28/%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-first-child%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%a8/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】 first-child疑似クラスの挙動と注意点 – CSS実践ガイド"> <article class="post-8095 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"> 【テクニカル・上級編】 first-child疑似クラスの挙動と注意点 – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは。日々、CSSOMの構築速度やセレクタのヒット率に脳髄を焼かれているフロントエンド・アーキテクトの皆さん。今回は、CSSの基礎中の基礎であるはずなのに、大規模なデザインシステムや複雑なコンポーネントツリーの組み替えにおいて、しばし... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/16/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91-first-line-%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%81%ab%e3%82%88%e3%82%8b%e6%9c%80%e5%88%9d%e3%81%ae%e8%a1%8c%e3%81%ae%e3%82%b9%e3%82%bf%e3%82%a4/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】 ::first-line 擬似要素による最初の行のスタイル – CSS実践ガイド"> <article class="post-5548 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"> 【入門編】 ::first-line 擬似要素による最初の行のスタイル – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは！フロントエンド・チーフアーキテクトの私です。CSSを書き始めたばかりの頃って、「あれ？このスタイル、なぜか一部分だけ適用されないな……」「なんだか思い通りに動いてくれない！」なんて壁にぶつから ofta（よく）ありませんか？大丈... </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-after-%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%81%ab%e3%82%88%e3%82%8b%e8%a3%85%e9%a3%be%e3%81%a8clearfix-css%e5%ae%9f/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】 ::after 擬似要素による装飾とclearfix – CSS実践ガイド"> <article class="post-6648 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"> 【実務・中級編】 ::after 擬似要素による装飾とclearfix – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> お疲れ。今日も今日とてCSSの沼にハマってコードレビューの嵐を潜り抜けてきたところかい？今回は、中級からもう一段階上の「真のフロントエンド・プロ」を目指す君たちに向けて、CSSのシブいけれど避けて通れないテーマについて話をしよう。テーマは「... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/18/%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-shadow-dom%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%81%ae%e3%82%ab/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】 Shadow DOMにおけるスタイルのカスケード – CSS実践ガイド"> <article class="post-7189 related-entry-card e-card cf post type-post status-publish format-standard hentry category-css-post category-css-important-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"> 【テクニカル・上級編】 Shadow DOMにおけるスタイルのカスケード – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> Shadow DOMという「聖域」：カスケードの遮断とCSS変数による越境のアーキテクチャWebエンジニアなら誰もが一度は経験する「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-local-link-%e3%83%ad%e3%83%bc%e3%82%ab%e3%83%ab%e3%83%aa%e3%83%b3%e3%82%af%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-css/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】 :local-link ローカルリンク疑似クラス – CSS実践ガイド"> <article class="post-7105 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"> 【実務・中級編】 :local-link ローカルリンク疑似クラス – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> おう、諸君！フロントエンドの最前線で日夜奮闘している君たちへ。今回は、CSSのちょっとニッチだけど、知っておくと「なるほど！」って唸るような、そんなテクニックについて語り合おうじゃないか。テーマは「`:local-link` 疑似クラス」... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/16/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91-empty%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9%e3%81%ab%e3%82%88%e3%82%8b%e7%a9%ba%e8%a6%81%e7%b4%a0%e3%81%ae%e5%88%a4%e5%ae%9a-css%e5%ae%9f/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】 empty疑似クラスによる空要素の判定 – CSS実践ガイド"> <article class="post-5957 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"> 【入門編】 empty疑似クラスによる空要素の判定 – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは！フロントエンドの世界へようこそ。毎日コードと向き合っていると、「あれ？思った通りに動かないな」と立ち止まってしまう瞬間がありますよね。でも、それはあなたが着実に一歩ずつ進んでいる証拠です。全然焦る必要はありませんからね。今日は、... </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/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-usereducer%e3%81%a8usecontext%e3%81%ae%e7%b5%84%e3%81%bf%e5%90%88%e3%82%8f%e3%81%9b%e3%81%ab%e3%82%88%e3%82%8b%e3%82%b0/" title="【実務・中級編】 useReducerとuseContextの組み合わせによるグローバル状態管理 – React実践ガイド" 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">【実務・中級編】 useReducerとuseContextの組み合わせによるグローバル状態管理 – React実践ガイド</div></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-deprecated%e3%81%ab%e3%82%88%e3%82%8b%e9%9d%9e%e6%8e%a8%e5%a5%a8%e3%81%ae%e8%ad%a6%e5%91%8a-javascript%e5%ae%9f%e8%b7%b5/" title="【実務・中級編】 @deprecatedによる非推奨の警告 – 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">【実務・中級編】 @deprecatedによる非推奨の警告 – 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/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-read-only-%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/#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">

名前 ※

メール ※

サイト