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

なぜ「入力不可」をCSSで制御するのか？ `:read-only` と `:read-write` が切り拓くモダンなUI開発

現場でコードをレビューしていると、たまに見かけるんですよ。「読み取り専用の入力フィールド」をスタイルするために、わざわざ `.is-readonly` みたいなクラスをJSで付与したり、`[readonly]` 属性セレクタを必死に叩いているコードを。

もちろんそれも間違いじゃない。でも、CSSにはもっとエレガントで、ブラウザの「状態」をネイティブに解釈する賢い方法がある。それが `:read-only` と `:read-write` です。今日は、この疑似クラスがいかに現場の「泥臭い実装」をスマートに変えてくれるか、その極意を伝授しましょう。

—

1. `:read-only` と `:read-write` の本質

この二つの疑似クラスは、単なる「属性の有無」を見ているわけではありません。ブラウザが「ユーザーが現在その要素に対して文字を入力できる状態にあるか」を判定する、いわば「インタラクティブな状態検知器」です。

:read-write: ユーザーが編集可能な要素（`` や `` のreadonlyでないもの、あるいは `contenteditable` な要素）。</li> <li><b>:read-only</b>: 上記以外。つまり、読み取り専用属性がついている、あるいはそもそも編集できない要素。</li> </ul> <p>特筆すべきは、`contenteditable` 属性を持つ要素までカバーしている点です。クラス名での管理が不要になるため、DOMが汚れるのを嫌うミニマリストなエンジニアにはたまらないはずです。</p> <p>—</p> <h3><span id="toc2">2. なぜ今、あえてこれらを使うべきなのか</span></h3> <p>実務でこれらを使う最大の理由は<b>「整合性」</b>です。</p> <p>CSSで `input[readonly]` と指定したとしても、将来的に `contenteditable` な要素を編集不可にしたくなった瞬間、そのスタイルは適用されなくなります。しかし、`:read-only` ならば、<b>「ユーザーが編集できない」という状態そのものをフックしている</b>ため、マークアップがどうであれ、一貫したUIを担保できる。これがプロのCSS設計における「堅牢性」というやつです。</p> <p>—</p> <h3><span id="toc3">3. 実践：現場で使える「洗練されたフォーム」のコード例</span></h3> <p>言葉で説明するより、コードを見せたほうが早いでしょう。以下のサンプルは、モダンな管理画面でそのまま使えるレベルの設計にしています。</p> <p>/ ベースとなる入力フィールドのスタイル /<br /> .form-input {<br /> padding: 10px;<br /> border: 1px solid #ccc;<br /> border-radius: 4px;<br /> transition: all 0.2s ease;<br /> }</p> <p>/ 編集可能な状態：フォーカス時に少し強調 /<br /> .form-input:read-write:focus {<br /> outline: none;<br /> border-color: #007bff;<br /> box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);<br /> }</p> <p>/ 編集不可な状態：背景をグレーにして「触れない」ことを視覚的に伝える /<br /> .form-input:read-only {<br /> background-color: #f8f9fa;<br /> border-color: #e9ecef;<br /> color: #6c757d;<br /> cursor: not-allowed; / ユーザーに触れないことをカーソルで示す /<br /> }</p> <p>/ 応用：contenteditable要素に対しても一貫したスタイルを適用 /<br /> [contenteditable]:read-only {<br /> border-style: dashed; / 編集不可なプレースホルダー的なUI /<br /> opacity: 0.7;<br /> }</p> <h3><span id="toc4">このコードのポイント</span></h3> <p>1. <b>`cursor: not-allowed`</b>: これが重要です。エンジニアはコードのロジックばかり考えがちですが、ユーザーは「なぜ触れないのか」を直感的に知る必要があります。CSSで状態を制御するなら、カーソルまでセットで管理するのがプロの作法です。<br /> 2. <b>フォーカス制御</b>: `:read-write:focus` とすることで、読み取り専用の要素が誤ってフォーカスを受けても、不要なハイライトが出ないようにしています。</p> <p>—</p> <h3><span id="toc5">4. 現場でハマる「落とし穴」への警告</span></h3> <p>もちろん、魔法ではありません。注意点も共有しておきます。</p> <ul> <li><b>ブラウザサポート</b>: 主要ブラウザはすべて対応していますが、Safariで `contenteditable` を制御する際には、たまにブラウザのレンダリングエンジン特有の挙動（フォーカスの当たり方など）にブレが出ることがあります。必ず実機（特にiOS）で確認を。</li> <li><b>属性セレクタとの併用</b>: まだレガシーなブラウザ対応が必須の環境であれば、`[readonly]` との併用も考慮してください。ただし、最近のモダンな現場であれば、基本的にはこの疑似クラスで十分です。</li> </ul> <p>—</p> <h3><span id="toc6">最後に：CSSは「状態」を書くもの</span></h3> <p>CSSを書くとき、多くの人が「見た目」を記述しようとします。でも、優秀なアーキテクトは<b>「アプリケーションの状態」を記述する</b>。</p> <p>`:read-only` や `:read-write` を活用することは、HTMLという「構造」とCSSという「見た目」の間に、<b>「状態」という新しい橋を架ける作業</b>です。クラス名を大量に量産してDOMを汚す前に、まずはブラウザが持っているこの強力なセンサーを使い倒してみてください。</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-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+%E3%81%A8+%3Aread-write+%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%2F30%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-%25e3%2581%25a8-read-write-%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%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%2F30%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-%25e3%2581%25a8-read-write-%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%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+%E3%81%A8+%3Aread-write+%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/30/%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-%e3%81%a8-read-write-%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/" 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%2F30%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-%25e3%2581%25a8-read-write-%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%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%2F30%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-%25e3%2581%25a8-read-write-%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%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 と :read-write 疑似クラス – CSS実践ガイド https://frontend.intronational.com/2026/09/30/%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-%e3%81%a8-read-write-%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/" 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-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%e3%82%a4%e3%83%89/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】 :nth-last-child() 擬似クラス – CSS実践ガイド"> <article class="post-5194 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"> CSSの世界へようこそ！フロントエンドの現場で長年コードを書いてきましたが、今日はCSSの中でも少しだけ「ひねくれ者」だけど、知ると最高に頼りになるやつ、`:nth-last-child()` についてお話ししますね。「前から数える」のは簡... </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-fullscreen-%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="【実務・中級編】 :fullscreen 擬似クラス – CSS実践ガイド"> <article class="post-6780 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"> 【実務・中級編】 :fullscreen 擬似クラス – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> おい、最近よくある「画面いっぱいにリッチなコンテンツを表示したい」っていう要件、君のプロジェクトでも実装したよな？動画プレイヤー、画像ギャラリー、あるいはダッシュボードのデータビジュアライゼーション。ユーザーが「全画面表示（フルスクリーン... </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-not%e9%96%a2%e6%95%b0%e5%9e%8b%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="【入門編】 not関数型疑似クラス – CSS実践ガイド"> <article class="post-5855 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"> 【入門編】 not関数型疑似クラス – 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/29/%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-of-type%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9%e3%81%ae%e6%b4%bb%e7%94%a8-css/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】 nth-last-of-type疑似クラスの活用 – CSS実践ガイド"> <article class="post-8125 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"> 【テクニカル・上級編】 nth-last-of-type疑似クラスの活用 – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは。フロントエンドの現場で日々、CSSのセレクタが引き起こす微細なパフォーマンスの揺らぎや、動的なDOM構築との格闘にロマンを感じているエンジニアの皆さん。今回は、CSSセレクタの中でも一癖も二癖もあり、そして極めて強力な `:nt... </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-required-%e3%81%a8-optional-css%e5%ae%9f%e8%b7%b5/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】擬似クラス :required と :optional – CSS実践ガイド"> <article class="post-7838 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"> 【テクニカル・上級編】擬似クラス :required と :optional – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは。フロントエンドの現場を渡り歩いていると、「なぜかフォームのデザインが不安定になる」「JavaScriptのバリデーションと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-%e3%83%aa%e3%83%b3%e3%82%af%e6%93%ac%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-link-visited-css/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】リンク擬似クラス (:link, :visited) – CSS実践ガイド"> <article class="post-7369 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"> 【テクニカル・上級編】リンク擬似クラス (:link, :visited) – CSS実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> `:link` と `:visited`：ブラウザの深淵、プライバシーの要塞をハックするCSSを単なる「見た目を整える道具」と捉えているなら、それはあまりに勿体ない。特に `:link` と `:visited` という、Webの黎明期から... </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/30/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91ol%e3%82%bf%e3%82%b0%e3%81%aestart%e5%b1%9e%e6%80%a7%e3%81%a8reversed%e5%b1%9e%e6%80%a7%e3%81%ae%e6%b4%bb%e7%94%a8-html/" title="【実務・中級編】olタグのstart属性とreversed属性の活用 – 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">【実務・中級編】olタグのstart属性とreversed属性の活用 – HTML実践ガイド</div></a><a href="https://frontend.intronational.com/2026/09/30/%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%a4%a7%e6%96%87%e5%ad%97%e3%83%bb%e5%b0%8f%e6%96%87%e5%ad%97%e5%a4%89%e6%8f%9b%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89%e3%81%ae/" title="【実務・中級編】大文字・小文字変換メソッドのロケール対応 – 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">【実務・中級編】大文字・小文字変換メソッドのロケール対応 – 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/30/%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-%e3%81%a8-read-write-%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/#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">
名前 ※

メール ※

サイト

次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。