diff options
Diffstat (limited to 'files/ja/web')
| -rw-r--r-- | files/ja/web/css/appearance/index.md | 2871 | ||||
| -rw-r--r-- | files/ja/web/css/box-sizing/index.md | 126 | ||||
| -rw-r--r-- | files/ja/web/css/css_basic_user_interface/index.md | 104 | ||||
| -rw-r--r-- | files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md | 148 | ||||
| -rw-r--r-- | files/ja/web/css/cursor/index.md | 605 | ||||
| -rw-r--r-- | files/ja/web/css/ime-mode/index.md | 124 | ||||
| -rw-r--r-- | files/ja/web/css/outline-color/index.md | 152 | ||||
| -rw-r--r-- | files/ja/web/css/outline-offset/index.md | 94 | ||||
| -rw-r--r-- | files/ja/web/css/outline-style/index.md | 292 | ||||
| -rw-r--r-- | files/ja/web/css/outline-width/index.md | 134 | ||||
| -rw-r--r-- | files/ja/web/css/outline/index.md | 162 | ||||
| -rw-r--r-- | files/ja/web/css/resize/index.md | 182 | ||||
| -rw-r--r-- | files/ja/web/css/text-overflow/index.md | 441 | ||||
| -rw-r--r-- | files/ja/web/css/user-select/index.md | 153 |
14 files changed, 1532 insertions, 4056 deletions
diff --git a/files/ja/web/css/appearance/index.md b/files/ja/web/css/appearance/index.md index c3a4b35afa..3bac4a5fc6 100644 --- a/files/ja/web/css/appearance/index.md +++ b/files/ja/web/css/appearance/index.md @@ -1,5 +1,5 @@ --- -title: 'appearance (-moz-appearance, -webkit-appearance)' +title: appearance (-moz-appearance, -webkit-appearance) slug: Web/CSS/appearance tags: - '-moz-appearance' @@ -9,41 +9,39 @@ tags: - CSS 基本ユーザーインターフェイス - Reference - appearance + - recipe:css-property +browser-compat: css.properties.appearance translation_of: Web/CSS/appearance --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +{{CSSRef}} -<p>CSS の <strong><code>-moz-appearance</code></strong> プロパティは、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために、 Gecko (Firefox) によって使用されます。</p> +**`appearance`** は CSS のプロパティで、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために使用されます。**`-moz-appearance`** および **`-webkit-appearance`** はこのプロパティの標準外のバージョンで、(それぞれ) Gecko (Firefox) と Webkit ベース (Safari など) や Blink ベース (Chrome、Opera など) のブラウザーで同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から **`-webkit-appearance`** に対応しています。 -<p><strong><code>-webkit-appearance</code></strong> プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から <code>-webkit-appearance</code> に対応しています。</p> +{{EmbedInteractiveExample("pages/css/appearance.html")}} -<div>{{EmbedInteractiveExample("pages/css/appearance.html")}}</div> +**`-moz-appearance`** プロパティは [XUL](/ja/docs/Mozilla/Tech/XUL/Tutorial) スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されていました。また、 Mozilla プラットフォームに搭載するウィジェットの [XBL](/ja/docs/XBL) 実装でも使用されていました。Gecko/Firefox 80 以降では、これらの使い方は **`-moz-default-appearance`** に変更され、内部スタイルシートの外では使用するべきではなくなりました。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +> **Note:** ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 `none` キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。 -<p>このプロパティは <a href="/ja/docs/Mozilla/Tech/XUL/Tutorial">XUL</a> スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、 Mozilla プラットフォームに搭載するウィジェットの <a href="/ja/docs/XBL">XBL</a> 実装でも使用されます。</p> +## 構文 -<div class="note"> -<p><strong>互換性メモ</strong>: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 <code>none</code> キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css">/* CSS 基本ユーザーインターフェイス Level 4 の値 */ +```css +/* CSS 基本ユーザーインターフェイス Level 4 の値 */ appearance: none; appearance: auto; -appearance: button; +appearance: menulist-button; appearance: textfield; + +/* "Compat-auto" の値は 'auto' と同じ効果 */ +appearance: button; appearance: searchfield; appearance: textarea; appearance: push-button; -appearance: button-bevel; appearance: slider-horizontal; appearance: checkbox; appearance: radio; appearance: square-button; appearance: menulist; -appearance: menulist-button; appearance: listbox; appearance: meter; appearance: progress-bar; @@ -55,2617 +53,270 @@ appearance: progress-bar; /* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */ -webkit-appearance: media-mute-button; -webkit-appearance: caret; -</pre> -<p><code>-moz-appearance</code> プロパティは、以下の一覧から一つの値を選択して指定することができます。</p> +/* グローバル値 */ +appearance: inherit; +appearance: initial; +appearance: revert; +appearance: unset; +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<p><code><appearance></code> は以下のキーワードのうちの一つです。</p> +#### 標準キーワード <table class="standard-table"> - <tbody> - <tr> - <th>値</th> - <th>デモ</th> - <th>ブラウザー</th> - <th>説明</th> - </tr> - <tr> - <td><code>none</code></td> - <td> - <div class="hidden" id="sampleNone"> - <pre class="brush: css"> -div{ color: black; --moz-appearance:none; --webkit-appearance:none; -appearance:none; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td>特別なスタイルは適用されません。これが既定です。</td> - </tr> - <tr> - <td><code>auto</code> {{Experimental_Inline}}</td> - <td> - <div class="hidden" id="sampleAuto"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: auto; --webkit-appearance: auto; -appearance:auto; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}</td> - <td>なし</td> - <td>ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では <code>none</code> として動作します。</td> - </tr> - <tr> - <td><code>attachment</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleAttachment"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: attachment; --webkit-appearance: attachment; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>borderless-attachment</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-borderless-attachment"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: borderless-attachment; --webkit-appearance: borderless-attachment; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleButton"> - <pre class="brush: css"> -div { color: black; --moz-appearance: button; --webkit-appearance: button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td>要素がボタンのように描画されます。</td> - </tr> - <tr> - <td><code>button-arrow-down</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleButtonArrowDown"> - <pre class="brush: css"> -div { color: black; --moz-appearance: button-arrow-down; --webkit-appearance: button-arrow-down; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>button-arrow-next</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleButtonArrowNext"> - <pre class="brush: css"> -div { color: black; --moz-appearance: button-arrow-next; --webkit-appearance: button-arrow-next; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>button-arrow-previous</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleButtonArrowPrevious"> - <pre class="brush: css"> -div { color: black; --moz-appearance: button-arrow-previous; --webkit-appearance: button-arrow-previous; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>button-arrow-up</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleButtonArrowUp"> - <pre class="brush: css"> -div { color: black; --moz-appearance: button-arrow-up; --webkit-appearance: button-arrow-up; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>button-bevel</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleButtonBevel"> - <pre class="brush: css"> -div { color: black; --moz-appearance: button-bevel; --webkit-appearance: button-bevel; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>button-focus</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleButtonFocus"> - <pre class="brush: css"> -div { color: black; --moz-appearance: button-focus; --webkit-appearance: button-focus; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>caps-lock-indicator</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-caps-lock-indicator"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: caps-lock-indicator; --webkit-appearance: caps-lock-indicator; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}</td> - <td>Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>caret</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleCaret"> - <pre class="brush: css"> -div { color: black; --moz-appearance: caret; --webkit-appearance: caret; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>checkbox</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleCheckbox"> - <pre class="brush: css"> -div { color: black; --moz-appearance: checkbox; --webkit-appearance: checkbox; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td>要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。</td> - </tr> - <tr> - <td><code>checkbox-container</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleCheckboxContainer"> - <pre class="brush: css"> -div { color: black; --moz-appearance: checkbox-container; --webkit-appearance: checkbox-container; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。</td> - </tr> - <tr> - <td><code>checkbox-label</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleCheckboxLabel"> - <pre class="brush: css"> -div { color: black; --moz-appearance: checkbox-label; --webkit-appearance: checkbox-label; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>checkmenuitem</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleCheckmenuitem"> - <pre class="brush: css"> -div { color: black; height: 20px; --moz-appearance: checkmenuitem; --webkit-appearance: checkmenuitem; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>color-well</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-color-well"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: color-well; --webkit-appearance: color-well; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td><code>input type=color</code></td> - </tr> - <tr> - <td><code>continuous-capacity-level-indicator</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-continuous-capacity-level-indicator"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: continuous-capacity-level-indicator; --webkit-appearance: continuous-capacity-level-indicator; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>default-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-default-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: default-button; --webkit-appearance: default-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}</td> - <td>Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>discrete-capacity-level-indicator</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-discrete-capacity-level-indicator"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: discrete-capacity-level-indicator; --webkit-appearance: discrete-capacity-level-indicator; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>dualbutton</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleDualButton"> - <pre class="brush: css"> -div { color: black; --moz-appearance: dualbutton; --webkit-appearance: dualbutton; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>groupbox</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleGroupbox"> - <pre class="brush: css"> -div { color: black; --moz-appearance: groupbox; --webkit-appearance: groupbox; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>inner-spin-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleInnerSpinButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: inner-spin-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>image-controls-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-image-controls-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: image-controls-button; --webkit-appearance: image-controls-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>list-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-list-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: list-button; --webkit-appearance: list-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td>datalist</td> - </tr> - <tr> - <td><code>listbox</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleListBox"> - <pre class="brush: css"> -div { color: black; height:20px; --moz-appearance: listbox; --webkit-appearance: listbox; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>listitem</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleListItem"> - <pre class="brush: css"> -div { color: black; --moz-appearance: listitem; --webkit-appearance: listitem; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>media-enter-fullscreen-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaEnterFullscreenButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-enter-fullscreen-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-exit-fullscreen-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaExitFullscreenButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-exit-fullscreen-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-fullscreen-volume-slider</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-fullscreen-volume-slider"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-fullscreen-volume-slider; --webkit-appearance: media-fullscreen-volume-slider; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-fullscreen-volume-slider-thumb</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-fullscreen-volume-slider-thumb"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-fullscreen-volume-slider-thumb; --webkit-appearance: media-fullscreen-volume-slider-thumb; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-mute-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaMuteButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-mute-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>media-play-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaPlayButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-play-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>media-overlay-play-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaOverlayPlayButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-overlay-play-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-return-to-realtime-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-return-to-realtime-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-return-to-realtime-button; --webkit-appearance: media-return-to-realtime-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-rewind-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-rewind-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-rewind-button; --webkit-appearance: media-rewind-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-seek-back-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-seek-back-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-seek-back-button; --webkit-appearance: media-seek-back-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}</td> - <td>Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>media-seek-forward-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-seek-forward-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-seek-forward-button; --webkit-appearance: media-seek-forward-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}</td> - <td>Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>media-toggle-closed-captions-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaToggleClosedCaptionsButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-toggle-closed-captions-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-slider</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaSlider"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-slider; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>media-sliderthumb</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaSliderThumb"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-sliderthumb; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>media-volume-slider-container</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaVolumeSliderContainer"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-volume-slider-container; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-volume-slider-mute-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-volume-slider-mute-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-volume-slider-mute-button; --webkit-appearance: media-volume-slider-mute-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-volume-slider</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaVolumeSlider"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-volume-slider; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-volume-sliderthumb</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaVolumeSliderThumb"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-volume-slider-thumb; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-controls-background</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaControlsBackground"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-controls-background; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-controls-dark-bar-background</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-controls-dark-bar-background"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-controls-dark-bar-background; --webkit-appearance: media-controls-dark-bar-background; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-controls-fullscreen-background</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaControlsFullscreenBackground"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-controls-fullscreen-background; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-controls-light-bar-background</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-media-controls-light-bar-background"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: media-controls-light-bar-background; --webkit-appearance: media-controls-light-bar-background; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-current-time-display</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaCurrentTimeDisplay"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-current-time-display; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>media-time-remaining-display</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMediaTimeRemainingDisplay"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: media-time-remaining-display; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>menuarrow</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuArrow"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menuarrow; --webkit-appearance: menuarrow; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>menubar</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenubar"> - <pre class="brush: css"> -div { color: balck; --moz-appearance: menubar; --webkit-appearance: menubar; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>menucheckbox</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuCheckbox"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menucheckbox; --webkit-appearance: menucheckbox; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>menuimage</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuImage"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menuimage; --webkit-appearance: menuimage; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>menuitem</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuItem"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menuitem; --webkit-appearance: menuitem; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。</td> - </tr> - <tr> - <td><code>menuitemtext</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuItemText"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menuitemtext; --webkit-appearance: menuitemtext; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>menulist</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuList"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menulist; --webkit-appearance: menulist; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>menulist-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuListButton"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menulist-button; --webkit-appearance: menulist-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td>要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。</td> - </tr> - <tr> - <td><code>menulist-text</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuListText"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menulist-text; --webkit-appearance: menulist-text; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>menulist-textfield</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuListTextfield"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menulist-textfield; --webkit-appearance: menulist-textfield; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td>要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)</td> - </tr> - <tr> - <td><code>menupopup</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuPopup"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menupopup; --webkit-appearance: menupopup; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>menuradio</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuRadio"> - <pre class="brush: css"> -div { color: black; --moz-appearance: menuradio; --webkit-appearance: menuradio; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>menuseparator</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMenuSeparator"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: menuseparator; --webkit-appearance: menuseparator; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>meter</code></td> - <td> - <div class="hidden" id="sampleMeter"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: meter; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Firefox</td> - <td>Firefox 64 で追加</td> - </tr> - <tr> - <td><code>meterbar</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMeterbar"> - <pre class="brush: css"> -div { color: black; --moz-appearance: meterbar; --webkit-appearance: meterbar; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 16 の新機能。代わりに <code>meter</code> を使用のこと</td> - </tr> - <tr> - <td><code>meterchunk</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleMeterchunk"> - <pre class="brush: css"> -div { color: black; --moz-appearance: meterchunk; --webkit-appearance: meterchunk; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 16 で追加。 Firefox 64 で削除。</td> - </tr> - <tr> - <td><code>number-input</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleNumberinput"> - <pre class="brush: css"> -div { color: black; --moz-appearance: number-input; --webkit-appearance: number-input; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>progress-bar</code></td> - <td> - <div class="hidden" id="sampleProgressBarWebkit"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: progress-bar; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Firefox</td> - <td>Firefox 64 で追加</td> - </tr> - <tr> - <td><code>progress-bar-value</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleProgressBarValueWebkit"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: progress-bar-value; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari</td> - <td></td> - </tr> - <tr> - <td><code>progressbar</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleProgressBar"> - <pre class="brush: css"> -div { color: black; --moz-appearance: progressbar; --webkit-appearance: progressbar; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>要素が進捗バーのようにスタイル付けられます。代わりに <code>progress-bar</code> を使用のこと</td> - </tr> - <tr> - <td><code>progressbar-vertical</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleProgressBarVertical"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: progressbar-vertical; --webkit-appearance: preogressbar-vertical; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>progresschunk</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleProgressChunk"> - <pre class="brush: css"> -div { color: black; --moz-appearance: progresschunk; --webkit-appearance: progresschunk; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>progresschunk-vertical</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleProgressChunkVertical"> - <pre class="brush: css"> -div { color: black; --moz-appearance: progresschunk-vertical; --webkit-appearance: progresschunk-vertical; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>push-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="samplePushButton"> - <pre class="brush: css"> -div{ color: black; -webkit-appearance: push-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>radio</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleRadio"> - <pre class="brush: css"> -div { color: black; --moz-appearance: radio; --webkit-appearance: radio; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td>要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。</td> - </tr> - <tr> - <td><code>radio-container</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleRadioContainer"> - <pre class="brush: css"> -div { color: black; --moz-appearance: radio-container; --webkit-appearance: radio-container; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。</td> - </tr> - <tr> - <td><code>radio-label</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleRadioLabel"> - <pre class="brush: css"> -div { color: black; --moz-appearance: radio-label; --webkit-appearance: radio-label; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>radiomenuitem</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleRadioMenuItem"> - <pre class="brush: css"> -div { color: black; --moz-appearance: radiomenuitem; --webkit-appearance: radiomenuitem; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>range</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleRange"> - <pre class="brush: css"> -div { color: black; --moz-appearance: range; --webkit-appearance: range; }</pre> - range - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>range-thumb</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleRangeThumb"> - <pre class="brush: css"> -div { color: black; --moz-appearance: range-thumb; --webkit-appearance: range-thumb; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>rating-level-indicator</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-rating-level-indicator"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: rating-level-indicator; --webkit-appearance: rating-level-indicator; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>resizer</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleResizer"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: resizer; --webkit-appearance: resizer; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 63 で削除</td> - </tr> - <tr> - <td><code>resizerpanel</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleResizerPanel"> - <pre class="brush: css"> -div { color: black; --moz-appearance: resizerpanel; --webkit-appearance: resizerpanel; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 63 で削除</td> - </tr> - <tr> - <td><code>scale-horizontal</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScaleHorizontal"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: scale-horizontal; --webkit-appearance: scale-horizontal; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scalethumbend</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleThumbEnd"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scalethumbend; --webkit-appearance: scalethumbend; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scalethumb-horizontal</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScaleThumbHorizontal"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: scalethumb-horizontal; --webkit-appearance: scalethumb-horizontal; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scalethumbstart</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScaleThumbStart"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scalethumbstart; --webkit-appearance: scalethumbstart; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scalethumbtick</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScaleThumbTick"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scalethumbtick; --webkit-appearance: scalethumbtick; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scalethumb-vertical</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScaleThumbVertical"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scalethumb-vertical; --webkit-appearance: scalethumb-vertical; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scale-vertical</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScaleVertical"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: scale-vertical; --webkit-appearance: scale-vertical; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scrollbarbutton-down</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScrollbarButtonDown"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scrollbarbutton-down; --webkit-appearance: scrollbarbutton-down; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 63 で削除</td> - </tr> - <tr> - <td><code>scrollbarbutton-left</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScrollbarButtonLeft"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scrollbarbutton-left; --webkit-appearance: scrollbarbutton-left; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 63 で削除</td> - </tr> - <tr> - <td><code>scrollbarbutton-right</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScrollbarButtonRight"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scrollbarbutton-right; --webkit-appearance: scrollbarbutton-right; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 63 で削除</td> - </tr> - <tr> - <td><code>scrollbarbutton-up</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScrollbarButtonUp"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scrollbarbutton-up; --webkit-appearance: scrollbarbutton-up; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 63 で削除</td> - </tr> - <tr> - <td><code>scrollbarthumb-horizontal</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScrollbarThumbHorizontal"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scrollbarthumb-horizontal; --webkit-appearance: scrollbarthumb-horizontal; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scrollbarthumb-vertical</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScrollbarThumbVertical"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scrollbarthumb-vertical; --webkit-appearance: scrollbarthumb-vertical; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scrollbartrack-horizontal</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScrollbarTrackHorizontal"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scrollbartrack-horizontal; --webkit-appearance: scrollbartrack-horizontal; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>scrollbartrack-vertical</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleScrollbarTrackVertical"> - <pre class="brush: css"> -div { color: black; --moz-appearance: scrollbartrack-vertical; --webkit-appearance: scrollbarbartrack-vertical; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td></td> - </tr> - <tr> - <td><code>searchfield</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSearchField"> - <pre class="brush: css"> -div { color: black; --moz-appearance: searchfield; --webkit-appearance: searchfield; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>searchfield-decoration</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-searchfield-decoration"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: searchfield-decoration; --webkit-appearance: searchfield-decoration; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}</td> - <td>Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>searchfield-results-decoration</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-searchfield-results-decoration"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: searchfield-results-decoration; --webkit-appearance: searchfield-results-decoration; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}</td> - <td>Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>searchfield-results-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-searchfield-results-button"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: searchfield-results-button; --webkit-appearance: searchfield-results-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}</td> - <td>Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>searchfield-cancel-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSearchFieldCancelButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: searchfield-cancel-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>snapshotted-plugin-overlay</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-snapshotted-plugin-overlay"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: snapshotted-plugin-overlay; --webkit-appearance: snapshotted-plugin-overlay; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>separator</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSeparator"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: separator; --webkit-appearance: separator; }</pre> - - <pre class="bruh: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>sheet</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSheet"> - <pre class="brush: css"> -div { color: black; --moz-appearance: sheet; --webkit-appearance: sheet; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}</td> - <td>None</td> - <td></td> - </tr> - <tr> - <td><code>slider-horizontal</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSliderHorizontal"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: slider-horizontal; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>slider-vertical</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSliderVertical"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: slider-vertical; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>sliderthumb-horizontal</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSliderThumbHorizontal"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: slider-thumb-horizontal; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>sliderthumb-vertical</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSliderThumbVertical"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: slider-thumb-vertical; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>spinner</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSpinner"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: spinner; --webkit-appearance: spinner; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>spinner-downbutton</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSpinnerDownbutton"> - <pre class="brush: css"> -div { color: black; --moz-appearance: spinner-downbutton; --webkit-appearance: spinner-downbutton; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>spinner-textfield</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSpinnerTextfield"> - <pre class="brush: css"> -div { color: black; --moz-appearance: spinner-textfield; --webkit-appearance: spinner-textfield; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>spinner-upbutton</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSpinnerUpbutton"> - <pre class="brush: css"> -div { color: black; --moz-appearance: spinner-upbutton; --webkit-appearance: spinner-upbutton; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>splitter</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSplitter"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: splitter; --webkit-appearance: splitter; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>square-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleSquareButton"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: square-button; --webkit-appearance: square-button; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}</td> - <td>Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>statusbar</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleStatusBar"> - <pre class="brush: css"> -div { color: black; --moz-appearance: statusbar; --webkit-appearance: statusbar; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>statusbarpanel</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleStatusBarPanel"> - <pre class="brush: css"> -div { color: black; --moz-appearance: statusbarpanel; --webkit-appearance: statusbarpanel; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>tab</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTab"> - <pre class="brush: css"> -div { color: black; height: 20px; --moz-appearance: tab; --webkit-appearance: tab; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>tabpanel</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTabPanel"> - <pre class="brush: css"> -div { color: black; --moz-appearance: tabpanel; --webkit-appearance: tabpanel; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>tabpanels</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTabPanels"> - <pre class="brush: css"> -div { color: black; --moz-appearance: tabpanels; --webkit-appearance: tabpanels; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>tab-scroll-arrow-back</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTabScrollArrowBack"> - <pre class="brush: css"> -div { color: black; --moz-appearance: tab-scroll-arrow-back; --webkit-appearance: tab-scroll-arrow-back; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>tab-scroll-arrow-forward</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTabScrollArrowForward"> - <pre class="brush: css"> -div { color: black; --moz-appearance: tab-scroll-arrow-forward; --webkit-appearance: tab-scroll-arrow-forward; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>textarea</code></td> - <td> - <div class="hidden" id="sampleTextArea"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: textarea; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>textfield</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTextField"> - <pre class="brush: css"> -div { color: black; --moz-appearance: textfield; --webkit-appearance: textfield; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}</td> - <td>Firefox Chrome Safari Edge</td> - <td></td> - </tr> - <tr> - <td><code>textfield-multiline</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTextfieldMultiline"> - <pre class="brush: css"> -div { color: black; --moz-appearance: textfield-multiline; --webkit-appearance: textfield-multiline; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>代わりに <code>textarea</code> を使用のこと</td> - </tr> - <tr> - <td><code>toolbar</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleToolbar"> - <pre class="brush: css"> -div { color: black; --moz-appearance: toolbar; --webkit-appearance: toolbar; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>toolbarbutton</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleToolbarButton"> - <pre class="brush: css"> -div { color: black; --moz-appearance: toolbarbutton; --webkit-appearance: toolbarbutton; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>toolbarbutton-dropdown</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleToolbarButtonDropdown"> - <pre class="brush: css"> -div { color: black; --moz-appearance: toolbarbutton-dropdown; --webkit-appearance: toolbarbutton-dropdown; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>toolbargripper</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleToolbarGripper"> - <pre class="brush: css"> -div { color: black; --moz-appearance: toolbargripper; --webkit-appearance: toolbargripper; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>toolbox</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleToolbox"> - <pre class="brush: css"> -div { color: black; --moz-appearance: toolbox; --webkit-appearance: toolbox; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>tooltip</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTooltip"> - <pre class="brush: css"> -div { color: black; --moz-appearance: tooltip; --webkit-appearance: tooltip; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>treeheader</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTreeHeader"> - <pre class="brush: css"> -div { color: black; --moz-appearance: treeheader; --webkit-appearance: treeheader; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>treeheadercell</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTreeHeaderCell"> - <pre class="brush: css"> -div { color: black; height:20px; --moz-appearance: treeheadercell; --webkit-appearance: treeheadercell; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>treeheadersortarrow</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTreeHeaderSortArrow"> - <pre class="brush: css"> -div { color: black; --moz-appearance: treeheadersortarrow; --webkit-appearance: treeheadersortarrow; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>treeitem</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTreeItem"> - <pre class="brush: css"> -div { color: black; --moz-appearance: treeitem; --webkit-appearance: treeitem; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>treeline</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTreeLine"> - <pre class="brush: css"> -div { color: black; --moz-appearance: treeline; --webkit-appearance: treeline; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>treetwisty</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTreeTwisty"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: treetwisty; --webkit-appearance: treetwisty; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>treetwistyopen</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTreeTwistyOpen"> - <pre class="brush: css"> -div { color: transparent; --moz-appearance: treetwistyopen; --webkit-appearance: treetwistyopen; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>treeview</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleTreeView"> - <pre class="brush: css"> -div { color: black; --moz-appearance: treeview; --webkit-appearance: treeview; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>relevancy-level-indicator</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sample-relevancy-level-indicator"> - <pre class="brush: css"> -div{ color: black; --moz-appearance: relevancy-level-indicator; --webkit-appearance: relevancy-level-indicator; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}</td> - <td>Safari</td> - <td></td> - </tr> - <tr> - <td><code>-moz-win-borderless-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}</td> - <td> - <div class="hidden" id="sampleWinBorderlessGlass"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-win-borderless-glass; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。</td> - </tr> - <tr> - <td><code>-moz-win-browsertabbar-toolbox</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWinBrowsertabbarToolbox"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-win-browsertabbar-toolbox; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。</td> - </tr> - <tr> - <td><code>-moz-win-communicationstext</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWinCommunicationstext"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-win-communicationstext; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-win-communications-toolbox</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWinCommunicationsToolbox"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-win-communications-toolbox; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は <code>-moz-win-communicationstext</code> です。</td> - </tr> - <tr> - <td><code>-moz-win-exclude-glass</code> {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}}</td> - <td> - <div class="hidden" id="sampleWinExcludeGlass"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-win-exclude-glass; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。</td> - </tr> - <tr> - <td><code>-moz-win-glass</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWinGlass"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-win-glass; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。</td> - </tr> - <tr> - <td><code>-moz-win-media-toolbox</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWinMediaToolbox"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-win-media-toolbox; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は <code>-moz-win-mediatext</code> です。</td> - </tr> - <tr> - <td><code>-moz-window-button-box</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowButtonBox"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-button-box; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-button-box-maximized</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowButtonBoxMaximized"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-button-box-maximized; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-button-close</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowButtonClose"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-button-close; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-button-maximize</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowButtonMaximize"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-button-maximize; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-button-minimize</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowButtonMinimize"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-button-minimize; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-button-restore</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowButtonRestore"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-button-restore; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-frame-bottom</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowFrameBottom"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-frame-bottom; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-frame-left</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowFrameLeft"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-frame-left; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-frame-right</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowFrameRight"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-frame-right; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-titlebar</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowTitlebar"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-titlebar; }</pre> - - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-moz-window-titlebar-maximized</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleWindowTitlebarMaximized"> - <pre class="brush: css"> -div { color: black; --moz-appearance: -moz-window-titlebar-maximized; }</pre> + <tbody> + <tr> + <th>値</th> + <th>ブラウザー</th> + <th>説明</th> + </tr> + <tr> + <td><code>none</code></td> + <td>Firefox Chrome Safari Edge</td> + <td>特別なスタイルは適用されません。これが既定です。</td> + </tr> + <tr> + <td><code>auto</code></td> + <td>Firefox Chrome</td> + <td> + ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では `none` として動作します。 + </td> + </tr> + <tr> + <td><code>menulist-button</code></td> + <td>Firefox Chrome Safari Edge</td> + <td> + この要素がメニューリストを開くことができるようなボタンとしてのスタイルになります。 + </td> + </tr> + <tr> + <td><code>textfield</code></td> + <td>Firefox Chrome Safari Edge</td> + <td></td> + </tr> + <tr> + <td colspan="3"> + 以下の値は <code>auto</code> と同等のものとして扱われます。 + </td> + </tr> + <tr> + <td><code>button</code></td> + <td>Firefox Chrome Safari Edge</td> + <td>この要素がボタンのように表示されます。</td> + </tr> + <tr> + <td><code>checkbox</code></td> + <td>Firefox Chrome Safari Edge</td> + <td> + この要素がチェックボックスのように表示されます。実際の「チェックボックス」の部分のみが含まれます。 + </td> + </tr> + <tr> + <td><code>listbox</code></td> + <td>Firefox Chrome Safari Edge</td> + <td></td> + </tr> + <tr> + <td><code>menulist</code></td> + <td>Firefox Chrome Safari Edge</td> + <td></td> + </tr> + <tr> + <td><code>meter</code></td> + <td>Chrome Safari Firefox</td> + <td></td> + </tr> + <tr> + <td><code>progress-bar</code></td> + <td>Chrome Safari Firefox</td> + <td></td> + </tr> + <tr> + <td><code>push-button</code></td> + <td>Chrome Safari Edge</td> + <td></td> + </tr> + <tr> + <td><code>radio</code></td> + <td>Firefox Chrome Safari Edge</td> + <td> + この要素がラジオボタンのように表示されます。実際の「ラジオボタン」の部分のみが含まれます。 + </td> + </tr> + <tr> + <td><code>searchfield</code></td> + <td>Firefox Chrome Safari Edge</td> + <td></td> + </tr> + <tr> + <td><code>slider-horizontal</code></td> + <td>Chrome Safari Edge</td> + <td></td> + </tr> + <tr> + <td><code>square-button</code></td> + <td>Chrome Safari Edge</td> + <td></td> + </tr> + <tr> + <td><code>textarea</code></td> + <td>Firefox Chrome Safari Edge</td> + <td></td> + </tr> + </tbody> +</table> - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}</td> - <td>Firefox</td> - <td>Firefox 64 で削除</td> - </tr> - <tr> - <td><code>-apple-pay-button</code> {{Non-standard_Inline}}</td> - <td> - <div class="hidden" id="sampleApplePayButton"> - <pre class="brush: css"> -div{ color: black; --webkit-appearance: -apple-pay-button; }</pre> +#### 標準外のキーワード + +以下の値は接頭辞つきのプロパティのみで実装されていますが、標準の **`appearance`** プロパティにはないものです。 + +| 値 | ブラウザー | 説明 | +| -------------------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `attachment` | Safari | | +| `borderless-attachment` | Safari | | +| `button-bevel` | Firefox Chrome Safari Edge | | +| `caps-lock-indicator` | Safari Edge | | +| `caret` | Firefox Chrome Safari Edge | | +| `checkbox-container` | Firefox | この要素がチェックボックスのコンテナーのように表示されます。一部のプラットフォームではプリライティングの背景効果を含むことがあります。通常は、ラベルとチェックボックスを含みます。| +| `checkbox-label` | Firefox | | +| `checkmenuitem` | Firefox | | +| `color-well` | Safari | `input type=color` | +| `continuous-capacity-level-indicator` | Safari | | +| `default-button` | Safari Edge | | +| `discrete-capacity-level-indicator` | Safari | | +| `inner-spin-button` | Firefox Chrome Safari | | +| `image-controls-button` | Safari | | +| `list-button` | Safari | データリスト | +| `listitem` | Firefox Chrome Safari Edge | | +| `media-enter-fullscreen-button` | Chrome Safari | | +| `media-exit-fullscreen-button` | Chrome Safari | | +| `media-fullscreen-volume-slider` | Safari | | +| `media-fullscreen-volume-slider-thumb` | Safari | | +| `media-mute-button` | Chrome Safari Edge | | +| `media-play-button` | Chrome Safari Edge | | +| `media-overlay-play-button` | Chrome Safari | | +| `media-return-to-realtime-button` | Safari | | +| `media-rewind-button` | Safari | | +| `media-seek-back-button` | Safari Edge | | +| `media-seek-forward-button` | Safari Edge | | +| `media-toggle-closed-captions-button` | Chrome Safari | | +| `media-slider` | Chrome Safari Edge | | +| `media-sliderthumb` | Chrome Safari Edge | | +| `media-volume-slider-container` | Chrome Safari | | +| `media-volume-slider-mute-button` | Safari | | +| `media-volume-slider` | Chrome Safari | | +| `media-volume-sliderthumb` | Chrome Safari | | +| `media-controls-background` | Chrome Safari | | +| `media-controls-dark-bar-background` | Safari | | +| `media-controls-fullscreen-background` | Chrome Safari | | +| `media-controls-light-bar-background` | Safari | | +| `media-current-time-display` | Chrome Safari | | +| `media-time-remaining-display` | Chrome Safari | | +| `menulist-text` | Firefox Chrome Safari Edge | | +| `menulist-textfield` | Firefox Chrome Safari Edge | この要素がメニューリストのテキストフィールドとしてスタイル付けされます。 (Windows プラットフォームでは実装されていません) | +| `meterbar` | Firefox | 代わりに `meter` を使用してください。 | +| `number-input` | Firefox | | +| `progress-bar-value` | Chrome Safari | | +| `progressbar` | Firefox | この要素がプログレスバーのようにスタイル付けされます。代わりに `progress-bar` を使用してください。 | +| `progressbar-vertical` | Firefox | | +| `range` | Firefox | | +| `range-thumb` | Firefox | | +| `rating-level-indicator` | Safari | | +| `relevancy-level-indicator` | Safari | | +| `scale-horizontal` | Firefox | | +| `scalethumbend` | Firefox | | +| `scalethumb-horizontal` | Firefox | | +| `scalethumbstart` | Firefox | | +| `scalethumbtick` | Firefox | | +| `scalethumb-vertical` | Firefox | | +| `scale-vertical` | Firefox | | +| `scrollbarthumb-horizontal` | Firefox | | +| `scrollbarthumb-vertical` | Firefox | | +| `scrollbartrack-horizontal` | Firefox | | +| `scrollbartrack-vertical` | Firefox | | +| `searchfield-decoration` | Safari Edge | | +| `searchfield-results-decoration` | Chrome Safari Edge | (Windows 7 の Chrome 51 で動作) | +| `searchfield-results-button` | Safari Edge | | +| `searchfield-cancel-button` | Chrome Safari Edge | | +| `snapshotted-plugin-overlay` | Safari | | +| `sheet` | None | | +| `slider-vertical` | Chrome Safari Edge | | +| `sliderthumb-horizontal` | Chrome Safari Edge | | +| `sliderthumb-vertical` | Chrome Safari Edge | | +| `textfield-multiline` | Firefox | 代わりに `textarea` を使用してください。 | +| `-apple-pay-button` | Safari | **iOS および macOS のみ**。ウェブでは iOS 10.1 および macOS 10.12.1 から使用可能。 | + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### メニューリストボタンのように見える要素を作成 + +```css +.exampleone { +-webkit-appearance: menulist-button; + -moz-appearance: menulist-button; + appearance: menulist-button; +} +``` - <pre class="brush: html"> -<div>Lorem</div></pre> - </div> - {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}</td> - <td>Safari</td> - <td><strong>iOS and macOS only</strong>. Available on the web starting in iOS 10.1 and macOS 10.12.1</td> - </tr> - </tbody> -</table> +<h3 id="Apply_custom_styling">独自のスタイル付けの適用</h3> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +#### HTML -{{CSSSyntax}} +```html +<p><input type="checkbox" id="check"><label for="check">同意します</label></p> +``` -<h2 id="Examples" name="Examples">例</h2> +#### CSS -<p>次のようにすると、要素を Firefox のツールバーボタンのように見せます。</p> +```css +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + vertical-align: middle; +} -<pre class="brush: css">.exampleone { - -moz-appearance: toolbarbutton; +input[type="checkbox"] { + border: 2px solid #555; + width: 20px; + height: 20px; + padding: 4px; +} +input[type="checkbox"]:checked { + background: #555; + background-clip: content-box; +} +label { + display: inline-block; + vertical-align: middle; + margin: 0 0 -2px 8px; } -</pre> +``` -<p>カスタムスタイリングをラジオボタンとチェックボックス適用するための <code>appearance:none</code> の使用例を示す例は、<a href="http://jsfiddle.net/go392m5s/">このJSFiddle</a>も参照してください。</p> +#### 結果 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{EmbedLiveSample("Apply_custom_styling", 1050, 100)}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}</td> - <td>{{Spec2("CSS4 Basic UI")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{CSSInfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.appearance")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a class="external" href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance">CSS 3 Basic User Interface での <code>appearance</code> の定義</a> (2004-05-11より Candidate Recommendation)。</li> - <li><a class="external" href="http://wiki.csswg.org/spec/css4-ui#dropped-css3-features">UI 仕様 4 から削除された CSS3 機能</a></li> -</ul> +- [CSS 3 基本ユーザーインターフェイスでの `appearance` の定義](https://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance) (2004-05-11 より勧告候補)。 +- [UI 仕様 4 から削除された CSS3 機能](https://wiki.csswg.org/spec/css4-ui#dropped-css3-features) diff --git a/files/ja/web/css/box-sizing/index.md b/files/ja/web/css/box-sizing/index.md index 49d9c8e731..42e5f1e008 100644 --- a/files/ja/web/css/box-sizing/index.md +++ b/files/ja/web/css/box-sizing/index.md @@ -4,79 +4,92 @@ slug: Web/CSS/box-sizing tags: - Boxes - CSS - - CSS Box Model - - CSS Property - - CSS プロパティ - CSS ボックスモデル + - CSS プロパティ - Reference - border-box - box model - box-sizing - content-box - height + - recipe:css-property - size - width +browser-compat: css.properties.box-sizing translation_of: Web/CSS/box-sizing --- -<p>{{CSSRef}}</p> +{{CSSRef}} + +**`box-sizing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の全体の幅と高さをどのように計算するのかを設定します。 + +{{EmbedInteractiveExample("pages/css/box-sizing.html")}} + +[CSS ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)の既定では、要素に割り当てられた `width` および `height` は、要素のコンテンツ領域のみに適用されます。要素に境界やパディングがある場合、画面に表示される矩形の大きさは `width` および `height` にこれらを加えたものになります。つまり、`width` および `height` を設定する際には、境界やパディングが加えられるように値を調整しなければなりません。例えば、`width: 25%;` で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。 + +`box-sizing` プロパティは上記の振る舞いを調整するために使用できます。 + +- `content-box` は CSS の box-sizing における既定の振る舞いです。ある要素の幅を 100 ピクセルに設定した場合、その要素のコンテンツ領域の幅が 100 ピクセルになり、境界やパディングを加えたものが最終的に表示される幅になり、要素が 100px よりも広くなります。 +- `border-box` は、境界およびパディングを、要素に指定した width および height の中で取るようブラウザーに指示します。要素の width を 100 ピクセルに設定した場合、100 ピクセルの中に追加した境界やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小されます。これで普通は、要素に対するサイズ設定をもっと簡単になります。 + + `box-sizing: border-box` はブラウザーが {{htmlelement("table")}}, {{htmlelement("select")}}, {{htmlelement("button")}} の各要素、また {{htmlelement("input")}} 要素のうち type が `{{htmlelement("input/radio", "radio")}}`, `{{htmlelement("input/checkbox", "checkbox")}}`, `{{htmlelement("input/reset", "reset")}}`, `{{htmlelement("input/button", "button")}}`, `{{htmlelement("input/submit", "submit")}}`, `{{htmlelement("input/color", "color")}}`, `{{htmlelement("input/search", "search")}}` であるものに対して使用する既定のスタイル付けです。 + +> **Note:** 要素をレイアウトする際には、 `box-sizing` を `border-box` に設定しておくと便利です。これにより、要素の寸法の扱いがとても簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 `position: relative` または `position: absolute` を使用する場合、 `box-sizing: content-box` を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。 -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>box-sizing</code></strong> プロパティは、要素の全体の幅と高さをどのように計算するのかを設定します。</span></p> +## 構文 -<div>{{EmbedInteractiveExample("pages/css/box-sizing.html")}}</div> +```css +box-sizing: border-box; +box-sizing: content-box; -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +/* グローバル値 */ +box-sizing: inherit; +box-sizing: initial; +box-sizing: revert; +box-sizing: unset; +``` -<p><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS ボックスモデル</a>の既定では、要素に割り当てられた width および height は、要素のコンテンツ領域のみに適用されます。要素に境界線やパディングがある場合、画面にレンダリングされる矩形の大きさは width および height にこれらを加えたものになります。つまり、 width および height を設定する際には、境界線やパディングが加えられるように値を調整しなければなりません。例えば、 <code>width: 25%;</code> で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。</p> +`box-sizing` プロパティは、以下のいずれか 1 つのキーワードを選択して定義します。 -<p><code>box-sizing</code> プロパティは上記の振る舞いを調整するために使用できます。</p> +### 値 -<ul> - <li><code>content-box</code> は CSS box-sizing の既定の振る舞いです。要素の幅を100ピクセルに設定した場合、要素のコンテンツ領域の幅は100ピクセルになり、境界線やパディングを加えたものが最終的にレンダリングされる幅になり、要素が100pxよりも広くなります。</li> - <li><code>border-box</code> は、要素に指定した width および height の中で境界線およびパディングを取るようにブラウザーに指示します。要素の width を100ピクセルに設定した場合、100ピクセルの中に追加した境界線やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小します。これで普通は、要素に対するサイズ設定をもっと簡単になります。</li> -</ul> +- `content-box` -<div class="blockIndicator note"> -<p><strong>注:</strong> 要素をレイアウトする際には、 <code>box-sizing</code> を <code>border-box</code> に設定しておくと便利です。これにより、要素の寸法の扱いが非常に簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 <code>position: relative</code> または <code>position: absolute</code> を使用する場合、 <code>box-sizing: content-box</code> を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。</p> -</div> + - : これは、 CSS 標準で規定されている初期値および既定値です。 {{Cssxref("width")}} および {{Cssxref("height")}} プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界、マージン領域は含みません。例えば `.box {width: 350px; border: 10px solid black;}` とすると 370px の幅のボックスを描画します。 -<h2 id="Syntax" name="Syntax">構文</h2> + この場合、それぞれの要素の寸法は、*幅 = コンテンツの幅*、*高さ = コンテンツの高さ*として計算されます。 (境界やパディングは計算に含まれません。) -<p><code>box-sizing</code> プロパティは、以下のいずれか1つのキーワードを選択して定義します。</p> +- `border-box` -<h3 id="Values" name="Values">値</h3> + - : {{Cssxref("width")}} および {{Cssxref("height")}} プロパティは、コンテンツ、パディング、境界の各領域を含みますが、マージンは含みません。なお、パディングと境界はボックスの内側に置かれることに注意してください。例えば `.box {width: 350px; border: 10px solid black;}` とすると、ボックスの幅が 350px、コンテンツ領域の幅が 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、`border-box` を使用して要素を非表示にすることはできません。 -<dl> - <dt><code>content-box</code></dt> - <dd>これは、 CSS 標準仕様で規定されている初期値および既定値です。 {{Cssxref("width")}} および {{Cssxref("height")}} プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界線、マージン領域を含みません。例えば <code>.box {width: 350px; border: 10px solid black;}</code> は 370px の幅のボックスを描画します。</dd> - <dd>この場合、それぞれの要素の寸法は、 <em>幅 = コンテンツの幅</em>、<em>高さ = コンテンツの高さ</em> として計算されます（境界線やパディングの値を除く）。</dd> - <dt><code>border-box</code></dt> - <dd>{{Cssxref("width")}} および {{Cssxref("height")}} プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。なお、パディングと境界線はボックスの内側に置かれることに注意してください。例えば <code>.box {width: 350px; border: 10px solid black;}</code> は、ブラウザーでボックスの幅が 350px、コンテンツ領域の幅 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、要素を非表示にするために <code>border-box</code> を使用することはできません。</dd> - <dd>この場合、それぞれの要素の寸法は、 <em>幅 = 境界線 + パディング + コンテンツの幅</em>、 <em>高さ = 境界線 + パディング + コンテンツの高さ</em> として計算されます。</dd> -</dl> + この場合、それぞれの要素の寸法は、*幅 = 境界 + パディング + コンテンツの幅*、*高さ = 境界 + パディング + コンテンツの高さ*として計算されます。 -<h2 id="公式定義">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Box_sizes_with_content-box_and_border-box" name="Box_sizes_with_content-box_and_border-box">content-box と border-box のボックスサイズ</h3> +<h3 id="Box_sizes_with_content-box_and_border-box">content-box と border-box のボックスサイズ</h3> -<p>この例では、2つの <code>box-sizing</code> の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。</p> +この例では、2つの `box-sizing` の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div class="content-box">Content box</div> -<br> -<div class="border-box">Border box</div></pre> +```html +<div class="content-box">Content box</div> +<br> +<div class="border-box">Border box</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">div { +```css +div { width: 160px; height: 80px; padding: 20px; @@ -99,37 +112,20 @@ translation_of: Web/CSS/box-sizing コンテンツ領域の幅: 160px - (2 * 20px) - (2 * 8px) = 104px コンテンツ領域の高さ: 80px - (2 * 20px) - (2 * 8px) = 24px */ } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}</p> +{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}} -<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('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.box-sizing")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデル</a></li> -</ul> +- [CSS 基本ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) diff --git a/files/ja/web/css/css_basic_user_interface/index.md b/files/ja/web/css/css_basic_user_interface/index.md index c8e3a80d85..98740f9d8b 100644 --- a/files/ja/web/css/css_basic_user_interface/index.md +++ b/files/ja/web/css/css_basic_user_interface/index.md @@ -4,71 +4,45 @@ slug: Web/CSS/CSS_Basic_User_Interface tags: - CSS - CSS 基本ユーザーインターフェイス - - Reference + - ガイド - 概要 + - Reference translation_of: Web/CSS/CSS_Basic_User_Interface --- -<div>{{CSSRef}}</div> - -<p><ruby><strong>CSS 基本ユーザーインターフェイス</strong><rp> (</rp><rt>CSS Basic User Interface</rt><rp>) </rp></ruby>は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{CSSxRef("appearance")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("box-sizing")}}</li> - <li>{{CSSxRef("cursor")}}</li> - <li>{{CSSxRef("ime-mode")}} {{Deprecated_Inline}}</li> - <li>{{CSSxRef("nav-down")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("nav-left")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("nav-right")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("nav-up")}} {{Experimental_Inline}}</li> - <li>{{CSSxRef("outline")}}</li> - <li>{{CSSxRef("outline-width")}}</li> - <li>{{CSSxRef("outline-style")}}</li> - <li>{{CSSxRef("outline-color")}}</li> - <li>{{CSSxRef("outline-offset")}}</li> - <li>{{CSSxRef("resize")}}</li> - <li>{{CSSxRef("text-overflow")}}</li> - <li>{{CSSxRef("user-select")}} {{Experimental_Inline}}</li> -</ul> -</div> - -<h2 id="Guides" name="Guides">ガイド</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property"><code>cursor</code> プロパティでの URL 値の使用</a></dt> - <dd>カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。</dd> -</dl> - -<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("CSS4 Basic UI")}}</td> - <td>{{Spec2("CSS4 Basic UI")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Basic UI")}}</td> - <td>{{Spec2("CSS3 Basic UI")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "ui.html")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{CSSRef}} + +**CSS 基本ユーザーインターフェイス** (CSS Basic User Interface) は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。 + +## リファレンス + +## プロパティ + +- {{CSSxRef("appearance")}} {{Experimental_Inline}} +- {{CSSxRef("box-sizing")}} +- {{CSSxRef("cursor")}} +- {{CSSxRef("ime-mode")}} {{Deprecated_Inline}} +- {{CSSxRef("nav-down")}} {{Experimental_Inline}} +- {{CSSxRef("nav-left")}} {{Experimental_Inline}} +- {{CSSxRef("nav-right")}} {{Experimental_Inline}} +- {{CSSxRef("nav-up")}} {{Experimental_Inline}} +- {{CSSxRef("outline")}} +- {{CSSxRef("outline-width")}} +- {{CSSxRef("outline-style")}} +- {{CSSxRef("outline-color")}} +- {{CSSxRef("outline-offset")}} +- {{CSSxRef("resize")}} +- {{CSSxRef("text-overflow")}} +- {{CSSxRef("user-select")}} + +## ガイド + +- [`cursor` プロパティでの URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property) + - : カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| --------------------------------- | -------------------------- | -------- | +| {{SpecName("CSS4 Basic UI")}} | {{Spec2("CSS4 Basic UI")}} | | +| {{SpecName("CSS3 Basic UI")}} | {{Spec2("CSS3 Basic UI")}} | | +| {{SpecName("CSS2.1", "ui.html")}} | {{Spec2("CSS2.1")}} | 初回定義 | diff --git a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md index 98b56ee788..cb2fcddd24 100644 --- a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md +++ b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md @@ -4,37 +4,43 @@ slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - Gecko - - Guide + - ガイド - NeedsUpdate - Reference translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property --- -<div>{{cssref}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Mozilla/Gecko">Gecko</a> 1.8 は CSS の{{CSSxRef("cursor")}} プロパティで、 URL の値を Windows と Linux で対応しています。 Mac の対応は Gecko 2 (<a href="/ja/docs/Mozilla/Firefox/Releases/4">Firefox 4</a>) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。</p> +[Gecko](/ja/docs/Mozilla/Gecko) 1.8 は URL の値を CSS の{{CSSxRef("cursor")}} プロパティで、 Windows と Linux で対応しています。 Mac の対応は Gecko 2 ([Firefox 4](/ja/docs/Mozilla/Firefox/Releases/4)) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<p>基本 (CSS 2.1) の基本的な記述は次の通りです。</p> +基本 (CSS 2.1) の基本的な記述は次の通りです。 -<pre class="syntaxbox notranslate">{{CSSxRef("cursor")}}: <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> {{CSSxRef("<url>")}} , <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Asterisk" title="Asterisk: the entity may occur zero, one or several times">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Values")}}</pre> +```css +{{CSSxRef("cursor")}}: [ {{CSSxRef("url()")}} , ]* {{CSSxRef("cursor", "<var><keyword></var>", "#Values")}} +``` -<p>つまり、0個以上の URL が (カンマ区切りで) 指定されることがありますが、 <code>auto</code> や <code>pointer</code> などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。</p> +つまり、0 個以上の URL を (カンマ区切りで) 指定することがありますが、 `auto` や `pointer` などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。 -<p>例えば次のような値が有効です。</p> +例えば次のような値が有効です。 -<pre class="brush: css notranslate">cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;</pre> +```css +cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; +``` -<p>始めに <em>foo.cur</em> を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、 <em>bar.gif</em> を読み込もうとし、どちらも利用できない場合は <code>auto</code> が使用されます。</p> +始めに _foo.cur_ を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、_bar.gif_ を読み込もうとし、どちらも利用できない場合は `auto` が使用されます。 -<p>Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。</p> +Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。 -<pre class="syntaxbox notranslate">{{CSSxRef("cursor")}}: <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> {{CSSxRef("<uri>")}} <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[</a> <x> <y> <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Question_mark" title="Question mark: the entity is optional">?</a> , <a href="/ja/docs/CSS/Value_definition_syntax#Brackets" title="Brackets: enclose several entities, combinators, and multipliers to transform them as a single component">]</a><a href="/ja/docs/CSS/Value_definition_syntax#Asterisk" title="Asterisk: the entity may occur zero, one or several times">*</a> {{CSSxRef("cursor", "<var><keyword></var>", "#Values")}} -</pre> +```css +{{CSSxRef("cursor")}}: [ {{CSSxRef("url()")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<var><keyword></var>", "#Values")}} +``` -<p>これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。</p> +これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。 -<pre class="brush: css; notranslate">.foo { +```css +.foo { cursor: auto; cursor: url(cursor1.png) 4 12, auto; } @@ -45,75 +51,73 @@ translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor } /* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */ -</pre> +``` -<p>初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。</p> +初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。 <h2 id="Limitations" name="Limitations">制限</h2> -<p>Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。</p> +Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。 -<div class="blockIndicator note"> -<p><strong>Note:</strong> Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。</p> -</div> +> **Note:** Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。 -<p>Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。</p> +Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。 -<p>(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)</p> +(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。) -<p>Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。</p> +Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。 -<p>カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。</p> +カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>Microsoft Internet Explorer 6.0 も <code>cursor</code> プロパティに対応しています。しかし、次の制限があります。</p> +Microsoft Internet Explorer 6.0 も `cursor` プロパティに対応しています。しかし、次の制限があります。 -<ul> - <li>IE は CUR と ANI 形式のみに対応。</li> - <li>IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。</li> -</ul> +- IE は CUR と ANI 形式のみに対応。 +- IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。 <table class="standard-table"> - <tbody> - <tr> - <th>ブラウザー</th> - <th>最初期バージョン</th> - <th>形式 (例)</th> - <th>X-Y座標有効範囲</th> - </tr> - <tr> - <td>Internet Explorer</td> - <td><strong>6.0</strong></td> - <td><code>.cur | .ani</code></td> - <td>---</td> - </tr> - <tr> - <td>Firefox (Gecko), Windows および Linux</td> - <td><strong>1.5</strong> (1.8)</td> - <td><code>.cur | .png | .gif | .jpg</code></td> - <td>1.5 (1.8)</td> - </tr> - <tr> - <td>Firefox (Gecko)</td> - <td><strong>4.0</strong> (2.0)</td> - <td><code>.cur | .png | .gif | .jpg | .svg</code></td> - <td>(Gecko 2.0)</td> - </tr> - <tr> - <td>Opera</td> - <td>---</td> - <td>---</td> - <td>---</td> - </tr> - <tr> - <td rowspan="2">Safari (Webkit)</td> - <td><strong>3.0</strong> (522-523)</td> - <td><code>.cur | .png | .gif | .jpg</code></td> - <td rowspan="2">3.0 (522-523)</td> - </tr> - <tr> - <td colspan="2">OS X 10.5 から、 Safari (Mac) は <code>.cur</code> に対応しています。</td> - </tr> - </tbody> + <tbody> + <tr> + <th>ブラウザー</th> + <th>最初期バージョン</th> + <th>形式 (例)</th> + <th>X-Y 座標</th> + </tr> + <tr> + <td>Internet Explorer</td> + <td><strong>6.0</strong></td> + <td><code>.cur | .ani</code></td> + <td>---</td> + </tr> + <tr> + <td>Firefox (Gecko), Windows および Linux</td> + <td><strong>1.5</strong> (1.8)</td> + <td><code>.cur | .png | .gif | .jpg</code></td> + <td>1.5 (1.8)</td> + </tr> + <tr> + <td>Firefox (Gecko)</td> + <td><strong>4.0</strong> (2.0)</td> + <td><code>.cur | .png | .gif | .jpg | .svg</code></td> + <td>(Gecko 2.0)</td> + </tr> + <tr> + <td>Opera</td> + <td>---</td> + <td>---</td> + <td>---</td> + </tr> + <tr> + <td rowspan="2">Safari (Webkit)</td> + <td><strong>3.0</strong> (522-523)</td> + <td><code>.cur | .png | .gif | .jpg</code></td> + <td rowspan="2">3.0 (522-523)</td> + </tr> + <tr> + <td colspan="2"> + OS X 10.5 から、 Safari (Mac) は <code>.cur</code> ファイルに対応しています。 + </td> + </tr> + </tbody> </table> diff --git a/files/ja/web/css/cursor/index.md b/files/ja/web/css/cursor/index.md index cd3cb00f97..0a92415576 100644 --- a/files/ja/web/css/cursor/index.md +++ b/files/ja/web/css/cursor/index.md @@ -4,32 +4,27 @@ slug: Web/CSS/cursor tags: - Arrow - CSS - - CSS Property - CSS プロパティ - - Cursor - - Custom Cursor + - カーソル + - カスタムカーソル - Reference - UI - - mouse - - pointer - - 'recipe:css-property' - - カスタムカーソル - - カーソル - - ポインター - マウス + - ポインター + - recipe:css-property +browser-compat: css.properties.cursor translation_of: Web/CSS/cursor --- -<p>{{CSSRef}}</p> - -<p><strong><code>cursor</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div> +**`cursor`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/css/cursor.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ cursor: pointer; cursor: auto; @@ -43,242 +38,308 @@ cursor: url(cursor2.png) 2 2, pointer; /* グローバル値 */ cursor: inherit; cursor: initial; +cursor: revert; cursor: unset; -</pre> - -<p> <code>cursor</code> プロパティはゼロ個以上の <code><a href="#<url>"><url></a></code> をカンマで区切ったものと、それに続く必須の<a href="#Keyword values">キーワード値</a>によって指定します。それぞれの <code><url></code> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。</p> - -<p>それぞれの <code><url></code> には二つの空白で区切った数値を続けることができ、 <code><a href="#<x> <y>"><x><y></a></code> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。</p> - -<p>例えば、これは <code><url></code> 値を使用して二つの画像を指定し、 <code><x><y></code> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは <code>progress</code> キーワードで代替されるように指定しています。</p> - -<pre class="brush: css notranslate">cursor: url(one.svg), url(two.svg) 5 5, progress;</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code id="<url>"><url></code></dt> - <code>url(…)</code> の形式か、又はカンマ区切りのリスト <code>url(…), url(…), …</code> で画像の URL を指定します。複数の {{cssxref("<url>")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した <code>url()</code> 形式の記述は無効となります。詳細は <a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">cursor プロパティにおける URL 値の使用</a>を参照して下さい。 - <dt><code id="<x> <y>"><x></code> <code><y></code> {{experimental_inline}}</dt> - <dd>任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。</dd> - <dt><span id="Keyword values">キーワード値</span></dt> - <dd> - <p><em>値の上にマウスを当てると、各項目の実際の表示を確認できます。</em></p> - - <table class="standard-table"> - <thead> - <tr> - <th scope="col">カテゴリ</th> - <th scope="col">CSS 値</th> - <th scope="col">例</th> - <th scope="col">説明</th> - </tr> - </thead> - <tbody> - <tr style="cursor: auto;"> - <th rowspan="3">一般</th> - <td><code>auto</code></td> - <td></td> - <td>現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には <code>text</code> キーワードを指定した場合と同様です。</td> - </tr> - <tr style="cursor: default;"> - <td><code>default</code></td> - <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td> - <td>プラットフォームに依存する既定のカーソルです。ふつうは矢印です。</td> - </tr> - <tr style="cursor: none;"> - <td><code>none</code></td> - <td></td> - <td>カーソルを表示しません。</td> - </tr> - <tr style="cursor: context-menu;"> - <th rowspan="5" scope="row" style="cursor: auto;">リンクおよび状態</th> - <td><code>context-menu</code></td> - <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td> - <td>コンテキストメニューが利用できることを示します。</td> - </tr> - <tr style="cursor: help;"> - <td><code>help</code></td> - <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td> - <td>ヘルプが使用可能であることを示します。</td> - </tr> - <tr style="cursor: pointer;"> - <td><code>pointer</code></td> - <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td> - <td>カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。</td> - </tr> - <tr style="cursor: progress;"> - <td><code>progress</code></td> - <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td> - <td>バックグラウンドでプログラムがビジー状態dが、 (<code>wait</code> とは異なり) ユーザーがインターフェイスを操作可能であることを示します。</td> - </tr> - <tr style="cursor: wait;"> - <td><code>wait</code></td> - <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td> - <td>プログラムがビジー状態で、 (<code>progress</code> とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。</td> - </tr> - <tr style="cursor: cell;"> - <th rowspan="4" scope="row" style="cursor: auto;">選択</th> - <td><code>cell</code></td> - <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td> - <td>表のセルまたは一連のセルが選択できることを示します。</td> - </tr> - <tr style="cursor: crosshair;"> - <td><code>crosshair</code></td> - <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td> - <td>十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。</td> - </tr> - <tr style="cursor: text;"> - <td><code>text</code></td> - <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td> - <td>テキストを選択可能であることを示します。通常、 I ビームが表示されます。</td> - </tr> - <tr style="cursor: vertical-text;"> - <td><code>vertical-text</code></td> - <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td> - <td>縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。</td> - </tr> - <tr style="cursor: alias;"> - <th rowspan="7" scope="row" style="cursor: auto;">ドラッグ＆ドロップ</th> - <td><code>alias</code></td> - <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td> - <td>エイリアスやショートカットが作成されることを示します。</td> - </tr> - <tr style="cursor: copy;"> - <td><code>copy</code></td> - <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td> - <td>何かがコピーされることを示します。</td> - </tr> - <tr style="cursor: move;"> - <td><code>move</code></td> - <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td> - <td>何かが移動されることを示します。</td> - </tr> - <tr style="cursor: no-drop;"> - <td><code>no-drop</code></td> - <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td> - <td>現在の位置にアイテムがドロップできないことを示します。<br> - {{bug("275173")}}: Windows および Mac OS X では、 <code>no-drop</code> が <code>not-allowed</code> と同じです。</td> - </tr> - <tr style="cursor: not-allowed;"> - <td><code>not-allowed</code></td> - <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td> - <td>要求された操作が受け付けられないことを示します。</td> - </tr> - <tr id="grab" style="cursor: grab;"> - <td><code>grab</code></td> - <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td> - <td>何かがグラブ (移動のためにドラッグ) することができることを示します。</td> - </tr> - <tr style="cursor: grabbing;"> - <td><code>grabbing</code></td> - <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td> - <td>何かがグラブ (移動のためにドラッグ) されようとしていることを示します。</td> - </tr> - <tr style="cursor: all-scroll;"> - <th rowspan="15" scope="row" style="cursor: auto;">サイズ変更＆スクロール</th> - <td><code>all-scroll</code></td> - <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td> - <td>何かが任意の方向にスクロール (パン) 可能であることを示します。<br> - {{bug("275174")}}: Windows では、 <code>all-scroll</code> は <code>move</code> 同じです。</td> - </tr> - <tr style="cursor: col-resize;"> - <td><code>col-resize</code></td> - <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td> - <td>アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。</td> - </tr> - <tr style="cursor: row-resize;"> - <td><code>row-resize</code></td> - <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td> - <td>アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。</td> - </tr> - <tr style="cursor: n-resize;"> - <td><code>n-resize</code></td> - <td><img alt="上方向へのサイズ変更カーソルの例" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td> - <td rowspan="8" style="cursor: auto;">辺が移動できることを表します。例えば、 <code>se-resize</code> のカーソルはボックスの<ruby><em>南東</em><rp> (</rp><rt>south-east</rt><rp>) </rp></ruby>の角から移動を開始した時に使われます。<br> - 環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 <code>n-resize</code> および <code>s-resize</code> は <code>ns-resize</code> と同じです。</td> - </tr> - <tr style="cursor: e-resize;"> - <td><code>e-resize</code></td> - <td><img alt="右方向へのサイズ変更カーソルの例" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: s-resize;"> - <td><code>s-resize</code></td> - <td><img alt="下方向へのサイズ変更カーソルの例" src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: w-resize;"> - <td><code>w-resize</code></td> - <td><img alt="左方向へのサイズ変更カーソルの例" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: ne-resize;"> - <td><code>ne-resize</code></td> - <td><img alt="右上方向へのサイズ変更カーソルの例" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: nw-resize;"> - <td><code>nw-resize</code></td> - <td><img alt="左上方向へのサイズ変更カーソルの例" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: se-resize;"> - <td><code>se-resize</code></td> - <td><img alt="右下方向へのサイズ変更カーソルの例" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: sw-resize;"> - <td><code>sw-resize</code></td> - <td><img alt="左下方向へのサイズ変更カーソルの例" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: ew-resize;"> - <td><code>ew-resize</code></td> - <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td> - <td rowspan="4" style="cursor: auto;">双方向へのサイズ変更が可能であることを示します。</td> - </tr> - <tr style="cursor: ns-resize;"> - <td><code>ns-resize</code></td> - <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: nesw-resize;"> - <td><code>nesw-resize</code></td> - <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td> - </tr> - <tr style="cursor: nwse-resize;"> - <td><code>nwse-resize</code></td> - <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td> - </tr> - <tr style="cursor: zoom-in;"> - <th rowspan="2" style="cursor: auto;">拡大/縮小</th> - <td><code>zoom-in</code></td> - <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td> - <td rowspan="2" style="cursor: auto;"> - <p>拡大/縮小が可能であることを示す</p> - </td> - </tr> - <tr style="cursor: zoom-out;"> - <td><code>zoom-out</code></td> - <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td> - </tr> - </tbody> - </table> - </dd> -</dl> - -<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> - -<p>仕様書では <code>cursor</code> について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。</p> - -<p>カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。</p> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +``` + + `cursor` プロパティはゼロ個以上の `<url>` をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの `<url>` は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。 + +それぞれの `<url>` には空白で区切った 2 つの数値を続けることができ、`<x><y>` 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。 + +例えば、これは `<url>` 値を使用して 2 つの画像を指定し、`<x><y>` 座標を 2 つ目に設定し、どちらの画像も読み込めなかったときは `progress` キーワードで代替されるように指定しています。 + +```css +cursor: url(one.svg), url(two.svg) 5 5, progress; +``` + +### 値 + +- `<url>` + `url(…)` の形式か、またはカンマ区切りのリスト `url(…), url(…), …` で画像の URL を指定します。複数の {{cssxref("url()")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定*しなければなりません*。詳細は [cursor プロパティにおける URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)を参照して下さい。 +- `<x>` `<y>` {{experimental_inline}} + - : 任意で x 座標と y 座標を指定します。2 つの 32 未満の非負数で、単位なしです。 +- キーワード値 + + - : _値の上にマウスを当てると、各項目の実際の表示を確認できます。_ + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">カテゴリー</th> + <th scope="col">CSS 値</th> + <th scope="col">例</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr style="cursor: auto"> + <th rowspan="3" scope="row">一般</th> + <td><code>auto</code></td> + <td></td> + <td> + 現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には <code>text</code> キーワードを指定した場合と同様です。 + </td> + </tr> + <tr style="cursor: default"> + <td><code>default</code></td> + <td><img src="default.gif" /></td> + <td>プラットフォームに依存する既定のカーソルです。ふつうは矢印です。</td> + </tr> + <tr style="cursor: none"> + <td><code>none</code></td> + <td></td> + <td>カーソルを表示しません。</td> + </tr> + <tr style="cursor: context-menu"> + <th rowspan="5" scope="row" style="cursor: auto">リンクおよび状態</th> + <td><code>context-menu</code></td> + <td><img alt="context-menu.png" src="context-menu.png" /></td> + <td>コンテキストメニューが利用できることを示します。</td> + </tr> + <tr style="cursor: help"> + <td><code>help</code></td> + <td><img src="help.gif" /></td> + <td>ヘルプが使用可能であることを示します。</td> + </tr> + <tr style="cursor: pointer"> + <td><code>pointer</code></td> + <td><img src="pointer.gif" /></td> + <td> + カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。 + </td> + </tr> + <tr style="cursor: progress"> + <td><code>progress</code></td> + <td><img src="progress.gif" /></td> + <td> + プログラムがバックグラウンドでビジー状態であるが、(<code>wait</code> とは異なり) ユーザーがインターフェイスを操作可能であることを示します。 + </td> + </tr> + <tr style="cursor: wait"> + <td><code>wait</code></td> + <td><img src="wait.gif" /></td> + <td> + プログラムがビジー状態で、(<code>progress</code> とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。 + </td> + </tr> + <tr style="cursor: cell"> + <th rowspan="4" scope="row" style="cursor: auto;">選択</th> + <td><code>cell</code></td> + <td><img src="cell.gif" /></td> + <td>表のセルまたは一連のセルが選択できることを示します。</td> + </tr> + <tr style="cursor: crosshair"> + <td><code>crosshair</code></td> + <td><img src="crosshair.gif" /></td> + <td>十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。</td> + </tr> + <tr style="cursor: text"> + <td><code>text</code></td> + <td><img class="default" src="text.gif" /></td> + <td>テキストを選択可能であることを示します。通常、I ビームが表示されます。</td> + </tr> + <tr style="cursor: vertical-text"> + <td><code>vertical-text</code></td> + <td><img alt="vertical-text.gif" src="vertical-text.gif" /></td> + <td> + 縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。 + </td> + </tr> + <tr style="cursor: alias"> + <th rowspan="7" scope="row" style="cursor: auto">ドラッグ＆ドロップ</th> + <td><code>alias</code></td> + <td><img src="alias.gif" /></td> + <td>エイリアスやショートカットが作成されることを示します。</td> + </tr> + <tr style="cursor: copy"> + <td><code>copy</code></td> + <td><img class="default" src="copy.gif" /></td> + <td>何かがコピーされることを示します。</td> + </tr> + <tr style="cursor: move"> + <td><code>move</code></td> + <td><img src="move.gif" /></td> + <td>何かが移動されることを示します。</td> + </tr> + <tr style="cursor: no-drop"> + <td><code>no-drop</code></td> + <td> + <img + alt="no-drop.gif" + class="lwrap" + src="no-drop.gif" + style="float: left" + /> + </td> + <td> + 現在の位置にアイテムがドロップできないことを示します。<br />{{bug("275173")}}: Windows および Mac OS X では、<code>no-drop</code> は <code>not-allowed</code> と同じです。 + </td> + </tr> + <tr style="cursor: not-allowed"> + <td><code>not-allowed</code></td> + <td><img alt="not-allowed.gif" src="not-allowed.gif" /></td> + <td>要求された操作が受け付けられないことを示します。</td> + </tr> + <tr style="cursor: grab"> + <td><code>grab</code></td> + <td><img class="default" src="grab.gif" /></td> + <td>何かをグラブ (移動のためにドラッグ) することができることを示します。</td> + </tr> + <tr style="cursor: grabbing"> + <td><code>grabbing</code></td> + <td><img class="default" src="grabbing.gif" /></td> + <td>何かをグラブ (移動のためにドラッグ) していることを示します。</td> + </tr> + <tr style="cursor: all-scroll"> + <th rowspan="15" scope="row" style="cursor: auto"> + サイズ変更＆スクロール + </th> + <td><code>all-scroll</code></td> + <td><img alt="all-scroll.gif" src="all-scroll.gif" /></td> + <td> + 何かが任意の方向にスクロール (パン) 可能であることを示します。<br />{{bug("275174")}}: Windows では、 <code>all-scroll</code> は <code>move</code> 同じです。 + </td> + </tr> + <tr style="cursor: col-resize"> + <td><code>col-resize</code></td> + <td><img alt="col-resize.gif" src="col-resize.gif" /></td> + <td> + アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。 + </td> + </tr> + <tr style="cursor: row-resize"> + <td><code>row-resize</code></td> + <td><img alt="row-resize.gif" src="row-resize.gif" /></td> + <td> + アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。 + </td> + </tr> + <tr style="cursor: n-resize"> + <td><code>n-resize</code></td> + <td> + <img + alt="上方向へのサイズ変更カーソルの例" + src="n-resize.gif" + style="border-style: solid; border-width: 0px" + /> + </td> + <td rowspan="8" style="cursor: auto">辺が移動できることを表します。例えば、<code>se-resize</code> のカーソルはボックスの*南東* (south-east) の角から移動を開始した時に使われます。<br />環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 <code>n-resize</code> と <code>s-resize</code> は <code>ns-resize</code> と同じになります。</td> + </tr> + <tr style="cursor: e-resize"> + <td><code>e-resize</code></td> + <td> + <img + alt="右方向へのサイズ変更カーソルの例" + src="e-resize.gif" + /> + </td> + </tr> + <tr style="cursor: s-resize"> + <td><code>s-resize</code></td> + <td> + <img + alt="下方向へのサイズ変更カーソルの例" + src="s-resize.gif" + /> + </td> + </tr> + <tr style="cursor: w-resize"> + <td><code>w-resize</code></td> + <td> + <img + alt="左方向へのサイズ変更カーソルの例" + src="w-resize.gif" + /> + </td> + </tr> + <tr style="cursor: ne-resize"> + <td><code>ne-resize</code></td> + <td> + <img + alt="右上方向へのサイズ変更カーソルの例" + src="ne-resize.gif" + /> + </td> + </tr> + <tr style="cursor: nw-resize"> + <td><code>nw-resize</code></td> + <td> + <img + alt="左上方向へのサイズ変更カーソルの例" + src="nw-resize.gif" + /> + </td> + </tr> + <tr style="cursor: se-resize"> + <td><code>se-resize</code></td> + <td> + <img + alt="右下方向へのサイズ変更カーソルの例" + src="se-resize.gif" + /> + </td> + </tr> + <tr style="cursor: sw-resize"> + <td><code>sw-resize</code></td> + <td> + <img + alt="左下方向へのサイズ変更カーソルの例" + src="sw-resize.gif" + /> + </td> + </tr> + <tr style="cursor: ew-resize"> + <td><code>ew-resize</code></td> + <td><img alt="3-resize.gif" class="default" src="3-resize.gif" /></td> + <td rowspan="4" style="cursor: auto">双方向へのサイズ変更が可能であることを示します。</td> + </tr> + <tr style="cursor: ns-resize"> + <td><code>ns-resize</code></td> + <td><img alt="6-resize.gif" class="default" src="6-resize.gif" /></td> + </tr> + <tr style="cursor: nesw-resize"> + <td><code>nesw-resize</code></td> + <td><img alt="1-resize.gif" class="default" src="1-resize.gif" /></td> + </tr> + <tr style="cursor: nwse-resize"> + <td><code>nwse-resize</code></td> + <td><img alt="4-resize.gif" class="default" src="4-resize.gif" /></td> + </tr> + <tr style="cursor: zoom-in"> + <th rowspan="2" scope="row" style="cursor: auto">拡大/縮小</th> + <td><code>zoom-in</code></td> + <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif" /></td> + <td rowspan="2" style="cursor: auto"> + <p>拡大/縮小が可能であることを示します。</p> + </td> + </tr> + <tr style="cursor: zoom-out"> + <td><code>zoom-out</code></td> + <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif" /></td> + </tr> + </tbody> + </table> + +## 使用上の注意 + +仕様書では `cursor` について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。 + +カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_cursor_types" name="Setting_cursor_types">カーソルの種類の設定</h3> +<h3 id="Setting_cursor_types">カーソルの種類の設定</h3> -<pre class="brush:css notranslate">.foo { +```css +.foo { cursor: crosshair; } @@ -290,40 +351,18 @@ cursor: unset; .baz { cursor: url("hyper.cur"), auto; } -</pre> - -<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('CSS3 Basic UI', '#cursor', 'cursor')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>幾つかのキーワード、ポジション構文、 <code>url()</code> 関数形式の追加</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div>{{Compat("css.properties.cursor")}}</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property">cursor プロパティにおける URL 値の使用</a></li> - <li>{{cssxref("pointer-events")}}</li> - <li>{{cssxref("url()", "url()")}} 関数</li> -</ul> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [cursor プロパティにおける URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property) +- {{cssxref("pointer-events")}} +- {{cssxref("url()", "url()")}} 関数 diff --git a/files/ja/web/css/ime-mode/index.md b/files/ja/web/css/ime-mode/index.md index 3eeaf99783..f537a4fbf8 100644 --- a/files/ja/web/css/ime-mode/index.md +++ b/files/ja/web/css/ime-mode/index.md @@ -3,100 +3,88 @@ title: ime-mode slug: Web/CSS/ime-mode tags: - CSS - - CSS Reference + - CSS プロパティ - Deprecated + - recipe:css-property +browser-compat: css.properties.ime-mode translation_of: Web/CSS/ime-mode --- -<div>{{CSSRef}} {{deprecated_header}}</div> +{{CSSRef}} {{deprecated_header}} -<p><strong><code>ime-mode</code></strong> プロパティは、テキストフィールドで Input Method Editor (以下 IME) をコントロールします。このプロパティは廃止されました。</p> +**`ime-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストフィールドで Input Method Editor (以下 IME) をコントロールします。このプロパティは廃止されました。 -<pre class="brush:css no-line-numbers">/* Keyword values */ +```css +/* Keyword values */ ime-mode: auto; ime-mode: normal; ime-mode: active; ime-mode: inactive; ime-mode: disabled; -/* Global values */ +/* グローバル値 */ ime-mode: inherit; ime-mode: initial; -ime-mode: unset;</pre> +ime-mode: revert; +ime-mode: unset; +``` -<p><code>ime-mode</code>は、一部のブラウザーで無秩序に実装されたプロパティです。これは、Microsoft が独自の拡張機能として Internet Explorer 5 で導入したものです。{{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}</p> +`ime-mode`は、一部のブラウザーで無秩序に実装されたプロパティです。これは、Microsoft が独自の拡張機能として Internet Explorer 5 で導入したものです。{{spec("https://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}} -<div class="blockIndicator note"> -<p><strong>Note:</strong> <span class="tlid-translation translation" lang="ja"><span title="">一般的に、パブリックなWebサイトがIMEモードを変更することは適切ではありません。</span></span> このプロパティは、プライベートなWebアプリケーションでのみ使用すべきです。また、以前にレガシーコードで設定されていた場合は、プロパティを元に戻すべきです。</p> -</div> +> **Note:** 一般に、公開されたウェブサイトが IME モードを変更することは適切ではありません。このプロパティは、私的ななウェブアプリケーションでのみ使用すべきです。また、以前に古いコードで設定されていた場合は、プロパティを元に戻すべきです。 -<p>{{cssinfo}}</p> +## 構文 -<h2 id="構文">構文</h2> +`ime-mode` プロパティは、以下のキーワード値のうちの一つを使用して指定します。 -<h3 id="値">値</h3> +### 値 -<dl> - <dt><code>auto</code></dt> - <dd>現在の IME の状態を変更しません。これはデフォルトの設定です。</dd> - <dt><code>normal</code></dt> - <dd>IME の状態を通常の状態に変更します。この値はユーザースタイルシートでウェブページが指定した値を上書きするために用意されました。 <em>この値は Internet Explorer ではサポートされていません。</em></dd> - <dt><code>active</code></dt> - <dd>コンテンツがフォーカスを得た時に IME は自動的にオンになります。ユーザーがオフにしない限りテキスト入力には IME が使用されます。 <em>Linux ではサポートされていません。</em></dd> - <dt><code>inactive</code></dt> - <dd>コンテンツがフォーカスを得た時に IME は自動的にオフに設定されますが、ユーザーは任意で IME をオンにする事ができます。 <em>Linux ではサポートされていません。</em></dd> - <dt><code>disabled</code></dt> - <dd>IME は無効にされます。ユーザーによって IME をオンにする事はできません。</dd> -</dl> +- `auto` + - : 現在の IME の状態を変更しません。これが既定値です。 +- `normal` + - : IME の状態を通常の状態に変更します。この値はユーザースタイルシートでウェブページが指定した値を上書きするために用意されました。_この値は Internet Explorer は対応していません_。 +- `active` + - : コンテンツがフォーカスを得た時に IME が自動的にオンになります。ユーザーがオフにしない限りテキスト入力には IME が使用されます。_Linux では対応していません。_ +- `inactive` + - : コンテンツがフォーカスを得た時に IME は自動的にオフに設定されますが、ユーザーは任意で IME をオンにすることができます。_Linux では対応していません。_ +- `disabled` + - : IME は無効になり、ユーザーがオンにすることはできません。 -<h3 id="公式の構文">公式の構文</h3> +## 解説 + +Internet Explorer とは異なり、Firefox の `ime-mode` は `<input type="password">` にも適用できます。しかし、これはユーザーの使い勝手にはマイナスの影響を与えます。パスワードフィールドでは IME は有効に*されるべきではありません*。ユーザーは以下の CSS をユーザースタイルシートに挿入することで、推奨された設定に従わないサイトの動作を修正することができます。 + +```css +input[type=password] { + ime-mode: auto !important; +} +``` + +Gecko 1.9 (Firefox 3) の Mac 版では、disabled に設定されたフィールドがフォーカスを失う際に、IME の状態を以前の状態に戻すことができません。そのため、Mac ユーザーは `disabled` 値を利用したフォームの利用に苛立ちを覚えるかもしれません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="例">例</h2> +## 例 -<p>この例は、フィールドの IME のサポートを無効にします。これは、 拡張文字セットをサポートしていないデータベースにデータを入力するフィールドの一般的なプラクティスでした。</p> +### インプットメソッドの対応の無効化 -<pre><input type="text" name="name" value="initial value" style="ime-mode: disabled"></pre> +この例は、フィールドの IME の対応を無効にします。これは、 拡張文字セットに対応していないデータベースにデータを入力するフィールドで一般的に行われていました。 -<div class="blockIndicator note"> -<p>拡張文字がフォームを通過しないように IME を無効にすることに依存しないでください。 IME を無効にしても、拡張文字をフォームのフィールドに貼り付けることはできます。</p> -</div> +```html +<input type="text" name="name" value="initial value" style="ime-mode: disabled"> +``` -<h2 id="注記">注記</h2> +> **Note:** IME を無効にしたからといって、拡張文字がフォームを通過しないとは限りません。IME を無効にしても、ユーザーは拡張文字をフォームのフィールドに貼り付けることができます。 -<p>Firefox の <code>ime-mode</code> は Internet Explorer と異なり、<code><input type="password"></code> にも適用できます。しかしこれはユーザーの使い勝手にはマイナスの影響を与えます。パスワードフィールドでは IME は有効に<em>されるべきではありません</em>。ユーザーは以下の CSS をユーザースタイルシートに挿入する事で推奨された設定に従わないサイトの動作を修正する事ができます:</p> +## 仕様書 -<pre class="brush: css">input[type=password] { - ime-mode: auto !important; -}</pre> - -<p>Gecko 1.9 の Mac 版では、disabled に設定されたエディターがフォーカスを失う際に、IME の状態をフォーカスを得る直前の状態には戻りません。そのため、Mac ユーザーは <code>disabled</code> 値を利用したフォームの利用に苛立ちを覚えるかもしれません。</p> - -<h2 id="仕様書">仕様書</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('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>初期の定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー互換性">ブラウザー互換性</h2> - -<div> -<div> - - -<p>{{Compat("css.properties.ime-mode")}}</p> -</div> -</div> +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/css/outline-color/index.md b/files/ja/web/css/outline-color/index.md index 0fbdf74dfe..d63d8dcc5c 100644 --- a/files/ja/web/css/outline-color/index.md +++ b/files/ja/web/css/outline-color/index.md @@ -3,30 +3,29 @@ title: outline-color slug: Web/CSS/outline-color tags: - CSS - - CSS Outline - - CSS Property - - CSS User Interace - - HTML Colors - - HTML Styles - - Outline + - CSS 輪郭線 + - CSS プロパティ + - CSS ユーザーインターフェイス + - HTML 色 + - HTML スタイル + - アウトライン - Reference - - Styles + - スタイル - Styling HTML - outline-color - 'recipe:css-property' translation_of: Web/CSS/outline-color --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>outline-color</code></strong> は CSS のプロパティで、要素の輪郭線の色を設定します。</p> +**`outline-color`** は CSS のプロパティで、要素の輪郭線の色を設定します。 -<div>{{EmbedInteractiveExample("pages/css/outline-color.html")}}</div> +{{EmbedInteractiveExample("pages/css/outline-color.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <color> 値 */ +```css +/* <color> 値 */ outline-color: #f92525; outline-color: rgb(30,222,121); outline-color: blue; @@ -37,100 +36,81 @@ outline-color: invert; /* グローバル値 */ outline-color: inherit; outline-color: initial; +outline-color: revert; outline-color: unset; -</pre> +``` -<p><code>outline-color</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p> +`outline-color` プロパティは、以下に挙げた値のうちの一つで指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>輪郭線の色で、 <code><color></code> で指定します。</dd> - <dt><code>invert</code></dt> - <dd>輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。</dd> -</dl> +- {{cssxref("<color>")}} + - : 輪郭線の色で、`<color>` で指定します。 +- `invert` + - : 輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。 -<h2 id="Description" name="Description">解説</h2> +## 解説 -<p>輪郭線は要素の周囲、 {{cssxref("border")}} の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。</p> +輪郭線は要素の周囲、 {{cssxref("border")}} の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。 -<p>輪郭線の表示方法を定義する際は、一括指定プロパティの {{cssxref("outline")}} を使用したほうが普通は便利です。</p> +輪郭線の表示方法を定義する際は、一括指定プロパティの {{cssxref("outline")}} を使用したほうが普通は便利です。 -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> +## アクセシビリティの考慮 -<p>独自の<a href="/ja/docs/Web/CSS/:focus">フォーカススタイル</a>を作成するときに、ふつう {{cssxref("outline")}} プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。</p> +独自の[フォーカススタイル](/ja/docs/Web/CSS/:focus)を作成するときに、ふつう {{cssxref("outline")}} プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。 -<p>色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。</p> +色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。 -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> +- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_a_solid_blue_outline" name="Setting_a_solid_blue_outline">青い実線の輪郭線の設定</h3> +<h3 id="Setting_a_solid_blue_outline">青い実線の輪郭線の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html; notranslate"><p>見ての通り、輪郭線は青です。</p></pre> +```html +<p>見ての通り、輪郭線は青です。</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight:[3] notranslate">p { +```css +p { outline: 2px solid; /* 輪郭線の幅と種類 */ outline-color: #0000FF; /* 輪郭線を青にする */ margin: 5px; -}</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('Setting_a_solid_blue_outline') }}</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('CSS3 Basic UI', '#outline-color', 'outline-color')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.outline-color")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{cssxref("<color>")}} データ型</li> - <li>その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}</li> - <li><a href="/ja/docs/Web/HTML/Applying_color">CSS を使用した HTML の要素への色の適用</a></li> -</ul> +} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_a_solid_blue_outline') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} +- {{cssxref("<color>")}} データ型 +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- [CSS を使用した HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color)
\ No newline at end of file diff --git a/files/ja/web/css/outline-offset/index.md b/files/ja/web/css/outline-offset/index.md index 5995f59e76..e59e22199b 100644 --- a/files/ja/web/css/outline-offset/index.md +++ b/files/ja/web/css/outline-offset/index.md @@ -3,83 +3,87 @@ title: outline-offset slug: Web/CSS/outline-offset tags: - CSS - - CSS Outline - - CSS Property - - CSS プロパティ - CSS 輪郭線 + - CSS プロパティ - Reference - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.outline-offset translation_of: Web/CSS/outline-offset --- -<div>{{CSSRef}}</div> - -<p>CSS の <strong><code>outline-offset</code></strong> プロパティは、要素の辺や境界線と<a href="/ja/docs/Web/CSS/outline">輪郭線</a>との空間の量を設定します。</p> - -<div>{{EmbedInteractiveExample("pages/css/outline-offset.html")}}</div> +{{CSSRef}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +CSS の **`outline-offset`** プロパティは、要素の辺や境界線と[輪郭線](/ja/docs/Web/CSS/outline)との空間の量を設定します。 -<p><ruby>輪郭線<rp> (</rp><rt>outline</rt><rp>) </rp></ruby>は要素の周囲、<ruby>境界線<rp> (</rp><rt>border</rt><rp>) </rp></ruby>の外側に描かれる線です。要素とその輪郭線との空間は透明です。つまり、親要素の背景と同じになります。</p> +{{EmbedInteractiveExample("pages/css/outline-offset.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers notranslate">/* <length> 値 */ +```css +/* <length> 値 */ outline-offset: 3px; outline-offset: 0.2em; /* グローバル値 */ outline-offset: inherit; outline-offset: initial; +outline-offset: revert; outline-offset: unset; -</pre> +``` + +### 値 + +- `{{cssxref("<length>")}}` + - : 要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 `0` を指定すると輪郭線は要素との隙間を置かずに表示されます。 + +## 解説 -<h3 id="Values" name="Values">値</h3> +輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線の間は透明です。つまり、親要素の背景と同じになります。 -<dl> - <dt><code>{{cssxref("<length>")}}</code></dt> - <dd>要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 <code>0</code> を指定すると輪郭線は要素との隙間を置かずに表示されます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Setting_outline_offset_in_pixels">輪郭線のオフセットをピクセル数で設定</h3> + +#### HTML -<pre class="brush: css notranslate">p { +```html +<p>Gallia est omnis divisa in partes tres.</p> +``` + +#### CSS + +```css +p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } -</pre> +``` + +#### 結果 -<pre class="brush: html notranslate"><p>Gallia est omnis divisa in partes tres.</p></pre> +{{EmbedLiveSample('Setting_outline_offset_in_pixels')}} -<p>{{EmbedLiveSample('Example')}}</p> +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{Specifications}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}</td> - <td>{{ Spec2('CSS3 Basic UI') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 -<p>{{cssinfo}}</p> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## 関連情報 -<p>{{Compat("css.properties.outline-offset")}}</p> +- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} diff --git a/files/ja/web/css/outline-style/index.md b/files/ja/web/css/outline-style/index.md index 63fe79ad38..364d1bb098 100644 --- a/files/ja/web/css/outline-style/index.md +++ b/files/ja/web/css/outline-style/index.md @@ -3,26 +3,25 @@ title: outline-style slug: Web/CSS/outline-style tags: - CSS - - CSS プロパティ - CSS 輪郭線 - - Outline + - CSS プロパティ - Reference - - outline-style + - recipe:css-property +browser-compat: css.properties.outline-style translation_of: Web/CSS/outline-style --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の <strong><code>outline-style</code></strong> プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。</p> +CSS の **`outline-style`** プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。 -<div>{{EmbedInteractiveExample("pages/css/outline-style.html")}}</div> +{{EmbedInteractiveExample("pages/css/outline-style.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。 -<p>たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ outline-style: auto; outline-style: none; outline-style: dotted; @@ -37,96 +36,88 @@ outline-style: outset; /* グローバル値 */ outline-style: inherit; outline-style: initial; +outline-style: revert; outline-style: unset; -</pre> - -<p><code>outline-style</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt> - <p><code>auto</code></p> - </dt> - <dd style="outline: 8px auto red;">ユーザーエージェントに輪郭線の描画を任せます。</dd> - <dt> - <p><code>none</code></p> - </dt> - <dd>輪郭線を描きません。{{cssxref("outline-width")}} は <code>0</code> です。</dd> - <dt> - <p><code>dotted</code></p> - </dt> - <dd style="outline: 8px dotted red;">点線の輪郭線です。</dd> - <dt> - <p><code>dashed</code></p> - </dt> - <dd style="outline: 8px dashed red;">破線の輪郭線です。</dd> - <dt> - <p><code>solid</code></p> - </dt> - <dd style="outline: 8px solid red;">1本の実線の輪郭線です。</dd> - <dt> - <p><code>double</code></p> - </dt> - <dd style="outline: 8px double red;">2本の実線の輪郭線です。{{cssxref("outline-width")}}は2本の線とその隙間の合計です。</dd> - <dt> - <p><code>groove</code></p> - </dt> - <dd style="outline: 8px groove red;">ページに刻まれたかのように見える輪郭線です。</dd> - <dt> - <p><code>ridge</code></p> - </dt> - <dd style="outline: 8px ridge red;"><code>groove</code>の逆で、ページから押し出されたように見える輪郭線です。</dd> - <dt> - <p><code>inset</code></p> - </dt> - <dd style="outline: 8px inset red;">領域がページに埋め込まれたかのように見える輪郭線です。</dd> - <dt> - <p><code>outset</code></p> - </dt> - <dd style="outline: 8px outset red;"><code>inset</code>の逆で、領域がページから隆起しているように見える輪郭線です。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +``` + +`outline-style` プロパティは、以下に挙げた値のうちの一つで指定します。 + +### 値 + +- `auto` + - : ユーザーエージェントに輪郭線の描画を任せます。 +- `none` + - : 輪郭線を描きません。{{cssxref("outline-width")}} は `0` です。 +- `dotted` + - : 点線の輪郭線です。 +- `dashed` + - : 破線の輪郭線です。 +- `solid` + - : 1 本の実線の輪郭線です。 +- `double` + - : 2 本の実線の輪郭線です。{{cssxref("outline-width")}} は 2 本の線とその隙間の合計です。 +- `groove` + - : ページに刻まれたかのように見える輪郭線です。 +- `ridge` + - : `groove` の逆で、ページから押し出されたように見える輪郭線です。 +- `inset` + - : 領域がページに埋め込まれたかのように見える輪郭線です。 +- `outset` + - : `inset` の逆で、領域がページから隆起しているように見える輪郭線です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Example_0_-_auto" name="Example_0_-_auto">例 0 - <code>auto</code></h3> +<h3 id="Setting_outline_style_to_auto">輪郭線のスタイルを auto に設定</h3> -<p>値<code>auto</code>は、輪郭線スタイルがカスタムであることを表します。 — <q cite="https://www.w3.org/TR/css-ui-3/#outline-style">典型的には、プラットフォーム用のユーザーインターフェースのデフォルトのスタイル、または、CSSで詳細に記述できるスタイルよりも表現豊かなスタイル(例:輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線)</q></p> +`auto` の値は、輪郭線のスタイルが独自のものであることを表します。[仕様書](https://www.w3.org/TR/css-ui-3/#outline-style)によれば、「典型的には、プラットフォーム用のユーザーインターフェイスの既定のスタイル、または、CSS で詳細に記述できるスタイルよりも表現豊かなスタイル 、例えば、輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線」となっています。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div> - <p class="auto">Outline Demo</p> -</div> </pre> +```html +<div> + <p class="auto">Outline Demo</p> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">.auto { - outline-style: auto; /* "outline: auto" と同じ */ +```css +.auto { + outline-style: auto; /* same result as "outline: auto" */ } /* デモを見やすく */ -* { outline-width: 10px; padding: 15px; } </pre> +* { outline-width: 10px; padding: 15px; } +``` + +#### 結果 -<p>{{ EmbedLiveSample('Example_0_-_auto') }}</p> +{{ EmbedLiveSample('Setting_outline_style_to_auto') }} -<h3 id="Example_1_-_dotted_and_dashed" name="Example_1_-_dotted_and_dashed">例 1 - <code>dotted</code> と <code>dashed</code></h3> +<h3 id="Setting_outline_style_to_dashed_and_dotted">輪郭線を dashed と dotted に設定</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><div> - <div class="dotted"> - <p class="dashed">Outline Demo</p> - </div> -</div> </pre> +```html +<div> + <div class="dotted"> + <p class="dashed">Outline Demo</p> + </div> +</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">.dotted { +```css +.dotted { outline-style: dotted; /* "outline: dotted" と同じ */ } .dashed { @@ -134,23 +125,29 @@ outline-style: unset; } /* デモを見やすく */ -* { outline-width: 10px; padding: 15px; } </pre> +* { outline-width: 10px; padding: 15px; } +``` -<p>{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}</p> +#### 結果 -<h3 id="Example_2_-_solid_and_double" name="Example_2_-_solid_and_double">例 2 - <code>solid</code> と <code>double</code></h3> +{{ EmbedLiveSample('Setting_outline_style_to_dashed_and_dotted') }} -<h4 id="HTML_3">HTML</h4> +<h3 id="Setting_outline_style_to_solid_and_double">輪郭線のスタイルを solid と double に設定</h3> -<pre class="brush: html"><div> - <div class="solid"> - <p class="double">Outline Demo</p> - </div> -</div> </pre> +#### HTML -<h4 id="CSS_3">CSS</h4> +```html +<div> + <div class="solid"> + <p class="double">Outline Demo</p> + </div> +</div> +``` -<pre class="brush: css">.solid { +#### CSS + +```css +.solid { outline-style: solid; } .double { @@ -158,23 +155,29 @@ outline-style: unset; } /* デモを見やすく */ -* { outline-width: 10px; padding: 15px; } </pre> +* { outline-width: 10px; padding: 15px; } +``` + +#### 結果 -<p>{{ EmbedLiveSample('Example_2_-_solid_and_double') }}</p> +{{ EmbedLiveSample('Setting_outline_style_to_solid_and_double') }} -<h3 id="Example_3_-_groove_and_ridge" name="Example_3_-_groove_and_ridge">例 3 - <code>groove</code> と <code>ridge</code></h3> +<h3 id="Setting_outline_style_to_groove_and_ridge">輪郭線のスタイルを groove と ridge に設定</h3> -<h4 id="HTML_4">HTML</h4> +#### HTML -<pre class="brush: html"><div> - <div class="groove"> - <p class="ridge">Outline Demo</p> - </div> -</div></pre> +```html +<div> + <div class="groove"> + <p class="ridge">Outline Demo</p> + </div> +</div> +``` -<h4 id="CSS_4">CSS</h4> +#### CSS -<pre class="brush: css">.groove { +```css +.groove { outline-style: groove; } .ridge { @@ -182,23 +185,29 @@ outline-style: unset; } /* デモを見やすく */ -* { outline-width: 10px; padding: 15px; }</pre> +* { outline-width: 10px; padding: 15px; } +``` -<p>{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}</p> +#### 結果 -<h3 id="Example_4_-_inset_and_outset" name="Example_4_-_inset_and_outset">例 4 - <code>inset</code> と <code>outset</code></h3> +{{ EmbedLiveSample('Setting_outline_style_to_groove_and_ridge') }} -<h4 id="HTML_5">HTML</h4> +<h3 id="Setting_outline_style_to_inset_and_outset">輪郭線のスタイルを inset と outset に設定</h3> -<pre class="brush: html"><div> - <div class="inset"> - <p class="outset">Outline Demo</p> - </div> -</div></pre> +#### HTML -<h4 id="CSS_5">CSS</h4> +```html +<div> + <div class="inset"> + <p class="outset">Outline Demo</p> + </div> +</div> +``` -<pre class="brush: css">.inset { +#### CSS + +```css +.inset { outline-style: inset; } .outset { @@ -206,36 +215,23 @@ outline-style: unset; } /* デモを見やすく */ -* { outline-width: 10px; padding: 15px; }</pre> - -<p>{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}</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('CSS3 Basic UI', '#outline-style', 'outline-style')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td><code>auto</code>値を追加。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.outline-style")}}</p> +* { outline-width: 10px; padding: 15px; } +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_outline_style_to_inset_and_outset') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-width")}} diff --git a/files/ja/web/css/outline-width/index.md b/files/ja/web/css/outline-width/index.md index 0f17326a4a..eb825528e8 100644 --- a/files/ja/web/css/outline-width/index.md +++ b/files/ja/web/css/outline-width/index.md @@ -3,78 +3,81 @@ title: outline-width slug: Web/CSS/outline-width tags: - CSS - - CSS Outline - - CSS Property + - CSS 輪郭線 + - CSS プロパティ - Layout - Reference - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.outline-width translation_of: Web/CSS/outline-width --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>outline-width</code></strong> プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。</p> +[CSS](/ja/docs/Web/CSS) の **`outline-width`** プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。 -<div>{{EmbedInteractiveExample("pages/css/outline-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/outline-width.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。 -<p>たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ outline-width: thin; outline-width: medium; outline-width: thick; -/* <length> 値 */ +/* <length> 値 */ outline-width: 1px; outline-width: 0.1em; /* グローバル値 */ outline-width: inherit; -</pre> +outline-width: initial; +outline-width: revert; +outline-width: unset; +``` -<p><code>outline-width</code> プロパティは、以下に挙げた値のうちの一つで指定します。</p> +`outline-width` プロパティは、以下に挙げた値のうちの一つで指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>輪郭線の太さを <code><length></code> で指定します。</dd> - <dt><code>thin</code></dt> - <dd>ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は <code>1px</code> です。</dd> - <dt><code>medium</code></dt> - <dd>ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は <code>3px</code> です。</dd> - <dt><code>thick</code></dt> - <dd>ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は <code>5px</code> です。</dd> -</dl> +- {{cssxref("<length>")}} + - : 輪郭線の太さを `<length>` で指定します。 +- `thin` + - : ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `1px` です。 +- `medium` + - : ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `3px` です。 +- `thick` + - : ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は `5px` です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_an_elements_outline_width" name="Setting_an_elements_outline_width">要素の輪郭線の幅の設定</h3> +<h3 id="Setting_an_elements_outline_width">要素の輪郭線の幅の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><span id="thin">thin</span> -<span id="medium">medium</span> -<span id="thick">thick</span> -<span id="twopixels">2px</span> -<span id="oneex">1ex</span> -<span id="em">1.2em</span> -</pre> +```html +<span id="thin">thin</span> +<span id="medium">medium</span> +<span id="thick">thick</span> +<span id="twopixels">2px</span> +<span id="oneex">1ex</span> +<span id="em">1.2em</span> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">span { +```css +span { outline-style: solid; display: inline-block; margin: 20px; @@ -103,37 +106,22 @@ outline-width: inherit; #em { outline-width: 1.2em; } +``` + +#### 結果 + +{{EmbedLiveSample('Setting_an_elements_outline_width', '100%', '80')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Setting_an_elements_outline_width', '100%', '80')}}</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('CSS3 Basic UI', '#outline-width', 'outline-width')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.outline-width")}}</p> +- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} diff --git a/files/ja/web/css/outline/index.md b/files/ja/web/css/outline/index.md index 3bfa1c474a..8e75e0a488 100644 --- a/files/ja/web/css/outline/index.md +++ b/files/ja/web/css/outline/index.md @@ -3,36 +3,32 @@ title: outline slug: Web/CSS/outline tags: - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - CSS 輪郭線 - - Layout - - Reference + - CSS プロパティ - レイアウト + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.outline translation_of: Web/CSS/outline --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>outline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、輪郭線 (outline) に関する様々なプロパティ ({{cssxref("outline-style")}}, {{cssxref("outline-width")}}, {{cssxref("outline-color")}}) を単一の宣言で設定するための<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> +**`outline`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、輪郭線 (outline) に関する様々なプロパティを単一の宣言で設定します。 -<div>{{EmbedInteractiveExample("pages/css/outline.html")}}</div> +{{EmbedInteractiveExample("pages/css/outline.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +## 構成要素のプロパティ -<p>他の一括指定プロパティと同様に、省略された値は<a href="/ja/docs/Web/CSS/initial_value">初期値</a>に設定されます。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<h3 id="Borders_vs._outlines" name="Borders_vs._outlines">境界線と輪郭線</h3> +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} -<p><a href="/ja/docs/Web/CSS/border">境界線</a>と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。</p> +## 構文 -<ul> - <li>輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。</li> - <li>仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。</li> -</ul> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush: css no-line-numbers notranslate">/* 種類 */ +```css +/* 種類 */ outline: solid; /* 色 | 種類 */ @@ -47,40 +43,61 @@ outline: green solid 3px; /* グローバル値 */ outline: inherit; outline: initial; +outline: revert; outline: unset; -</pre> +``` -<p><code>outline</code> プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。</p> +`outline` プロパティは以下に挙げた 1 ～ 3 つの値を用いて指定することができます。値は順不同です。 -<div class="note"> -<p><strong>メモ:</strong> 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が <code>none</code> だからです。特筆すべき例外は <code>input</code> 要素で、ブラウザーが既定のスタイルを与えます。</p> +> **Note:** 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が `none` だからです。特筆すべき例外は `input` 要素で、ブラウザーが既定のスタイルを与えます。 </div> -<h3 id="Values_2" name="Values_2">値</h3> +### 値 + +- `<'outline-color'>` + - : 輪郭線の色を設定します。未指定の場合の既定値は `currentcolor` です。 {{cssxref("outline-color")}} を参照してください。 +- `<'outline-style'>` + - : 輪郭線の種類を設定します。未指定の場合の既定値は `none` です。 {{cssxref("outline-style")}} を参照してください。 +- `<'outline-width'>` + - : 輪郭線の太さを設定します。未指定の場合の既定値は `medium` です。 {{cssxref("outline-width")}} を参照してください。 + +## 解説 + +[境界線](/ja/docs/Web/CSS/border)と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。 + +- 輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。- 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。 + +他の一括指定プロパティと同様に、省略された値は[初期値](/ja/docs/Web/CSS/initial_value)に設定されます。 + +## アクセシビリティの考慮 + +`outline` の値を `0` または `none` にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。 -<dl> - <dt><code><'outline-color'></code></dt> - <dd>輪郭線の色を設定します。未指定の場合の既定値は <code>currentcolor</code> です。 {{cssxref("outline-color")}} を参照してください。</dd> - <dt><code><'outline-style'></code></dt> - <dd>輪郭線の種類を設定します。未指定の場合の既定値は <code>none</code> です。 {{cssxref("outline-style")}} を参照してください。</dd> - <dt><code><'outline-width'></code></dt> - <dd>輪郭線の太さを設定します。未指定の場合の既定値は <code>medium</code> です。 {{cssxref("outline-width")}} を参照してください。</dd> -</dl> +- [How to Design Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) <li> + <abbr>WCAG</abbr> 2.1: [成功基準 2.4.7 の理解: フォーカスの可視性](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Using_outline_to_set_a_focus_style">輪郭線を使用してフォーカスのスタイルを設定</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html notranslate"><a href="#">このリンクは特殊なフォーカスのスタイルです。</a> -</pre> +```html +<a href="#">このリンクは特殊なフォーカスのスタイルです。</a> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css notranslate">a { +```css +a { border: 1px solid; border-radius: 3px; display: inline-block; @@ -93,51 +110,22 @@ a:focus { outline-offset: 4px; background: #ffa; } -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", "100%", 60)}}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p><code>outline</code> の値を <code>0</code> または <code>none</code> にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。</p> - -<ul> - <li><a href="https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/">How to Design Useful and Usable Focus Indicators</a></li> - <li> - <p><abbr>WCAG</abbr> 2.1: <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html">成功基準 2.4.7 の理解: フォーカスの可視性</a></p> - </li> -</ul> - -<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('CSS3 Basic UI', '#outline', 'outline')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>変更なし。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.outline")}}</p> -</div> +``` + +#### 結果 + +{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} diff --git a/files/ja/web/css/resize/index.md b/files/ja/web/css/resize/index.md index 1633a346e6..4b4c1e75c3 100644 --- a/files/ja/web/css/resize/index.md +++ b/files/ja/web/css/resize/index.md @@ -2,23 +2,29 @@ title: resize slug: Web/CSS/resize tags: + - CSS 基本ユーザーインターフェイス - CSS - CSS プロパティ - - CSS 基本ユーザーインターフェイス - Reference + - recipe:css-property +browser-compat: css.properties.resize translation_of: Web/CSS/resize --- -<div>{{CSSRef}}</div> +{{CSSRef}} + +**`resize`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。 -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>resize</code></strong> プロパティは、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。</p> +{{EmbedInteractiveExample("pages/css/resize.html")}} -<div>{{EmbedInteractiveExample("pages/css/resize.html")}}</div> +`resize` は以下の者には適用されません。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +- インライン要素 +- {{cssxref("overflow")}} プロパティが `visible` であるブロック要素 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css">/* キーワード値 */ +```css +/* キーワード値 */ resize: none; resize: both; resize: horizontal; @@ -29,68 +35,78 @@ resize: inline; /* グローバル値 */ resize: inherit; resize: initial; -resize: unset;</pre> - -<p><code>resize</code> プロパティは以下の挙げた単一のキーワード値で指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code>none</code></dt> - <dd>ユーザーが要素の寸法を制御する方法を提供しません。</dd> - <dt><code>both</code></dt> - <dd>要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。</dd> - <dt><code>horizontal</code></dt> - <dd>要素はユーザーが寸法を変更できる仕組みを、<em>水平方向</em>について表示します。</dd> - <dt><code>vertical</code></dt> - <dd>要素はユーザーが寸法を変更できる仕組みを、<em>垂直方向</em>について表示します。</dd> - <dt><code>block</code> {{experimental_inline}}</dt> - <dd>要素はユーザーが寸法を変更できる仕組みを、<em>ブロック方向</em>について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。</dd> - <dt><code>inline</code> {{experimental_inline}}</dt> - <dd>要素はユーザーが寸法を変更できる仕組みを、<em>インライン方向</em>について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> <code>resize</code> は以下の場合は適用されません。</p> - -<ul> - <li>インライン要素</li> - <li>{{cssxref("overflow")}} プロパティが <code>visible</code> に設定されたブロック要素</li> -</ul> -</div> +resize: revert; +resize: unset; +``` + +`resize` プロパティは以下の挙げた単一のキーワード値で指定します。 + +### 値 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +- `none` + - : ユーザーが要素の寸法を制御する方法を提供しません。 +- `both` + - : 要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。 +- `horizontal` + - : 要素はユーザーが寸法を変更できる仕組みを、*水平方向*について表示します。 +- `vertical` + - : 要素はユーザーが寸法を変更できる仕組みを、*垂直方向*について表示します。 +- `block` {{experimental_inline}} + - : 要素はユーザーが寸法を変更できる仕組みを、*ブロック方向*について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。 +- `inline` {{experimental_inline}} + - : 要素はユーザーが寸法を変更できる仕組みを、*インライン方向*について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Disabling_resizability_of_textareas" name="Disabling_resizability_of_textareas">テキストエリアの寸法の変更を無効化</h3> +<h3 id="Disabling_resizability_of_textareas">テキストエリアの寸法の変更を無効化</h3> -<p>多くのブラウザーでは、 {{HTMLElement("textarea")}} 要素は既定で寸法が変更できます。 <code>resize</code> プロパティでこの動作を上書きすることができます。</p> +多くのブラウザーでは、 {{HTMLElement("textarea")}} 要素は既定で寸法が変更できます。 `resize` プロパティでこの動作を上書きすることができます。 -<h4 id="CSS">CSS</h4> +#### HTML -<pre class="brush: css">textarea { +```html +<textarea>Type some text here.</textarea> +``` + +#### CSS + +```css +textarea { resize: none; /* Disables resizability */ } -</pre> +``` -<h4 id="HTML">HTML</h4> +#### 結果 -<pre class="brush: html"><textarea>Type some text here.</textarea></pre> +{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}} -<h4 id="結果">結果</h4> +<h3 id="Using_resize_with_arbitrary_elements">任意の要素に対する resize の使用</h3> -<p>{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}</p> +`resize` プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な {{HTMLElement("div")}} の中に、寸法が変更可能な段落 ({{HTMLElement("p")}} 要素) を配置しています。 -<h3 id="任意の要素に対する_resize_の使用">任意の要素に対する resize の使用</h3> +#### HTML -<p><code>resize</code> プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な {{HTMLElement("div")}} の中に、寸法が変更可能な段落 ({{HTMLElement("p")}} 要素) を配置しています。</p> +```html +<div class="resizable"> + <p class="resizable"> + This paragraph is resizable in all directions, because + the CSS `resize` property is set to `both` on this element. + </p> +</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css">.resizable { +```css +.resizable { resize: both; overflow: scroll; border: 1px solid black; @@ -104,53 +120,21 @@ div { p { height: 200px; width: 200px; -} </pre> +} +``` -<h4 id="HTML_2">HTML</h4> +#### 結果 -<pre class="brush: html"><div class="resizable"> - <p class="resizable"> - This paragraph is resizable in all directions, because - the CSS `resize` property is set to `both` on this element. - </p> -</div> </pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}</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('CSS Logical Properties', '#resize', 'resize')}}</td> - <td>{{Spec2('CSS Logical Properties')}}</td> - <td><code>block</code> と <code>inline</code> の値を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}</td> - <td>{{Spec2('CSS3 Basic UI')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.resize")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{HTMLElement("textarea")}}</li> -</ul> +{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("textarea")}} diff --git a/files/ja/web/css/text-overflow/index.md b/files/ja/web/css/text-overflow/index.md index 9462e33e6a..e0be9b14e4 100644 --- a/files/ja/web/css/text-overflow/index.md +++ b/files/ja/web/css/text-overflow/index.md @@ -4,79 +4,114 @@ slug: Web/CSS/text-overflow tags: - CSS - CSS プロパティ - - CSS 基本ユーザーインターフェイス - Reference + - recipe:css-property +browser-compat: css.properties.text-overflow translation_of: Web/CSS/text-overflow --- -<p>{{CSSRef}}</p> +{{CSSRef}} -<p><strong><code>text-overflow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('<code>…</code>') を表示するか、独自の文字列を表示するかです。</p> +**`text-overflow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('`…`') を表示するか、独自の文字列を表示するかです。 -<div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div> +{{EmbedInteractiveExample("pages/css/text-overflow.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +`text-overflow` プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。 -<p><code>text-overflow</code> プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。</p> +```css +overflow: hidden; +white-space: nowrap; +``` -<pre class="brush: css no-line-numbers notranslate">overflow: hidden; -white-space: nowrap;</pre> +`text-overflow` プロパティは、*インライン*の進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。 -<p><code>text-overflow</code> プロパティは、<em>インライン</em>の進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +`text-overflow` プロパティは、1 つまたは 2 つの値を使用して指定することができます。1 つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。2 つの値が指定された場合は、最初の値が行の左端、2 番目の値が行の右端のあふれの動作を指定します。 -<p><code>text-overflow</code> プロパティは、一つまたは二つの値を使用して指定することができます。一つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。二つの値が指定された場合は、最初の値が行の左端、二番目の値が行の右端のあふれの動作を指定します。</p> +```css +text-overflow: clip; +text-overflow: ellipsis ellipsis; +text-overflow: ellipsis " [..]"; -<p>それぞれの値は以下のうちの一つです。</p> +/* グローバル値 */ +text-overflow: inherit; +text-overflow: initial; +text-overflow: revert; +text-overflow: unset; +``` -<ul> - <li>キーワード値のうちの一つ: <code><a href="#clip">clip</a></code>, <code><a href="#ellipsis">ellipsis</a></code>, <code><a href="#fade">fade</a></code></li> - <li>フェードの長さを制御するための <code><a href="#fade( <length> | <percentage> )">fade()</a></code> 関数に {{cssxref("<length>")}} または {{cssxref("<percentage>")}} が渡されたもの</li> - <li><code><a href="#<string>"><string></a></code></li> -</ul> +- キーワード値 `clip`, `ellipsis`, `fade` のうちの一つ +- フェードの長さを制御するための `fade()` 関数に {{cssxref("<length>")}} または {{cssxref("<percentage>")}} が渡されたもの +- `<string>` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt id="clip"><code>clip</code></dt> - <dd>このプロパティの既定値です。このキーワード値は<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">コンテンツ領域</a>の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが <code>text-overflow</code> の空文字列に対応していれば、 <code>text-overflow: '';</code> を指定することができます。</dd> - <dt id="ellipsis"><code>ellipsis</code></dt> - <dd>このキーワード値は、切り取られたテキストを表現するために省略記号 (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) を表示します。省略記号は<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">コンテンツ領域</a>内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。</dd> - <dt id="<string>"><code><string></code> {{experimental_inline}}</dt> - <dd>クリップされたテキストを表すために使われる {{cssxref("<string>")}} です。この文字列は<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">コンテンツ領域</a>内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。</dd> - <dt id="fade"><code>fade</code> {{experimental_inline}}</dt> - <dd>このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。</dd> - <dt id="fade( <length> | <percentage> )"><code>fade( <length> | <percentage> )</code> {{experimental_inline}}</dt> - <dd>このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。</dd> - <dd>引数はフェード効果が適用される範囲を指定します。 {{cssxref("<percentage>")}} は行ボックスの幅に対する割合になります。 <code>0</code> よりも小さい値は <code>0</code> に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。</dd> -</dl> +- `clip` + - : このプロパティの既定値です。このキーワード値は[コンテンツ領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが `text-overflow` の空文字列に対応していれば、 `text-overflow: '';` を指定することができます。 +- `ellipsis` + - : このキーワード値は、切り取られたテキストを表現するために省略記号 (`'…'`, `U+2026 HORIZONTAL ELLIPSIS`) を表示します。省略記号は[コンテンツ領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。 +- `<string>` {{experimental_inline}} + - : クリップされたテキストを表すために使われる {{cssxref("<string>")}} です。この文字列は[コンテンツ領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。 +- `fade` {{experimental_inline}} + - : このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。 +- `fade( <length> | <percentage> )` {{experimental_inline}} -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + - : このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。 -<p>{{CSSInfo}}</p> + 引数はフェード効果が適用される範囲を指定します。 {{cssxref("<percentage>")}} は行ボックスの幅に対する割合になります。 `0` よりも小さい値は `0` に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +<h3 id="One-value_syntax">値 1 つの構文</h3> + +この例は、様々な `text-overflow` の値が段落に適用された例を、左書きと右書きのテキストで示します。 + +#### HTML + +```html + +<div class="ltr"> + <h2>Left to right text</h2> + <pre>clip</pre> + <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>ellipsis</pre> + <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>" [..]"</pre> + <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</div> -<h3 id="CSS">CSS</h3> +<div class="rtl"> + <h2>Right to left text</h2> + <pre>clip</pre> + <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>ellipsis</pre> + <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + <pre>" [..]"</pre> + <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +</div> +``` -<pre class="brush: css notranslate">p { +#### CSS + +```css +p { width: 200px; border: 1px solid; padding: 2px 5px; - /* BOTH of the following are required for text-overflow */ + /* Both of the following are required for text-overflow */ white-space: nowrap; overflow: hidden; } -.overflow-visible { - white-space: initial; -} - .overflow-clip { text-overflow: clip; } @@ -86,231 +121,101 @@ white-space: nowrap;</pre> } .overflow-string { - /* Not supported in most browsers, - see the 'Browser compatibility' section below */ text-overflow: " [..]"; } -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}</p> - -<p class="note"><strong>注:</strong> 以下の表の「実際の結果」は、 MDN エディターが文字列値の <code>text-overflow</code> プロパティを持つ style 属性の中身をすべて削除するという制限があるため、正しく表示されないことがあります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th colspan="1" rowspan="2" scope="col" style="width: 15em;">CSS value</th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th> - <th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th> - </tr> - <tr> - <th scope="col">期待される結果</th> - <th scope="col">実際の結果</th> - <th scope="col">期待される結果</th> - <th scope="col">実際の結果</th> - </tr> - </thead> - <tbody> - <tr> - <td><em>visible overflow</em></td> - <td style="font-family: monospace;">1234567890</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;">1234567890</div> - </td> - <td style="font-family: monospace;">0987654321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip</code></td> - <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">1234567890</div> - </td> - <td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: ''</code></td> - <td style="font-family: monospace;">12345</td> - <td style="direction: ltr;"> - <div style="">1234567890</div> - </td> - <td style="font-family: monospace;">54321</td> - <td style="direction: rtl;"> - <div style="">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis</code></td> - <td style="font-family: monospace;">1234…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;">1234567890</div> - </td> - <td style="font-family: monospace;">…4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: '.'</code></td> - <td style="font-family: monospace;">1234.</td> - <td style="direction: ltr;"> - <div style="">1234567890</div> - </td> - <td style="font-family: monospace;">.4321</td> - <td style="direction: rtl;"> - <div style="">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip clip</code></td> - <td style="font-family: monospace;">123456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;">1234567890</div> - </td> - <td style="font-family: monospace;">654321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip ellipsis</code></td> - <td style="font-family: monospace;">1234…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;">1234567890</div> - </td> - <td style="font-family: monospace;">6543…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: clip '.'</code></td> - <td style="font-family: monospace;">1234.</td> - <td style="direction: ltr;"> - <div style="">1234567890</div> - </td> - <td style="font-family: monospace;">6543.</td> - <td style="direction: rtl;"> - <div style="">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis clip</code></td> - <td style="font-family: monospace;">…3456</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;">1234567890</div> - </td> - <td style="font-family: monospace;">…4321</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis ellipsis</code></td> - <td style="font-family: monospace;">…34…</td> - <td style="direction: ltr;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;">1234567890</div> - </td> - <td style="font-family: monospace;">…43…</td> - <td style="direction: rtl;"> - <div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: ellipsis '.'</code></td> - <td style="font-family: monospace;">…34.</td> - <td style="direction: ltr;"> - <div style="">1234567890</div> - </td> - <td style="font-family: monospace;">…43.</td> - <td style="direction: rtl;"> - <div style="">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' clip</code></td> - <td style="font-family: monospace;">,3456</td> - <td style="direction: ltr;"> - <div style="">1234567890</div> - </td> - <td style="font-family: monospace;">,4321</td> - <td style="direction: rtl;"> - <div style="">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' ellipsis</code></td> - <td style="font-family: monospace;">,34…</td> - <td style="direction: ltr;"> - <div style="">1234567890</div> - </td> - <td style="font-family: monospace;">,43…</td> - <td style="direction: rtl;"> - <div style="">1234567890</div> - </td> - </tr> - <tr> - <td><code>text-overflow: ',' '.'</code></td> - <td style="font-family: monospace;">,34.</td> - <td style="direction: ltr;"> - <div style="">1234567890</div> - </td> - <td style="font-family: monospace;">,43.</td> - <td style="direction: rtl;"> - <div style="">1234567890</div> - </td> - </tr> - </tbody> -</table> - -<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><a href="https://drafts.csswg.org/css-overflow-4/#text-overflow">CSS Overflow Module Level 4</a></td> - <td></td> - <td><code><string></code> および <code>fade</code> の値と <code>fade()</code> 関数を追加</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}</td> - <td>{{Spec2('CSS3 Overflow')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>以前の版のこのインターフェイスは <em>勧告候補</em> に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は <em>"草案"</em> レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.text-overflow")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連 CSS プロパティ: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li> - <li>単語の改行を制御する CSS プロパティ: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}</li> -</ul> + +body { + display: flex; + justify-content: space-around; +} + +.ltr > p { + direction: ltr; +} + +.rtl > p { + direction: rtl; +} +``` + +#### 結果 + +{{EmbedLiveSample('One-value_syntax', 600, 320)}} + +<h3 id="Two-value_syntax">値 2 つの構文</h3> + +この例は `text-overflow` の値 2 つの構文を表し、テキストの先頭と末尾の様々なあふれの動作を表しています。 +効果を見るには、スクロールをして行頭を隠すようにする必要があります。 + +#### HTML + +```html +<pre>clip clip</pre> +<p class="overflow-clip-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>clip ellipsis</pre> +<p class="overflow-clip-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>ellipsis ellipsis</pre> +<p class="overflow-ellipsis-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +<pre>ellipsis " [..]"</pre> +<p class="overflow-ellipsis-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> +``` + +#### CSS + +```css +p { + width: 200px; + border: 1px solid; + padding: 2px 5px; + + /* 以下のどちらも text-overflow に必要です */ + white-space: nowrap; + overflow: scroll; +} + +.overflow-clip-clip { + text-overflow: clip clip; +} + +.overflow-clip-ellipsis { + text-overflow: clip ellipsis; +} + +.overflow-ellipsis-ellipsis { + text-overflow: ellipsis ellipsis; +} + +.overflow-ellipsis-string { + text-overflow: ellipsis " [..]"; +} +``` + +#### JavaScript + +```js +// それぞれの段落をスクロールされ、行頭が隠れるようにします +const paras = document.querySelectorAll("p"); + +for (let para of paras) { + para.scroll(100, 0); +} +``` + +#### 結果 + +{{EmbedLiveSample('Two-value_syntax', 600, 360)}} + +## 仕様書 + +{{Specifications}} + +以前の版のこのインターフェイスは *勧告候補* に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は *草案* レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連 CSS プロパティ: {{cssxref("overflow")}}, {{cssxref("white-space")}} +- 単語の改行を制御する CSS プロパティ: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} diff --git a/files/ja/web/css/user-select/index.md b/files/ja/web/css/user-select/index.md index 9bd2ff1c44..5334ae5976 100644 --- a/files/ja/web/css/user-select/index.md +++ b/files/ja/web/css/user-select/index.md @@ -3,19 +3,21 @@ title: user-select slug: Web/CSS/user-select tags: - CSS - - CSS Property - - Property + - CSS プロパティ + - プロパティ - Reference - Selection - - 'recipe:css-property' + - recipe:css-property - user-select +browser-compat: css.properties.user-select translation_of: Web/CSS/user-select --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>user-select</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、ユーザーが文章を範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、{{Glossary("Chrome", "クローム")}}として読み込まれたコンテンツには何の影響も与えません。</p> +**`user-select`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ユーザーがテキストを範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、{{Glossary("Chrome", "クローム")}}として読み込まれたコンテンツには影響を与えません。 -<pre class="brush:css notranslate">/* キーワード値 */ +```css +/* キーワード値 */ user-select: none; user-select: auto; user-select: text; @@ -25,6 +27,7 @@ user-select: all; /* グローバル値 */ user-select: inherit; user-select: initial; +user-select: revert; user-select: unset; /* Mozilla 特有の値 */ @@ -35,71 +38,66 @@ user-select: unset; /* WebKit 特有の値 */ -webkit-user-select: none; -webkit-user-select: text; --webkit-user-select: all; /* Safari では動作しません。 "none" または +-webkit-user-select: all; /* Safari では動作しません。"none" または "text" を使ってください。さもないと、 - <html> コンテナーで入力可能になってしまいます。 */ + <html> コンテナーで入力可能になってしまいます。 */ /* Microsoft 特有の値 */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; -</pre> +``` -<div class="blockIndicator note"> -<p><strong>注</strong>: <code>user-select</code> は継承されるプロパティではありませんが、多くの場合、初期値の <code>auto</code> は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装して<em>おり</em>、いくつかの問題を発生させています。現在までに、 Chromium は<a class="external external-icon" href="https://chromium.googlesource.com/chromium/src/+/b01af0b296ecb855aac95c4ed335d188e6eac2de" rel="noopener">この問題を修正し</a>、最終的な動作が仕様書に合うようにすることを選択しています。</p> -</div> +> **Note:** `user-select` は継承されるプロパティではありませんが、多くの場合、初期値の `auto` は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装して*おり*、いくつかの問題を発生させています。現在までに、 Chromium は[この問題を修正し](https://chromium.googlesource.com/chromium/src/+/b01af0b296ecb855aac95c4ed335d188e6eac2de)、最終的な動作が仕様書に合うようにすることを選択しています。 + +## 構文 + +- `none` + - : 対象要素とその子孫要素の文章は範囲選択できません。 {{domxref("Selection")}} オブジェクトはこれらの要素も含むことができることに注意してください。 +- `auto` + + - : `auto` の使用値は下記のように決められます。 -<h2 id="Syntax" name="Syntax">構文</h2> - -<dl> - <dt><code>none</code></dt> - <dd>対象要素とその子孫要素の文章は範囲選択できません。 {{domxref("Selection")}} オブジェクトはこれらの要素も含むことができることに注意してください。</dd> - <dt><code>auto</code></dt> - <dd> - <p><code>auto</code> の使用値は下記のように決められます。</p> - - <ul> - <li><code>::before</code> と <code>::after</code> の擬似要素では、使用値は <code>none</code> になります。</li> - <li>編集可能な要素の場合、使用値は <code>contain</code> になります。</li> - <li>上記以外で、親要素の <code>user-select</code> の使用値が <code>all</code> の場合、対象要素の使用値も <code>all</code> になります。</li> - <li>上記以外で、親要素の <code>user-select</code> の使用値が <code>none</code> の場合、対象要素の使用値も <code>none</code> になります。</li> - <li>上記以外の場合、使用値は <code>text</code> になります。</li> - </ul> - </dd> - <dt><code>text</code></dt> - <dd>ユーザーはテキストを範囲選択できます。</dd> - <dt><code>all</code></dt> - <dd>この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。</dd> - <dt><code>contain</code></dt> - <dd>要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。</dd> - <dd><code>element</code>{{non-standard_inline}} (IE 特有のエイリアス)</dd> - <dd><code>contain</code> と同じです。 Internet Explorer だけが対応しています。</dd> -</dl> - -<div class="note"> -<p><strong>注:</strong> CSS UI 4 では、 <a href="https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05"><code>user-select: element</code> が <code>contain</code> に名称が変わります。</a></p> + - `::before` と `::after` の擬似要素では、使用値は `none` になります。 + - 編集可能な要素の場合、使用値は `contain` になります。 + - 上記以外で、親要素の `user-select` の使用値が `all` の場合、対象要素の使用値も `all` になります。 + - 上記以外で、親要素の `user-select` の使用値が `none` の場合、対象要素の使用値も `none` になります。 + - 上記以外の場合、使用値は `text` になります。 + +- `text` + - : ユーザーはテキストを範囲選択できます。 +- `all` + - : この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。 +- `contain` + - : 要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。 +- `element`{{non-standard_inline}} (IE 特有のエイリアス) + - : `contain` と同じです。 Internet Explorer だけが対応しています。 + +> **Note:** CSS UI 4 では、 [`user-select: element` が `contain` に名称が変わります。](https://github.com/w3c/csswg-drafts/commit/3f1d9db96fad8d9fc787d3ed66e2d5ad8cfadd05) </div> -<h2 id="公式定義">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h3> -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><p>このテキストを選択できるはずです。</p> -<p class="unselectable">ちょっと、このテキストの選択はできませんよ！</p> -<p class="all">一度クリックすると、このテキスト全体を選択します。</p> -</pre> +```html +<p>このテキストを選択できるはずです。</p> +<p class="unselectable">ちょっと、このテキストの選択はできませんよ！</p> +<p class="all">一度クリックすると、このテキスト全体を選択します。</p> +``` -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css notranslate">.unselectable { +```css +.unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; @@ -112,40 +110,21 @@ user-select: unset; -ms-user-select: all; user-select: all; } -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Examples")}}</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('CSS4 UI', '#propdef-user-select', 'user-select')}}</td> - <td>{{Spec2('CSS4 UI')}}</td> - <td>初回定義。 <code>-webkit-user-select</code> は <code>user-select</code> の非推奨のエイリアスであることも定義した。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.user-select")}}</p> -</div> +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{Cssxref("::selection")}} 擬似要素</li> - <li>JavaScript の {{domxref("Selection")}} オブジェクト</li> -</ul> +- {{Cssxref("::selection")}} 擬似要素 +- JavaScript の {{domxref("Selection")}} オブジェクト |