【実務・中級編】読み取り専用擬似クラス :read-only – CSS実践ガイド

CSSの「編集不可」を制する：`:read-only`擬似クラスの極意と現場のリアル

現場でバリバリとフォームを実装していると、必ず一度は頭を抱えるのが「編集不可なフィールドのUI」です。

`readonly`属性がついた``や、あるいは単なる`disabled`状態の要素。これらを「どう見せるか」は、UXの観点から非常に重要です。ユーザーに「これは変更できないんだ」と一目で伝えつつ、かつ無機質になりすぎないデザインを当てる。

今日は、CSSの少しニッチな、しかし知っておくと間違いなく重宝する`:read-only`擬似クラスについて、現場目線で深掘りしていこう。

—

`:read-only` とは何者か？

MDNの定義を引くまでもなく、`:read-only`は「ユーザーが（直接的な操作で）値を変更できない状態」にある要素をターゲットにする擬似クラスだ。

ここで注意してほしいのが、「`readonly`属性がついている要素」だけではないという点だ。実はブラウザのレンダリングエンジンは、以下のような要素を`:read-only`として判定している。

1. `` や `` で `readonly` 属性が付与されているもの。<br /> 2. `<input>` や `<textarea>` で `disabled` 属性が付与されているもの（※ブラウザの実装によるが、基本的には含められる）。<br /> 3. そもそも編集属性を持たない要素（例えば通常の`</p> <div>`など）。</p> <p>つまり、CSS側で「こいつは触らせないぞ」というルールを定義する際、属性をいちいち気にする必要がなくなる。これが`:read-only`を使う最大のメリットだ。</p> <p>—</p> <h3><span id="toc3">現場で直面する「落とし穴」</span></h3> <p>多くのエンジニアが陥る罠が、「`:read-only`だけで全てが解決する」と思い込むことだ。実は、ブラウザによって`disabled`との扱いに微妙な揺れがある。</p> <p>`disabled`属性がついた要素は、ブラウザのデフォルトスタイルで背景が薄いグレーになり、カーソルも`not-allowed`になることが多い。しかし、`readonly`属性の要素は、見た目は通常の入力欄と変わらないことがほとんどだ。</p> <p><b>「readonlyなのに、見た目は入力できそうに見える」</b></p> <p>これほどユーザーをイラつかせるUIはない。だからこそ、`:read-only`を使って「視覚的にガードを固める」必要があるんだ。</p> <p>—</p> <h3><span id="toc4">実践：コピペで使える「読み取り専用」のベストプラクティス</span></h3> <p>現場でそのまま使える、堅牢なスタイル定義のサンプルを用意した。単に色を変えるだけでなく、カーソルの制御やフォーカス時の挙動まで考慮するのがプロの仕事だ。</p> <p>/ </p> <ul> <li>読み取り専用フィールドの基本スタイル</li> <li>ユーザーに「触れない」ことを直感的に伝える</li> </ul> <p> /<br /> input:read-only,<br /> textarea:read-only {<br /> / 背景色を少し落とし、境界線を薄くして「非活性感」を出す /<br /> background-color: #f8f9fa;<br /> border: 1px solid #dee2e6;<br /> color: #6c757d; / 文字色を少しグレーに /</p> <p> / ユーザーがクリックしても「変更できない」とわかるように /<br /> cursor: not-allowed;</p> <p> / 枠線が太くならないように、フォーカス時の挙動も制御 /<br /> outline: none;<br /> }</p> <p>/ </p> <ul> <li>readonlyであってもフォーカスが入るケースがあるため、</li> <li>その際の挙動を明示的に殺す（アクセシビリティとの兼ね合いに注意）</li> </ul> <p> /<br /> input:read-only:focus {<br /> box-shadow: none;<br /> border-color: #dee2e6;<br /> }</p> <p>/ </p> <ul> <li>ラベル側のデザインとも連動させると、よりUXが向上する</li> <li>親要素にreadonlyクラスを付与する設計にしておくと便利</li> </ul> <p> /<br /> .form-group:has(input:read-only) {<br /> opacity: 0.8;<br /> }</p> <p>—</p> <h3><span id="toc5">なぜこの実装が良いのか？</span></h3> <p>1. <b>`cursor: not-allowed`の付与</b>: これがあるだけで、UIの信頼性が格段に上がる。ユーザーは「あ、これはクリックしても無駄なんだな」と瞬時に理解できる。<br /> 2. <b>`outline`の制御</b>: デフォルトのフォーカスリングが残っていると、「あれ？入力できるの？」とユーザーが混乱する。状態に合わせて適切に消す（あるいは薄くする）のが正解だ。<br /> 3. <b>`:has()`セレクタとの組み合わせ</b>: 最近のモダンブラウザ環境なら、親要素の`.form-group`まで制御して、全体を薄くグレーアウトさせる手法も非常に有効だ。</p> <h3><span id="toc6">最後に：エンジニアとしての矜持</span></h3> <p>CSSは、ただの「見た目合わせのツール」ではない。ユーザーがシステムと対話するための「言語」だ。</p> <p>`:read-only`を使うことは、単にコードを短くすること以上に、「この要素は今のステータスでは変更不可能である」という<b>ロジックをスタイルという形でユーザーに伝達する責任</b>を負うことでもある。</p> <p>明日からの実装で、もし`readonly`な入力欄を作ることがあれば、ぜひこの擬似クラスを思い出してほしい。その小さなこだわりが、アプリケーション全体の品質を数段引き上げることになるはずだ。</p> <p>さて、コードを書いていこうか。君の書くCSSが、誰かにとっての「使いやすいUI」に繋がることを期待しているよ。</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%E5%AE%9F%E5%8B%99%E3%83%BB%E4%B8%AD%E7%B4%9A%E7%B7%A8%E3%80%91+%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E5%B0%82%E7%94%A8%E6%93%AC%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9+%3Aread-only+%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%2F17%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-%25e8%25aa%25ad%25e3%2581%25bf%25e5%258f%2596%25e3%2582%258a%25e5%25b0%2582%25e7%2594%25a8%25e6%2593%25ac%25e4%25bc%25bc%25e3%2582%25af%25e3%2583%25a9%25e3%2582%25b9-read-only-css%25e5%25ae%259f%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%2F17%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-%25e8%25aa%25ad%25e3%2581%25bf%25e5%258f%2596%25e3%2582%258a%25e5%25b0%2582%25e7%2594%25a8%25e6%2593%25ac%25e4%25bc%25bc%25e3%2582%25af%25e3%2583%25a9%25e3%2582%25b9-read-only-css%25e5%25ae%259f%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+%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E5%B0%82%E7%94%A8%E6%93%AC%E4%BC%BC%E3%82%AF%E3%83%A9%E3%82%B9+%3Aread-only+%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/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-%e8%aa%ad%e3%81%bf%e5%8f%96%e3%82%8a%e5%b0%82%e7%94%a8%e6%93%ac%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-read-only-css%e5%ae%9f/" 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%2F17%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-%25e8%25aa%25ad%25e3%2581%25bf%25e5%258f%2596%25e3%2582%258a%25e5%25b0%2582%25e7%2594%25a8%25e6%2593%25ac%25e4%25bc%25bc%25e3%2582%25af%25e3%2583%25a9%25e3%2582%25b9-read-only-css%25e5%25ae%259f%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%2F17%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-%25e8%25aa%25ad%25e3%2581%25bf%25e5%258f%2596%25e3%2582%258a%25e5%25b0%2582%25e7%2594%25a8%25e6%2593%25ac%25e4%25bc%25bc%25e3%2582%25af%25e3%2583%25a9%25e3%2582%25b9-read-only-css%25e5%25ae%259f%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/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-%e8%aa%ad%e3%81%bf%e5%8f%96%e3%82%8a%e5%b0%82%e7%94%a8%e6%93%ac%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-read-only-css%e5%ae%9f/" 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/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-link%e3%82%bf%e3%82%b0%e3%81%a8import%e3%81%ae%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d-css/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】 linkタグと@importの読み込み優先順位 – CSS実践ガイド"> <article class="post-6083 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"> 【実務・中級編】 linkタグと@importの読み込み優先順位 – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> 現場で戦うエンジニア諸君、お疲れ様。CSSの「読み込み順序」で沼にハマった経験、一度はあるだろう？「CSSが当たらない」「意図したスタイルが上書きされる」。そんな時、詳細度（Specificity）だけを必死に追いかけて `!importa... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/25/%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-%e6%93%ac%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-disabled-%e3%81%a8-enabled-css%e5%ae%9f%e8%b7%b5/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】擬似クラス :disabled と :enabled – CSS実践ガイド"> <article class="post-7832 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"> 【テクニカル・上級編】擬似クラス :disabled と :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/16/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91-%e7%a9%ba%e7%99%bd%e5%8c%ba%e5%88%87%e3%82%8a%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ae%e5%8c%85%e5%90%ab-attrvalue-css%e5%ae%9f%e8%b7%b5%e3%82%ac/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】空白区切りリストの包含 [attr~=value] – CSS実践ガイド"> <article class="post-5699 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アーキテクトです。CSSを書き始めた頃って、セレクタの記号の多さにめまいがしませんか？「`.`はクラスだっけ？ `#`はIDだっけ？じゃあ、この変なカギ括弧 `[... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/30/%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-modal-%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%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="【テクニカル・上級編】 :modal モーダル疑似クラス – CSS実践ガイド"> <article class="post-8221 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"> 【テクニカル・上級編】 :modal モーダル疑似クラス – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> やあ、現場の最前線でコードと格闘している同志諸君。今日も「z-index: 9999」の泥沼に足を取られてはいないだろうか？かつて、モーダルを実装すると言えば、不透明なオーバーレイを自前で用意し、`position: fixed`を駆使し、... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/25/%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-highlight%e6%93%ac%e4%bc%bc%e8%a6%81%e7%b4%a0%e3%81%ab%e3%82%88%e3%82%8b%e3%82%ab%e3%82%b9/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】 ::highlight擬似要素によるカスタムハイライト – CSS実践ガイド"> <article class="post-7862 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"> 【テクニカル・上級編】 ::highlight擬似要素によるカスタムハイライト – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは。フロントエンドの迷宮を日夜彷徨い、ブラウザの描画パイプラインとメモリリークの夢を見るあなたへ。DOMノードを汚染することなく、任意のテキスト範囲をCSSだけで自由自在にハイライトしたいと思ったことはないだろうか？検索ワードのハイ... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/19/%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-nth-last-child-%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/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】 :nth-last-child() 擬似クラス – CSS実践ガイド"> <article class="post-7387 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"> 【テクニカル・上級編】 :nth-last-child() 擬似クラス – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> :nth-last-child() の深淵 —— ブラウザの描画負荷と「DOMの揺らぎ」を制御する技術CSSを単なる「見た目を整える道具」と捉えているなら、それはフロントエンドという戦場では少し武器が軽すぎる。我々のようなアーキテクトにとっ... </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/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-react-reactnode%e3%81%a8react-reactelement%e3%81%ae%e5%8e%b3%e5%af%86%e3%81%aa%e4%bd%bf%e3%81%84%e5%88%86%e3%81%91-react/" title="【実務・中級編】 React.ReactNodeとReact.ReactElementの厳密な使い分け – 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">【実務・中級編】 React.ReactNodeとReact.ReactElementの厳密な使い分け – React実践ガイド</div></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-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%e8%b7%b5%e3%82%ac%e3%82%a4-2/" 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/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-%e8%aa%ad%e3%81%bf%e5%8f%96%e3%82%8a%e5%b0%82%e7%94%a8%e6%93%ac%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-read-only-css%e5%ae%9f/#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">

名前 ※

メール ※

サイト