aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2022-01-03 23:48:58 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2022-01-11 11:50:21 +0900
commit025fd638b5cc7be4698aa77151dfdc2fcbf6ad22 (patch)
tree69be9dadd8eba5152cb4e8580f44ea7522f88ef6
parent20b1a3262830009ebb540f6bb88ef905367a9a6a (diff)
downloadtranslated-content-025fd638b5cc7be4698aa77151dfdc2fcbf6ad22.tar.gz
translated-content-025fd638b5cc7be4698aa77151dfdc2fcbf6ad22.tar.bz2
translated-content-025fd638b5cc7be4698aa77151dfdc2fcbf6ad22.zip
2021/08/13 時点の英語版に同期
-rw-r--r--files/ja/web/css/_colon_read-only/index.md117
1 files changed, 49 insertions, 68 deletions
diff --git a/files/ja/web/css/_colon_read-only/index.md b/files/ja/web/css/_colon_read-only/index.md
index 727329a1cb..972e672d82 100644
--- a/files/ja/web/css/_colon_read-only/index.md
+++ b/files/ja/web/css/_colon_read-only/index.md
@@ -1,42 +1,45 @@
---
title: ':read-only'
-slug: 'Web/CSS/:read-only'
+slug: Web/CSS/:read-only
tags:
- CSS
- - Layout
- - Pseudo-class
- - Reference
- - Web
+ - レイアウト
+ - 擬似クラス
+ - 読み取り専用
+ - リファレンス
- セレクター
- - 疑似クラス
-translation_of: 'Web/CSS/:read-only'
+ - ウェブ
+browser-compat: css.selectors.read-only
+translation_of: Web/CSS/:read-only
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><strong><code>:read-only</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>で、ユーザーが編集できない要素 (<code>input</code> や <code>textarea</code> など) を表します。</p>
+**`:read-only`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、ユーザーが編集できない要素 (`input` や `textarea` など) を表します。
-<pre class="brush: css no-line-numbers notranslate">input:read-only, textarea:read-only {
+```css
+input:read-only, textarea:read-only {
background-color: #ccc;
}
p:read-only {
background-color: #ccc;
}
-</pre>
+```
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
{{csssyntax}}
-<h2 id="Example" name="Example">例</h2>
+## 例
-<h3 id="Confirming_form_information_in_read-onlyread-write_controls" name="Confirming_form_information_in_read-onlyread-write_controls">読み取り専用/読み書きコントロールによるフォーム情報の確認</h3>
+### 読み取り専用/読み書きコントロールによるフォーム情報の確認
-<p><code>readonly</code> のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。</p>
+`readonly` のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。
-<p><code>:read-only</code> 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 <code>:read-write</code> 擬似クラスは、編集可能な <code>&lt;textarea&gt;</code> により良いスタイル付けを行うために使用されています。</p>
+`:read-only` 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 `:read-write` 擬似クラスは、編集可能な `<textarea>` により良いスタイル付けを行うために使用されています。
-<pre class="brush: css notranslate">input:-moz-read-only, textarea:-moz-read-only,
+```css
+input:-moz-read-only, textarea:-moz-read-only,
input:read-only, textarea:read-only {
border: 0;
box-shadow: none;
@@ -47,21 +50,25 @@ textarea:-moz-read-write,
textarea:read-write {
box-shadow: inset 1px 1px 3px #ccc;
border-radius: 5px;
-}</pre>
+}
+```
-<p>完全なソースコードは <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html" rel="noopener">readonly-confirmation.html</a> にあります。以下のように表示されます。</p>
+完全なソースコードは [readonly-confirmation.html](https://github.com/mdn/learning-area/blob/master/html/forms/pseudo-classes/readonly-confirmation.html) にあります。以下のように表示されます。
-<p>{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}</p>
+{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}
-<h3 id="Styling_read-only_non-form_controls" name="Styling_read-only_non-form_controls">フォーム以外の読み取り専用コントロールのスタイル付け</h3>
+### フォーム以外の読み取り専用コントロールのスタイル付け
-<p>このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できない<em>あらゆる</em>要素を選択します。</p>
+このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できない*あらゆる*要素を選択します。
-<pre class="brush: html notranslate">&lt;p contenteditable&gt;この段落は編集可能です。読み書き可です。&lt;/p&gt;
+```html
+<p contenteditable>この段落は編集可能です。読み書き可です。</p>
-&lt;p&gt;この段落は編集できません。読み取り専用です。&lt;/p&gt;</pre>
+<p>この段落は編集できません。読み取り専用です。</p>
+```
-<pre class="brush: css notranslate">p {
+```css
+p {
font-size: 150%;
padding: 5px;
border-radius: 5px;
@@ -74,46 +81,20 @@ p:read-only {
p:read-write {
background-color: lime;
-}</pre>
-
-<p>{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}</td>
- <td>{{ Spec2('HTML WHATWG') }}</td>
- <td>変更なし</td>
- </tr>
- <tr>
- <td>{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}</td>
- <td>{{ Spec2('HTML5 W3C') }}</td>
- <td>HTML および制約検証に関する意味を定義。</td>
- </tr>
- <tr>
- <td>{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}</td>
- <td>{{ Spec2('CSS4 Selectors') }}</td>
- <td>擬似クラスを定義、但し意味の結びつけの定義はなし</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.selectors.read-only")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref(":read-write")}}</li>
- <li>HTML の {{htmlattrxref("contenteditable")}} 属性</li>
-</ul>
+}
+```
+
+{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref(":read-write")}}
+- HTML の {{htmlattrxref("contenteditable")}} 属性