From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_read-only/index.html | 121 +++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 files/ja/web/css/_colon_read-only/index.html (limited to 'files/ja/web/css/_colon_read-only') diff --git a/files/ja/web/css/_colon_read-only/index.html b/files/ja/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..297b45a46e --- /dev/null +++ b/files/ja/web/css/_colon_read-only/index.html @@ -0,0 +1,121 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web + - セレクター + - 疑似クラス +translation_of: 'Web/CSS/:read-only' +--- +
{{CSSRef}}
+ +

:read-only は CSS の擬似クラスで、ユーザーが編集できない要素 (input や textarea など) を表します。

+ +
input:read-only, textarea:read-only {
+  background-color: #ccc;
+}
+
+p:read-only {
+  background-color: #ccc;
+}
+
+ +

構文

+ +
{{csssyntax}}
+ +

例

+ +

読み取り専用/読み書きコントロールによるフォーム情報の確認

+ +

readonly のフォームコントロールの使用方法の一つは、ユーザーが以前のフォームに入力した情報 (例えば、配送方法の詳細など) をチェックして確認しながら、フォームの残りの部分と一緒に情報を送信することができるようにすることです。以下の例では、これを実現しています。

+ +

:read-only 擬似クラスは、入力欄をクリック可能なフィールドのように見せるスタイル付けをすべて削除するために使用されており、読み取り専用の段落のように見えます。一方、 :read-write 擬似クラスは、編集可能な <textarea> により良いスタイル付けを行うために使用されています。

+ +
input:-moz-read-only, textarea:-moz-read-only,
+input:read-only, textarea:read-only {
+  border: 0;
+  box-shadow: none;
+  background-color: white;
+}
+
+textarea:-moz-read-write,
+textarea:read-write {
+  box-shadow: inset 1px 1px 3px #ccc;
+  border-radius: 5px;
+}
+ +

完全なソースコードは readonly-confirmation.html にあります。以下のように表示されます。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/readonly-confirmation.html", '100%', 660)}}

+ +

フォーム以外の読み取り専用コントロールのスタイル付け

+ +

このセレクターは {{htmlElement("input")}}/{{htmlElement("textarea")}} 要素に {{htmlattrxref("readonly", "input")}} が設定されているものだけを選択するのではありません。ユーザーが編集できないあらゆる要素を選択します。

+ +
<p contenteditable>この段落は編集可能です。読み書き可です。</p>
+
+<p>この段落は編集できません。読み取り専用です。</p>
+ +
p {
+  font-size: 150%;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+p:read-only {
+  background-color: red;
+  color: white;
+}
+
+p:read-write {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('Styling_read-only_non-form_controls', '100%', 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}変更なし
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}HTML および制約検証に関する意味を定義。
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}擬似クラスを定義、但し意味の結びつけの定義はなし
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.selectors.read-only")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf