From d54b0e0f0a7aa80f4bb20fbdab8ee03a381c4ea2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 15 Oct 2021 01:38:00 +0900 Subject: .html を .md に改名 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/appearance/index.html | 2671 -------------------- files/ja/web/css/appearance/index.md | 2671 ++++++++++++++++++++ files/ja/web/css/box-sizing/index.html | 135 - files/ja/web/css/box-sizing/index.md | 135 + .../index.html | 119 - .../index.md | 119 + files/ja/web/css/cursor/index.html | 329 --- files/ja/web/css/cursor/index.md | 329 +++ files/ja/web/css/ime-mode/index.html | 102 - files/ja/web/css/ime-mode/index.md | 102 + files/ja/web/css/outline-color/index.html | 136 - files/ja/web/css/outline-color/index.md | 136 + files/ja/web/css/outline-offset/index.html | 85 - files/ja/web/css/outline-offset/index.md | 85 + files/ja/web/css/outline-style/index.html | 241 -- files/ja/web/css/outline-style/index.md | 241 ++ files/ja/web/css/outline-width/index.html | 139 - files/ja/web/css/outline-width/index.md | 139 + files/ja/web/css/outline/index.html | 143 -- files/ja/web/css/outline/index.md | 143 ++ files/ja/web/css/resize/index.html | 156 -- files/ja/web/css/resize/index.md | 156 ++ files/ja/web/css/text-overflow/index.html | 316 --- files/ja/web/css/text-overflow/index.md | 316 +++ files/ja/web/css/user-select/index.html | 151 -- files/ja/web/css/user-select/index.md | 151 ++ 26 files changed, 4723 insertions(+), 4723 deletions(-) delete mode 100644 files/ja/web/css/appearance/index.html create mode 100644 files/ja/web/css/appearance/index.md delete mode 100644 files/ja/web/css/box-sizing/index.html create mode 100644 files/ja/web/css/box-sizing/index.md delete mode 100644 files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md delete mode 100644 files/ja/web/css/cursor/index.html create mode 100644 files/ja/web/css/cursor/index.md delete mode 100644 files/ja/web/css/ime-mode/index.html create mode 100644 files/ja/web/css/ime-mode/index.md delete mode 100644 files/ja/web/css/outline-color/index.html create mode 100644 files/ja/web/css/outline-color/index.md delete mode 100644 files/ja/web/css/outline-offset/index.html create mode 100644 files/ja/web/css/outline-offset/index.md delete mode 100644 files/ja/web/css/outline-style/index.html create mode 100644 files/ja/web/css/outline-style/index.md delete mode 100644 files/ja/web/css/outline-width/index.html create mode 100644 files/ja/web/css/outline-width/index.md delete mode 100644 files/ja/web/css/outline/index.html create mode 100644 files/ja/web/css/outline/index.md delete mode 100644 files/ja/web/css/resize/index.html create mode 100644 files/ja/web/css/resize/index.md delete mode 100644 files/ja/web/css/text-overflow/index.html create mode 100644 files/ja/web/css/text-overflow/index.md delete mode 100644 files/ja/web/css/user-select/index.html create mode 100644 files/ja/web/css/user-select/index.md diff --git a/files/ja/web/css/appearance/index.html b/files/ja/web/css/appearance/index.html deleted file mode 100644 index c3a4b35afa..0000000000 --- a/files/ja/web/css/appearance/index.html +++ /dev/null @@ -1,2671 +0,0 @@ ---- -title: 'appearance (-moz-appearance, -webkit-appearance)' -slug: Web/CSS/appearance -tags: - - '-moz-appearance' - - '-webkit-appearance' - - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - Reference - - appearance -translation_of: Web/CSS/appearance ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

CSS の -moz-appearance プロパティは、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために、 Gecko (Firefox) によって使用されます。

- -

-webkit-appearance プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から -webkit-appearance に対応しています。

- -
{{EmbedInteractiveExample("pages/css/appearance.html")}}
- - - -

このプロパティは XUL スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、 Mozilla プラットフォームに搭載するウィジェットの XBL 実装でも使用されます。

- -
-

互換性メモ: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 none キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。

-
- -

構文

- -
/* CSS 基本ユーザーインターフェイス Level 4 の値 */
-appearance: none;
-appearance: auto;
-appearance: button;
-appearance: textfield;
-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;
-
-/* Gecko で使用できる値の一部 */
--moz-appearance: scrollbarbutton-up;
--moz-appearance: button-bevel;
-
-/* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
--webkit-appearance: media-mute-button;
--webkit-appearance: caret;
-
- -

-moz-appearance プロパティは、以下の一覧から一つの値を選択して指定することができます。

- -

値

- -

<appearance> は以下のキーワードのうちの一つです。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
値デモブラウザー説明
none - - {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge特別なスタイルは適用されません。これが既定です。
auto {{Experimental_Inline}} - - {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}なしユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では none として動作します。
attachment {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}Safari
borderless-attachment {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}Safari
button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がボタンのように描画されます。
button-arrow-down {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-next {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-previous {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-up {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-bevel {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
button-focus {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
caps-lock-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}Safari Edge
caret {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
checkbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}Firefox要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefox
checkmenuitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefox
color-well {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}Safariinput type=color
continuous-capacity-level-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}Safari
default-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}Safari Edge
discrete-capacity-level-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}Safari
dualbutton {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
groupbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
inner-spin-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}Firefox Chrome Safari
image-controls-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}Safari
list-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}Safaridatalist
listbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
listitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
media-enter-fullscreen-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-exit-fullscreen-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-fullscreen-volume-slider {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}Safari
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}Safari
media-mute-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-play-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-overlay-play-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}Chrome Safari
media-return-to-realtime-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}Safari
media-rewind-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}Safari
media-seek-back-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}Safari Edge
media-seek-forward-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}Safari Edge
media-toggle-closed-captions-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}Chrome Safari
media-slider {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}Chrome Safari Edge
media-sliderthumb {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}Chrome Safari Edge
media-volume-slider-container {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}Chrome Safari
media-volume-slider-mute-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}Safari
media-volume-slider {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}Chrome Safari
media-volume-sliderthumb {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}Chrome Safari
media-controls-background {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-dark-bar-background {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}Safari
media-controls-fullscreen-background {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-light-bar-background {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}Safari
media-current-time-display {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}Chrome Safari
media-time-remaining-display {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}Chrome Safari
menuarrow {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menubar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menucheckbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuimage {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menulist {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-textfield {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)
menupopup {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuradio {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuseparator {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
meter - - {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}Chrome Safari FirefoxFirefox 64 で追加
meterbar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}FirefoxFirefox 16 の新機能。代わりに meter を使用のこと
meterchunk {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxFirefox 16 で追加。 Firefox 64 で削除。
number-input {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}Firefox
progress-bar - - {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}Chrome Safari FirefoxFirefox 64 で追加
progress-bar-value {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}Chrome Safari
progressbar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}Firefox要素が進捗バーのようにスタイル付けられます。代わりに progress-bar を使用のこと
progressbar-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}Firefox
progresschunk {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
progresschunk-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
push-button {{Non-standard_Inline}} - - {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}Chrome Safari Edge
radio {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}Firefox要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
radiomenuitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
range {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}Firefox
range-thumb {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefox
rating-level-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}Safari
resizer {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
resizerpanel {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scale-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbend {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}Firefox
scalethumb-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbstart {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}Firefox
scalethumbtick {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}Firefox
scalethumb-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}Firefox
scale-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-down {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-left {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-right {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-up {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarthumb-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}Firefox
scrollbartrack-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbartrack-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}Firefox
searchfield {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
searchfield-decoration {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-decoration {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}Safari Edge
searchfield-cancel-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}Chrome Safari Edge
snapshotted-plugin-overlay {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}Safari
separator {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
sheet {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}None
slider-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
slider-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-horizontal {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-vertical {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
spinner {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-downbutton {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-textfield {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-upbutton {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
splitter {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
square-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}Chrome Safari Edge
statusbar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
statusbarpanel {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tabpanel {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tabpanels {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab-scroll-arrow-back {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab-scroll-arrow-forward {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
textarea - - {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield-multiline {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}Firefox代わりに textarea を使用のこと
toolbar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbarbutton {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbarbutton-dropdown {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbargripper {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tooltip {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheader {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheadercell {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheadersortarrow {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeitem {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeline {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treetwisty {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treetwistyopen {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeview {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
relevancy-level-indicator {{Non-standard_Inline}} - - {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}Safari
-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} - - {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。
-moz-win-browsertabbar-toolbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。
-moz-win-communicationstext {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-win-communications-toolbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} - - {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。
-moz-win-media-toolbox {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-moz-window-button-box {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-box-maximized {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-close {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-maximize {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-minimize {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-restore {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-bottom {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-left {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-right {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-titlebar {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-titlebar-maximized {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-apple-pay-button {{Non-standard_Inline}} - - {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}SafariiOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

次のようにすると、要素を Firefox のツールバーボタンのように見せます。

- -
.exampleone {
-  -moz-appearance: toolbarbutton;
-}
-
- -

カスタムスタイリングをラジオボタンとチェックボックス適用するための appearance:none の使用例を示す例は、このJSFiddleも参照してください。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}{{Spec2("CSS4 Basic UI")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.appearance")}}

- -

関連情報

- - diff --git a/files/ja/web/css/appearance/index.md b/files/ja/web/css/appearance/index.md new file mode 100644 index 0000000000..c3a4b35afa --- /dev/null +++ b/files/ja/web/css/appearance/index.md @@ -0,0 +1,2671 @@ +--- +title: 'appearance (-moz-appearance, -webkit-appearance)' +slug: Web/CSS/appearance +tags: + - '-moz-appearance' + - '-webkit-appearance' + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - Reference + - appearance +translation_of: Web/CSS/appearance +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

CSS の -moz-appearance プロパティは、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために、 Gecko (Firefox) によって使用されます。

+ +

-webkit-appearance プロパティは、 WebKit ベースのブラウザー (Safari など) と Blink ベースのブラウザー (Chrome, Opera など) で同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から -webkit-appearance に対応しています。

+ +
{{EmbedInteractiveExample("pages/css/appearance.html")}}
+ + + +

このプロパティは XUL スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されます。また、 Mozilla プラットフォームに搭載するウィジェットの XBL 実装でも使用されます。

+ +
+

互換性メモ: ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 none キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。

+
+ +

構文

+ +
/* CSS 基本ユーザーインターフェイス Level 4 の値 */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+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;
+
+/* Gecko で使用できる値の一部 */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: button-bevel;
+
+/* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
+-webkit-appearance: media-mute-button;
+-webkit-appearance: caret;
+
+ +

-moz-appearance プロパティは、以下の一覧から一つの値を選択して指定することができます。

+ +

値

+ +

<appearance> は以下のキーワードのうちの一つです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値デモブラウザー説明
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge特別なスタイルは適用されません。これが既定です。
auto {{Experimental_Inline}} + + {{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}}なしユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では none として動作します。
attachment {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}}Safari
borderless-attachment {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}}Safari
button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がボタンのように描画されます。
button-arrow-down {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-next {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-previous {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-arrow-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
button-bevel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
button-focus {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
caps-lock-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}}Safari Edge
caret {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
checkbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がチェックボックスのように描画されます。実際の "checkbox" 部分のみを含みます。
checkbox-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}Firefox要素がチェックボックスのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとチェックボックスを含みます。
checkbox-label {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}}Firefox
checkmenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}Firefox
color-well {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}}Safariinput type=color
continuous-capacity-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}}Safari
default-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}Safari Edge
discrete-capacity-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}}Safari
dualbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
groupbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
inner-spin-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}Firefox Chrome Safari
image-controls-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}Safari
list-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}Safaridatalist
listbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
listitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
media-enter-fullscreen-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-exit-fullscreen-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}Chrome Safari
media-fullscreen-volume-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}Safari
media-fullscreen-volume-slider-thumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}Safari
media-mute-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-play-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}Chrome Safari Edge
media-overlay-play-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}Chrome Safari
media-return-to-realtime-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}Safari
media-rewind-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}Safari
media-seek-back-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}Safari Edge
media-seek-forward-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}Safari Edge
media-toggle-closed-captions-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}Chrome Safari
media-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}Chrome Safari Edge
media-sliderthumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}Chrome Safari Edge
media-volume-slider-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}Chrome Safari
media-volume-slider-mute-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}Safari
media-volume-slider {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}Chrome Safari
media-volume-sliderthumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}Chrome Safari
media-controls-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-dark-bar-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}Safari
media-controls-fullscreen-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}Chrome Safari
media-controls-light-bar-background {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}Safari
media-current-time-display {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}Chrome Safari
media-time-remaining-display {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}}Chrome Safari
menuarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menubar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menucheckbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuimage {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。要素がメニュー項目としてスタイル付けられます。項目にマウスカーソルを合わせると強調されます。
menuitemtext {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menulist {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素が開くことのできる menulist を示すボタンとしてスタイル付けられます。
menulist-text {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
menulist-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素が menulist のテキストフィールドとしてスタイル付けられます。 (Windows プラットフォームでは実装されていません)
menupopup {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuradio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
menuseparator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
meter + + {{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}}Chrome Safari FirefoxFirefox 64 で追加
meterbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}FirefoxFirefox 16 の新機能。代わりに meter を使用のこと
meterchunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}FirefoxFirefox 16 で追加。 Firefox 64 で削除。
number-input {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}Firefox
progress-bar + + {{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}}Chrome Safari FirefoxFirefox 64 で追加
progress-bar-value {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}}Chrome Safari
progressbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}Firefox要素が進捗バーのようにスタイル付けられます。代わりに progress-bar を使用のこと
progressbar-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}}Firefox
progresschunk {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
progresschunk-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
push-button {{Non-standard_Inline}} + + {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}Chrome Safari Edge
radio {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge要素がラジオボタンのように描画されます。実際の "radio button" 部分のみを含みます。
radio-container {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}Firefox要素がラジオボタンのコンテナのように描画されます。あるプラットフォーム下では背景の発光効果を含みます。通常はラベルとラジオボタンを含みます。
radio-label {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
radiomenuitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
range {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}}Firefox
range-thumb {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}}Firefox
rating-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}}Safari
resizer {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
resizerpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scale-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbend {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}}Firefox
scalethumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scalethumbstart {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}}Firefox
scalethumbtick {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}}Firefox
scalethumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}}Firefox
scale-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}}Firefox
scrollbarbutton-down {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarbutton-up {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}FirefoxFirefox 63 で削除
scrollbarthumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbarthumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}Firefox
scrollbartrack-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}Firefox
scrollbartrack-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}Firefox
searchfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
searchfield-decoration {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-decoration {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}}Safari Edge
searchfield-results-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}Safari Edge
searchfield-cancel-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}Chrome Safari Edge
snapshotted-plugin-overlay {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}}Safari
separator {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
sheet {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}}None
slider-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
slider-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-horizontal {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}}Chrome Safari Edge
sliderthumb-vertical {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}}Chrome Safari Edge
spinner {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-downbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
spinner-upbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
splitter {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
square-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}Chrome Safari Edge
statusbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
statusbarpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tabpanel {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tabpanels {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab-scroll-arrow-back {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tab-scroll-arrow-forward {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
textarea + + {{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}}Firefox Chrome Safari Edge
textfield-multiline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}}Firefox代わりに textarea を使用のこと
toolbar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbarbutton {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbarbutton-dropdown {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbargripper {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
tooltip {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheader {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheadercell {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeheadersortarrow {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeitem {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeline {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treetwisty {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treetwistyopen {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
treeview {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
relevancy-level-indicator {{Non-standard_Inline}} + + {{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}}Safari
-moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用しますが、境界がありません。
-moz-win-browsertabbar-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、ブラウザーのタブバーに使用されることを想定しています。
-moz-win-communicationstext {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-win-communications-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、コミュニケーションと生産性アプリケーションに使用されることを想定しています。対応する前面色は -moz-win-communicationstext です。
-moz-win-exclude-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは、要素に Aero Glass 効果を適用させないために使用します。
-moz-win-glass {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このスタイルは要素に Aero Glass 効果を適用します。
-moz-win-media-toolbox {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除。このツールボックススタイルは、メディアオブジェクトを管理するアプリケーションに使用されることを想定しています。対応する前面色は -moz-win-mediatext です。
-moz-window-button-box {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-box-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-close {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-maximize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-minimize {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-button-restore {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-bottom {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-left {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-frame-right {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-titlebar {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-moz-window-titlebar-maximized {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}}FirefoxFirefox 64 で削除
-apple-pay-button {{Non-standard_Inline}} + + {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}SafariiOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

次のようにすると、要素を Firefox のツールバーボタンのように見せます。

+ +
.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+
+ +

カスタムスタイリングをラジオボタンとチェックボックス適用するための appearance:none の使用例を示す例は、このJSFiddleも参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Basic UI", "#appearance-switching", "appearance")}}{{Spec2("CSS4 Basic UI")}}初回定義
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.appearance")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/box-sizing/index.html b/files/ja/web/css/box-sizing/index.html deleted file mode 100644 index 49d9c8e731..0000000000 --- a/files/ja/web/css/box-sizing/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: box-sizing -slug: Web/CSS/box-sizing -tags: - - Boxes - - CSS - - CSS Box Model - - CSS Property - - CSS プロパティ - - CSS ボックスモデル - - Reference - - border-box - - box model - - box-sizing - - content-box - - height - - size - - width -translation_of: Web/CSS/box-sizing ---- -

{{CSSRef}}

- -

CSS の box-sizing プロパティは、要素の全体の幅と高さをどのように計算するのかを設定します。

- -
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
- - - -

CSS ボックスモデルの既定では、要素に割り当てられた width および height は、要素のコンテンツ領域のみに適用されます。要素に境界線やパディングがある場合、画面にレンダリングされる矩形の大きさは width および height にこれらを加えたものになります。つまり、 width および height を設定する際には、境界線やパディングが加えられるように値を調整しなければなりません。例えば、 width: 25%; で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。

- -

box-sizing プロパティは上記の振る舞いを調整するために使用できます。

- - - -
-

注: 要素をレイアウトする際には、 box-sizing を border-box に設定しておくと便利です。これにより、要素の寸法の扱いが非常に簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 position: relative または position: absolute を使用する場合、 box-sizing: content-box を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。

-
- -

構文

- -

box-sizing プロパティは、以下のいずれか1つのキーワードを選択して定義します。

- -

値

- -
-
content-box
-
これは、 CSS 標準仕様で規定されている初期値および既定値です。 {{Cssxref("width")}} および {{Cssxref("height")}} プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界線、マージン領域を含みません。例えば .box {width: 350px; border: 10px solid black;} は 370px の幅のボックスを描画します。
-
この場合、それぞれの要素の寸法は、 幅 = コンテンツの幅、高さ = コンテンツの高さ として計算されます（境界線やパディングの値を除く）。
-
border-box
-
{{Cssxref("width")}} および {{Cssxref("height")}} プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。なお、パディングと境界線はボックスの内側に置かれることに注意してください。例えば .box {width: 350px; border: 10px solid black;} は、ブラウザーでボックスの幅が 350px、コンテンツ領域の幅 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、要素を非表示にするために border-box を使用することはできません。
-
この場合、それぞれの要素の寸法は、 幅 = 境界線 + パディング + コンテンツの幅、 高さ = 境界線 + パディング + コンテンツの高さ として計算されます。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

content-box と border-box のボックスサイズ

- -

この例では、2つの box-sizing の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。

- -

HTML

- -
<div class="content-box">Content box</div>
-<br>
-<div class="border-box">Border box</div>
- -

CSS

- -
div {
-  width: 160px;
-  height: 80px;
-  padding: 20px;
-  border: 8px solid red;
-  background: yellow;
-}
-
-.content-box {
-  box-sizing: content-box;
-  /* 全体の幅: 160px + (2 * 20px) + (2 * 8px) = 216px
-     全体の高さ: 80px + (2 * 20px) + (2 * 8px) = 136px
-     コンテンツ領域の幅: 160px
-     コンテンツ領域の高さ: 80px */
-}
-
-.border-box {
-  box-sizing: border-box;
-  /* 全体の幅: 160px
-     全体の高さ: 80px
-     コンテンツ領域の幅: 160px - (2 * 20px) - (2 * 8px) = 104px
-     コンテンツ領域の高さ: 80px - (2 * 20px) - (2 * 8px) = 24px */
-}
-
- -

結果

- -

{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.box-sizing")}}

- -

関連情報

- - diff --git a/files/ja/web/css/box-sizing/index.md b/files/ja/web/css/box-sizing/index.md new file mode 100644 index 0000000000..49d9c8e731 --- /dev/null +++ b/files/ja/web/css/box-sizing/index.md @@ -0,0 +1,135 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - Boxes + - CSS + - CSS Box Model + - CSS Property + - CSS プロパティ + - CSS ボックスモデル + - Reference + - border-box + - box model + - box-sizing + - content-box + - height + - size + - width +translation_of: Web/CSS/box-sizing +--- +

{{CSSRef}}

+ +

CSS の box-sizing プロパティは、要素の全体の幅と高さをどのように計算するのかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

CSS ボックスモデルの既定では、要素に割り当てられた width および height は、要素のコンテンツ領域のみに適用されます。要素に境界線やパディングがある場合、画面にレンダリングされる矩形の大きさは width および height にこれらを加えたものになります。つまり、 width および height を設定する際には、境界線やパディングが加えられるように値を調整しなければなりません。例えば、 width: 25%; で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。

+ +

box-sizing プロパティは上記の振る舞いを調整するために使用できます。

+ + + +
+

注: 要素をレイアウトする際には、 box-sizing を border-box に設定しておくと便利です。これにより、要素の寸法の扱いが非常に簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 position: relative または position: absolute を使用する場合、 box-sizing: content-box を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。

+
+ +

構文

+ +

box-sizing プロパティは、以下のいずれか1つのキーワードを選択して定義します。

+ +

値

+ +
+
content-box
+
これは、 CSS 標準仕様で規定されている初期値および既定値です。 {{Cssxref("width")}} および {{Cssxref("height")}} プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界線、マージン領域を含みません。例えば .box {width: 350px; border: 10px solid black;} は 370px の幅のボックスを描画します。
+
この場合、それぞれの要素の寸法は、 幅 = コンテンツの幅、高さ = コンテンツの高さ として計算されます（境界線やパディングの値を除く）。
+
border-box
+
{{Cssxref("width")}} および {{Cssxref("height")}} プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。なお、パディングと境界線はボックスの内側に置かれることに注意してください。例えば .box {width: 350px; border: 10px solid black;} は、ブラウザーでボックスの幅が 350px、コンテンツ領域の幅 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、要素を非表示にするために border-box を使用することはできません。
+
この場合、それぞれの要素の寸法は、 幅 = 境界線 + パディング + コンテンツの幅、 高さ = 境界線 + パディング + コンテンツの高さ として計算されます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

content-box と border-box のボックスサイズ

+ +

この例では、2つの box-sizing の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* 全体の幅: 160px + (2 * 20px) + (2 * 8px) = 216px
+     全体の高さ: 80px + (2 * 20px) + (2 * 8px) = 136px
+     コンテンツ領域の幅: 160px
+     コンテンツ領域の高さ: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* 全体の幅: 160px
+     全体の高さ: 80px
+     コンテンツ領域の幅: 160px - (2 * 20px) - (2 * 8px) = 104px
+     コンテンツ領域の高さ: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.box-sizing")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html deleted file mode 100644 index 98b56ee788..0000000000 --- a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: cursor プロパティでの URL 値の使用 -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 ---- -
{{cssref}}
- -

Gecko 1.8 は CSS の{{CSSxRef("cursor")}} プロパティで、 URL の値を Windows と Linux で対応しています。 Mac の対応は Gecko 2 (Firefox 4) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。

- -

構文

- -

基本 (CSS 2.1) の基本的な記述は次の通りです。

- -
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
- -

つまり、0個以上の URL が (カンマ区切りで) 指定されることがありますが、 auto や pointer などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。

- -

例えば次のような値が有効です。

- -
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
- -

始めに foo.cur を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、 bar.gif を読み込もうとし、どちらも利用できない場合は auto が使用されます。

- -

Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。

- -
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
-
- -

これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。

- -
.foo  {
-  cursor: auto;
-  cursor: url(cursor1.png) 4 12, auto;
-}
-
-.bar  {
-  cursor: pointer;
-  cursor: url(cursor2.png) 2 2, pointer;
-}
-
-/* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */
-
- -

初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。

- -

制限

- -

Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。

- -
-

Note: Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。

-
- -

Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。

- -

(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)

- -

Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。

- -

カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。

- -

ブラウザーの互換性

- -

Microsoft Internet Explorer 6.0 も cursor プロパティに対応しています。しかし、次の制限があります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ブラウザー最初期バージョン形式 (例)X-Y座標有効範囲
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows および Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 から、 Safari (Mac) は .cur に対応しています。
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 new file mode 100644 index 0000000000..98b56ee788 --- /dev/null +++ b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md @@ -0,0 +1,119 @@ +--- +title: cursor プロパティでの URL 値の使用 +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 +--- +
{{cssref}}
+ +

Gecko 1.8 は CSS の{{CSSxRef("cursor")}} プロパティで、 URL の値を Windows と Linux で対応しています。 Mac の対応は Gecko 2 (Firefox 4) で追加されました。これによって任意の画像を、 Gecko が対応している画像形式ならば何でも、マウスカーソルとして指定することができます。

+ +

構文

+ +

基本 (CSS 2.1) の基本的な記述は次の通りです。

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
+ +

つまり、0個以上の URL が (カンマ区切りで) 指定されることがありますが、 auto や pointer などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。

+ +

例えば次のような値が有効です。

+ +
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+ +

始めに foo.cur を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、 bar.gif を読み込もうとし、どちらも利用できない場合は auto が使用されます。

+ +

Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。

+ +
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
+
+ +

これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。

+ +
.foo  {
+  cursor: auto;
+  cursor: url(cursor1.png) 4 12, auto;
+}
+
+.bar  {
+  cursor: pointer;
+  cursor: url(cursor2.png) 2 2, pointer;
+}
+
+/* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */
+
+ +

初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。

+ +

制限

+ +

Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。

+ +
+

Note: Gecko 2.0 以降は、 Gecko では SVG 形式のカーソルにも対応しています。しかし、 SVG 画像は (パーセント値ではない) 長さの値による幅と高さを SVG のルートノードに設定しなければなりません。 JavaScript、 CSS アニメーション、 SVG を内部にもつ宣言的な SMIL は無視されます。例えば、 SVG を使用してアニメーションカーソルを作成することはできません。

+
+ +

Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。

+ +

(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)

+ +

Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。

+ +

カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。

+ +

ブラウザーの互換性

+ +

Microsoft Internet Explorer 6.0 も cursor プロパティに対応しています。しかし、次の制限があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザー最初期バージョン形式 (例)X-Y座標有効範囲
Internet Explorer6.0.cur | .ani---
Firefox (Gecko), Windows および Linux1.5 (1.8).cur | .png | .gif | .jpg1.5 (1.8)
Firefox (Gecko)4.0 (2.0).cur | .png | .gif | .jpg | .svg(Gecko 2.0)
Opera---------
Safari (Webkit)3.0 (522-523).cur | .png | .gif | .jpg3.0 (522-523)
OS X 10.5 から、 Safari (Mac) は .cur に対応しています。
diff --git a/files/ja/web/css/cursor/index.html b/files/ja/web/css/cursor/index.html deleted file mode 100644 index cd3cb00f97..0000000000 --- a/files/ja/web/css/cursor/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: cursor -slug: Web/CSS/cursor -tags: - - Arrow - - CSS - - CSS Property - - CSS プロパティ - - Cursor - - Custom Cursor - - Reference - - UI - - mouse - - pointer - - 'recipe:css-property' - - カスタムカーソル - - カーソル - - ポインター - - マウス -translation_of: Web/CSS/cursor ---- -

{{CSSRef}}

- -

cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。

- -
{{EmbedInteractiveExample("pages/css/cursor.html")}}
- - - -

構文

- -
/* キーワード値 */
-cursor: pointer;
-cursor: auto;
-
-/* URL とキーワードによる代替 */
-cursor: url(hand.cur), pointer;
-
-/* URL と座標とキーワードによる代替 */
-cursor: url(cursor1.png) 4 12, auto;
-cursor: url(cursor2.png) 2 2, pointer;
-
-/* グローバル値 */
-cursor: inherit;
-cursor: initial;
-cursor: unset;
-
- -

cursor プロパティはゼロ個以上の <url> をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの <url> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。

- -

それぞれの <url> には二つの空白で区切った数値を続けることができ、 <x><y> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。

- -

例えば、これは <url> 値を使用して二つの画像を指定し、 <x><y> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは progress キーワードで代替されるように指定しています。

- -
cursor: url(one.svg), url(two.svg) 5 5, progress;
- -

値

- -
-
<url>
- url(…) の形式か、又はカンマ区切りのリスト url(…), url(…), … で画像の URL を指定します。複数の {{cssxref("<url>")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。 -
<x> <y> {{experimental_inline}}
-
任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。
-
キーワード値
-
-

値の上にマウスを当てると、各項目の実際の表示を確認できます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
カテゴリCSS 値例説明
一般auto現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。
defaultdefault.gifプラットフォームに依存する既定のカーソルです。ふつうは矢印です。
noneカーソルを表示しません。
リンクおよび状態context-menucontext-menu.pngコンテキストメニューが利用できることを示します。
helphelp.gifヘルプが使用可能であることを示します。
pointerpointer.gifカーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
progressprogress.gifバックグラウンドでプログラムがビジー状態dが、 (wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
waitwait.gifプログラムがビジー状態で、 (progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
選択cellcell.gif表のセルまたは一連のセルが選択できることを示します。
crosshaircrosshair.gif十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
texttext.gifテキストを選択可能であることを示します。通常、 I ビームが表示されます。
vertical-textvertical-text.gif縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
ドラッグ＆ドロップaliasalias.gifエイリアスやショートカットが作成されることを示します。
copycopy.gif何かがコピーされることを示します。
movemove.gif何かが移動されることを示します。
no-dropno-drop.gif現在の位置にアイテムがドロップできないことを示します。
- {{bug("275173")}}: Windows および Mac OS X では、 no-drop が not-allowed と同じです。
not-allowednot-allowed.gif要求された操作が受け付けられないことを示します。
grabgrab.gif何かがグラブ (移動のためにドラッグ) することができることを示します。
grabbinggrabbing.gif何かがグラブ (移動のためにドラッグ) されようとしていることを示します。
サイズ変更＆スクロールall-scrollall-scroll.gif何かが任意の方向にスクロール (パン) 可能であることを示します。
- {{bug("275174")}}: Windows では、 all-scroll は move 同じです。
col-resizecol-resize.gifアイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
row-resizerow-resize.gifアイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
n-resize上方向へのサイズ変更カーソルの例辺が移動できることを表します。例えば、 se-resize のカーソルはボックスの南東 (south-east) の角から移動を開始した時に使われます。
- 環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize および s-resize は ns-resize と同じです。
e-resize右方向へのサイズ変更カーソルの例
s-resize下方向へのサイズ変更カーソルの例
w-resize左方向へのサイズ変更カーソルの例
ne-resize右上方向へのサイズ変更カーソルの例
nw-resize左上方向へのサイズ変更カーソルの例
se-resize右下方向へのサイズ変更カーソルの例
sw-resize左下方向へのサイズ変更カーソルの例
ew-resize3-resize.gif双方向へのサイズ変更が可能であることを示します。
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
拡大/縮小zoom-inzoom-in.gif -

拡大/縮小が可能であることを示す

-
zoom-outzoom-out.gif
-
-
- -

使用上の注意

- -

仕様書では cursor について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。

- -

カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

カーソルの種類の設定

- -
.foo {
-  cursor: crosshair;
-}
-
-.bar {
-  cursor: zoom-in;
-}
-
-/* URL を使用する場合は、代替のキーワード値が必要です。 */
-.baz {
-  cursor: url("hyper.cur"), auto;
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}幾つかのキーワード、ポジション構文、 url() 関数形式の追加
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -
{{Compat("css.properties.cursor")}}
- -

関連情報

- - diff --git a/files/ja/web/css/cursor/index.md b/files/ja/web/css/cursor/index.md new file mode 100644 index 0000000000..cd3cb00f97 --- /dev/null +++ b/files/ja/web/css/cursor/index.md @@ -0,0 +1,329 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - Arrow + - CSS + - CSS Property + - CSS プロパティ + - Cursor + - Custom Cursor + - Reference + - UI + - mouse + - pointer + - 'recipe:css-property' + - カスタムカーソル + - カーソル + - ポインター + - マウス +translation_of: Web/CSS/cursor +--- +

{{CSSRef}}

+ +

cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+cursor: pointer;
+cursor: auto;
+
+/* URL とキーワードによる代替 */
+cursor: url(hand.cur), pointer;
+
+/* URL と座標とキーワードによる代替 */
+cursor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* グローバル値 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

cursor プロパティはゼロ個以上の <url> をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの <url> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。

+ +

それぞれの <url> には二つの空白で区切った数値を続けることができ、 <x><y> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。

+ +

例えば、これは <url> 値を使用して二つの画像を指定し、 <x><y> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは progress キーワードで代替されるように指定しています。

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+ +

値

+ +
+
<url>
+ url(…) の形式か、又はカンマ区切りのリスト url(…), url(…), … で画像の URL を指定します。複数の {{cssxref("<url>")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。 +
<x> <y> {{experimental_inline}}
+
任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。
+
キーワード値
+
+

値の上にマウスを当てると、各項目の実際の表示を確認できます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
カテゴリCSS 値例説明
一般auto現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。
defaultdefault.gifプラットフォームに依存する既定のカーソルです。ふつうは矢印です。
noneカーソルを表示しません。
リンクおよび状態context-menucontext-menu.pngコンテキストメニューが利用できることを示します。
helphelp.gifヘルプが使用可能であることを示します。
pointerpointer.gifカーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
progressprogress.gifバックグラウンドでプログラムがビジー状態dが、 (wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
waitwait.gifプログラムがビジー状態で、 (progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
選択cellcell.gif表のセルまたは一連のセルが選択できることを示します。
crosshaircrosshair.gif十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
texttext.gifテキストを選択可能であることを示します。通常、 I ビームが表示されます。
vertical-textvertical-text.gif縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
ドラッグ＆ドロップaliasalias.gifエイリアスやショートカットが作成されることを示します。
copycopy.gif何かがコピーされることを示します。
movemove.gif何かが移動されることを示します。
no-dropno-drop.gif現在の位置にアイテムがドロップできないことを示します。
+ {{bug("275173")}}: Windows および Mac OS X では、 no-drop が not-allowed と同じです。
not-allowednot-allowed.gif要求された操作が受け付けられないことを示します。
grabgrab.gif何かがグラブ (移動のためにドラッグ) することができることを示します。
grabbinggrabbing.gif何かがグラブ (移動のためにドラッグ) されようとしていることを示します。
サイズ変更＆スクロールall-scrollall-scroll.gif何かが任意の方向にスクロール (パン) 可能であることを示します。
+ {{bug("275174")}}: Windows では、 all-scroll は move 同じです。
col-resizecol-resize.gifアイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
row-resizerow-resize.gifアイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
n-resize上方向へのサイズ変更カーソルの例辺が移動できることを表します。例えば、 se-resize のカーソルはボックスの南東 (south-east) の角から移動を開始した時に使われます。
+ 環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize および s-resize は ns-resize と同じです。
e-resize右方向へのサイズ変更カーソルの例
s-resize下方向へのサイズ変更カーソルの例
w-resize左方向へのサイズ変更カーソルの例
ne-resize右上方向へのサイズ変更カーソルの例
nw-resize左上方向へのサイズ変更カーソルの例
se-resize右下方向へのサイズ変更カーソルの例
sw-resize左下方向へのサイズ変更カーソルの例
ew-resize3-resize.gif双方向へのサイズ変更が可能であることを示します。
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
拡大/縮小zoom-inzoom-in.gif +

拡大/縮小が可能であることを示す

+
zoom-outzoom-out.gif
+
+
+ +

使用上の注意

+ +

仕様書では cursor について寸法の制限は定義されていませんが、それぞれの{{Glossary("user agent", "ユーザーエージェント")}}には制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。

+ +

カーソルの寸法の制限に関するメモは、{{anch("Browser compatibility", "ブラウザーの互換性")}}の表をチェックしてください。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

カーソルの種類の設定

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* URL を使用する場合は、代替のキーワード値が必要です。 */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}幾つかのキーワード、ポジション構文、 url() 関数形式の追加
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +
{{Compat("css.properties.cursor")}}
+ +

関連情報

+ + diff --git a/files/ja/web/css/ime-mode/index.html b/files/ja/web/css/ime-mode/index.html deleted file mode 100644 index 3eeaf99783..0000000000 --- a/files/ja/web/css/ime-mode/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: ime-mode -slug: Web/CSS/ime-mode -tags: - - CSS - - CSS Reference - - Deprecated -translation_of: Web/CSS/ime-mode ---- -
{{CSSRef}} {{deprecated_header}}
- -

ime-mode プロパティは、テキストフィールドで Input Method Editor (以下 IME) をコントロールします。このプロパティは廃止されました。

- -
/* 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;
- -

ime-modeは、一部のブラウザーで無秩序に実装されたプロパティです。これは、Microsoft が独自の拡張機能として Internet Explorer 5 で導入したものです。{{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}

- -
-

Note: 一般的に、パブリックなWebサイトがIMEモードを変更することは適切ではありません。 このプロパティは、プライベートなWebアプリケーションでのみ使用すべきです。また、以前にレガシーコードで設定されていた場合は、プロパティを元に戻すべきです。

-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
auto
-
現在の IME の状態を変更しません。これはデフォルトの設定です。
-
normal
-
IME の状態を通常の状態に変更します。この値はユーザースタイルシートでウェブページが指定した値を上書きするために用意されました。 この値は Internet Explorer ではサポートされていません。
-
active
-
コンテンツがフォーカスを得た時に IME は自動的にオンになります。ユーザーがオフにしない限りテキスト入力には IME が使用されます。 Linux ではサポートされていません。
-
inactive
-
コンテンツがフォーカスを得た時に IME は自動的にオフに設定されますが、ユーザーは任意で IME をオンにする事ができます。 Linux ではサポートされていません。
-
disabled
-
IME は無効にされます。ユーザーによって IME をオンにする事はできません。
-
- -

公式の構文

- -{{csssyntax}} - -

例

- -

この例は、フィールドの IME のサポートを無効にします。これは、 拡張文字セットをサポートしていないデータベースにデータを入力するフィールドの一般的なプラクティスでした。

- -
<input type="text" name="name" value="initial value" style="ime-mode: disabled">
- -
-

拡張文字がフォームを通過しないように IME を無効にすることに依存しないでください。 IME を無効にしても、拡張文字をフォームのフィールドに貼り付けることはできます。

-
- -

注記

- -

Firefox の ime-mode は Internet Explorer と異なり、<input type="password"> にも適用できます。しかしこれはユーザーの使い勝手にはマイナスの影響を与えます。パスワードフィールドでは IME は有効にされるべきではありません。ユーザーは以下の CSS をユーザースタイルシートに挿入する事で推奨された設定に従わないサイトの動作を修正する事ができます:

- -
input[type=password] {
-  ime-mode: auto !important;
-}
- -

Gecko 1.9 の Mac 版では、disabled に設定されたエディターがフォーカスを失う際に、IME の状態をフォーカスを得る直前の状態には戻りません。そのため、Mac ユーザーは disabled 値を利用したフォームの利用に苛立ちを覚えるかもしれません。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}}{{Spec2('CSS3 Basic UI')}}初期の定義
- -

ブラウザー互換性

- -
-
- - -

{{Compat("css.properties.ime-mode")}}

-
-
diff --git a/files/ja/web/css/ime-mode/index.md b/files/ja/web/css/ime-mode/index.md new file mode 100644 index 0000000000..3eeaf99783 --- /dev/null +++ b/files/ja/web/css/ime-mode/index.md @@ -0,0 +1,102 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS + - CSS Reference + - Deprecated +translation_of: Web/CSS/ime-mode +--- +
{{CSSRef}} {{deprecated_header}}
+ +

ime-mode プロパティは、テキストフィールドで Input Method Editor (以下 IME) をコントロールします。このプロパティは廃止されました。

+ +
/* 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;
+ +

ime-modeは、一部のブラウザーで無秩序に実装されたプロパティです。これは、Microsoft が独自の拡張機能として Internet Explorer 5 で導入したものです。{{spec("http://msdn.microsoft.com/library/ms530767(VS.85).aspx","-ms-ime-mode Attribute | imeMode Property")}}

+ +
+

Note: 一般的に、パブリックなWebサイトがIMEモードを変更することは適切ではありません。 このプロパティは、プライベートなWebアプリケーションでのみ使用すべきです。また、以前にレガシーコードで設定されていた場合は、プロパティを元に戻すべきです。

+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
auto
+
現在の IME の状態を変更しません。これはデフォルトの設定です。
+
normal
+
IME の状態を通常の状態に変更します。この値はユーザースタイルシートでウェブページが指定した値を上書きするために用意されました。 この値は Internet Explorer ではサポートされていません。
+
active
+
コンテンツがフォーカスを得た時に IME は自動的にオンになります。ユーザーがオフにしない限りテキスト入力には IME が使用されます。 Linux ではサポートされていません。
+
inactive
+
コンテンツがフォーカスを得た時に IME は自動的にオフに設定されますが、ユーザーは任意で IME をオンにする事ができます。 Linux ではサポートされていません。
+
disabled
+
IME は無効にされます。ユーザーによって IME をオンにする事はできません。
+
+ +

公式の構文

+ +{{csssyntax}} + +

例

+ +

この例は、フィールドの IME のサポートを無効にします。これは、 拡張文字セットをサポートしていないデータベースにデータを入力するフィールドの一般的なプラクティスでした。

+ +
<input type="text" name="name" value="initial value" style="ime-mode: disabled">
+ +
+

拡張文字がフォームを通過しないように IME を無効にすることに依存しないでください。 IME を無効にしても、拡張文字をフォームのフィールドに貼り付けることはできます。

+
+ +

注記

+ +

Firefox の ime-mode は Internet Explorer と異なり、<input type="password"> にも適用できます。しかしこれはユーザーの使い勝手にはマイナスの影響を与えます。パスワードフィールドでは IME は有効にされるべきではありません。ユーザーは以下の CSS をユーザースタイルシートに挿入する事で推奨された設定に従わないサイトの動作を修正する事ができます:

+ +
input[type=password] {
+  ime-mode: auto !important;
+}
+ +

Gecko 1.9 の Mac 版では、disabled に設定されたエディターがフォーカスを失う際に、IME の状態をフォーカスを得る直前の状態には戻りません。そのため、Mac ユーザーは disabled 値を利用したフォームの利用に苛立ちを覚えるかもしれません。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSS3 Basic UI', '#input-method-editor', 'ime-mode')}}{{Spec2('CSS3 Basic UI')}}初期の定義
+ +

ブラウザー互換性

+ +
+
+ + +

{{Compat("css.properties.ime-mode")}}

+
+
diff --git a/files/ja/web/css/outline-color/index.html b/files/ja/web/css/outline-color/index.html deleted file mode 100644 index 0fbdf74dfe..0000000000 --- a/files/ja/web/css/outline-color/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: outline-color -slug: Web/CSS/outline-color -tags: - - CSS - - CSS Outline - - CSS Property - - CSS User Interace - - HTML Colors - - HTML Styles - - Outline - - Reference - - Styles - - Styling HTML - - outline-color - - 'recipe:css-property' -translation_of: Web/CSS/outline-color ---- -
{{CSSRef}}
- -

outline-color は CSS のプロパティで、要素の輪郭線の色を設定します。

- -
{{EmbedInteractiveExample("pages/css/outline-color.html")}}
- - - -

構文

- -
/* <color> 値 */
-outline-color: #f92525;
-outline-color: rgb(30,222,121);
-outline-color: blue;
-
-/* キーワード値 */
-outline-color: invert;
-
-/* グローバル値 */
-outline-color: inherit;
-outline-color: initial;
-outline-color: unset;
-
- -

outline-color プロパティは、以下に挙げた値のうちの一つで指定します。

- -

値

- -
-
{{cssxref("<color>")}}
-
輪郭線の色で、 <color> で指定します。
-
invert
-
輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。
-
- -

解説

- -

輪郭線は要素の周囲、 {{cssxref("border")}} の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。

- -

輪郭線の表示方法を定義する際は、一括指定プロパティの {{cssxref("outline")}} を使用したほうが普通は便利です。

- -

アクセシビリティの考慮

- -

独自のフォーカススタイルを作成するときに、ふつう {{cssxref("outline")}} プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

- -

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

青い実線の輪郭線の設定

- -

HTML

- -
<p>見ての通り、輪郭線は青です。</p>
- -

CSS

- -
p {
-  outline: 2px solid;      /* 輪郭線の幅と種類 */
-  outline-color: #0000FF;  /* 輪郭線を青にする */
-  margin: 5px;
-}
- -

結果

- -

{{ EmbedLiveSample('Setting_a_solid_blue_outline') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.outline-color")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/outline-color/index.md b/files/ja/web/css/outline-color/index.md new file mode 100644 index 0000000000..0fbdf74dfe --- /dev/null +++ b/files/ja/web/css/outline-color/index.md @@ -0,0 +1,136 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +tags: + - CSS + - CSS Outline + - CSS Property + - CSS User Interace + - HTML Colors + - HTML Styles + - Outline + - Reference + - Styles + - Styling HTML + - outline-color + - 'recipe:css-property' +translation_of: Web/CSS/outline-color +--- +
{{CSSRef}}
+ +

outline-color は CSS のプロパティで、要素の輪郭線の色を設定します。

+ +
{{EmbedInteractiveExample("pages/css/outline-color.html")}}
+ + + +

構文

+ +
/* <color> 値 */
+outline-color: #f92525;
+outline-color: rgb(30,222,121);
+outline-color: blue;
+
+/* キーワード値 */
+outline-color: invert;
+
+/* グローバル値 */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+
+ +

outline-color プロパティは、以下に挙げた値のうちの一つで指定します。

+ +

値

+ +
+
{{cssxref("<color>")}}
+
輪郭線の色で、 <color> で指定します。
+
invert
+
輪郭線が見えるように、背景色を反転させます。なお、ブラウザーがこの値に対応することは必須ではありません。対応しない場合は、このキーワードは無効とみなされます。
+
+ +

解説

+ +

輪郭線は要素の周囲、 {{cssxref("border")}} の外側に描かれる線です。要素の境界線とは異なり、輪郭線は要素の枠の外側に描かれ、他のコンテンツと重複することがあります。一方、境界線はページのレイアウトに実際に影響を与え、他のどの要素とも (明示的に重複させない限り) 重複しないように合わせます。

+ +

輪郭線の表示方法を定義する際は、一括指定プロパティの {{cssxref("outline")}} を使用したほうが普通は便利です。

+ +

アクセシビリティの考慮

+ +

独自のフォーカススタイルを作成するときに、ふつう {{cssxref("outline")}} プロパティを調整します。輪郭線の色を変更するのであれば、輪郭線と、それが配置される部分の背景のコントラスト比が、弱視の人でも知覚できるよう高くなっているか確認することが重要です。

+ +

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

青い実線の輪郭線の設定

+ +

HTML

+ +
<p>見ての通り、輪郭線は青です。</p>
+ +

CSS

+ +
p {
+  outline: 2px solid;      /* 輪郭線の幅と種類 */
+  outline-color: #0000FF;  /* 輪郭線を青にする */
+  margin: 5px;
+}
+ +

結果

+ +

{{ EmbedLiveSample('Setting_a_solid_blue_outline') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.properties.outline-color")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/outline-offset/index.html b/files/ja/web/css/outline-offset/index.html deleted file mode 100644 index 5995f59e76..0000000000 --- a/files/ja/web/css/outline-offset/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: outline-offset -slug: Web/CSS/outline-offset -tags: - - CSS - - CSS Outline - - CSS Property - - CSS プロパティ - - CSS 輪郭線 - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/outline-offset ---- -
{{CSSRef}}
- -

CSS の outline-offset プロパティは、要素の辺や境界線と輪郭線との空間の量を設定します。

- -
{{EmbedInteractiveExample("pages/css/outline-offset.html")}}
- - - -

輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線との空間は透明です。つまり、親要素の背景と同じになります。

- -

構文

- -
/* <length> 値 */
-outline-offset: 3px;
-outline-offset: 0.2em;
-
-/* グローバル値 */
-outline-offset: inherit;
-outline-offset: initial;
-outline-offset: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 0 を指定すると輪郭線は要素との隙間を置かずに表示されます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
p {
-  outline: 1px dashed red;
-  outline-offset: 10px;
-  background: yellow;
-  border: 1px solid blue;
-  margin: 15px;
-}
-
- -
<p>Gallia est omnis divisa in partes tres.</p>
- -

{{EmbedLiveSample('Example')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.outline-offset")}}

diff --git a/files/ja/web/css/outline-offset/index.md b/files/ja/web/css/outline-offset/index.md new file mode 100644 index 0000000000..5995f59e76 --- /dev/null +++ b/files/ja/web/css/outline-offset/index.md @@ -0,0 +1,85 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - CSS + - CSS Outline + - CSS Property + - CSS プロパティ + - CSS 輪郭線 + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/outline-offset +--- +
{{CSSRef}}
+ +

CSS の outline-offset プロパティは、要素の辺や境界線と輪郭線との空間の量を設定します。

+ +
{{EmbedInteractiveExample("pages/css/outline-offset.html")}}
+ + + +

輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線との空間は透明です。つまり、親要素の背景と同じになります。

+ +

構文

+ +
/* <length> 値 */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* グローバル値 */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 0 を指定すると輪郭線は要素との隙間を置かずに表示されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
p {
+  outline: 1px dashed red;
+  outline-offset: 10px;
+  background: yellow;
+  border: 1px solid blue;
+  margin: 15px;
+}
+
+ +
<p>Gallia est omnis divisa in partes tres.</p>
+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.outline-offset")}}

diff --git a/files/ja/web/css/outline-style/index.html b/files/ja/web/css/outline-style/index.html deleted file mode 100644 index 63fe79ad38..0000000000 --- a/files/ja/web/css/outline-style/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: outline-style -slug: Web/CSS/outline-style -tags: - - CSS - - CSS プロパティ - - CSS 輪郭線 - - Outline - - Reference - - outline-style -translation_of: Web/CSS/outline-style ---- -
{{CSSRef}}
- -

CSS の outline-style プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。

- -
{{EmbedInteractiveExample("pages/css/outline-style.html")}}
- - - -

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。

- -

構文

- -
/* キーワード値 */
-outline-style: auto;
-outline-style: none;
-outline-style: dotted;
-outline-style: dashed;
-outline-style: solid;
-outline-style: double;
-outline-style: groove;
-outline-style: ridge;
-outline-style: inset;
-outline-style: outset;
-
-/* グローバル値 */
-outline-style: inherit;
-outline-style: initial;
-outline-style: unset;
-
- -

outline-style プロパティは、以下に挙げた値のうちの一つで指定します。

- -

値

- -
-
-

auto

-
-
ユーザーエージェントに輪郭線の描画を任せます。
-
-

none

-
-
輪郭線を描きません。{{cssxref("outline-width")}} は 0 です。
-
-

dotted

-
-
点線の輪郭線です。
-
-

dashed

-
-
破線の輪郭線です。
-
-

solid

-
-
1本の実線の輪郭線です。
-
-

double

-
-
2本の実線の輪郭線です。{{cssxref("outline-width")}}は2本の線とその隙間の合計です。
-
-

groove

-
-
ページに刻まれたかのように見える輪郭線です。
-
-

ridge

-
-
grooveの逆で、ページから押し出されたように見える輪郭線です。
-
-

inset

-
-
領域がページに埋め込まれたかのように見える輪郭線です。
-
-

outset

-
-
insetの逆で、領域がページから隆起しているように見える輪郭線です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

例 0 - auto

- -

値autoは、輪郭線スタイルがカスタムであることを表します。 — 典型的には、プラットフォーム用のユーザーインターフェースのデフォルトのスタイル、または、CSSで詳細に記述できるスタイルよりも表現豊かなスタイル(例:輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線)

- -

HTML

- -
<div>
-  <p class="auto">Outline Demo</p>
-</div>
- -

CSS

- -
.auto {
-  outline-style: auto; /* "outline: auto" と同じ */
-}
-
-/* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
- -

{{ EmbedLiveSample('Example_0_-_auto') }}

- -

例 1 - dotted と dashed

- -

HTML

- -
<div>
-  <div class="dotted">
-    <p class="dashed">Outline Demo</p>
-  </div>
-</div>
- -

CSS

- -
.dotted {
-  outline-style: dotted; /* "outline: dotted" と同じ */
-}
-.dashed {
-  outline-style: dashed;
-}
-
-/* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
- -

{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}

- -

例 2 - solid と double

- -

HTML

- -
<div>
-  <div class="solid">
-    <p class="double">Outline Demo</p>
-  </div>
-</div>
- -

CSS

- -
.solid {
-  outline-style: solid;
-}
-.double {
-  outline-style: double;
-}
-
-/* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
- -

{{ EmbedLiveSample('Example_2_-_solid_and_double') }}

- -

例 3 - groove と ridge

- -

HTML

- -
<div>
-  <div class="groove">
-    <p class="ridge">Outline Demo</p>
-  </div>
-</div>
- -

CSS

- -
.groove {
-  outline-style: groove;
-}
-.ridge {
-  outline-style: ridge;
-}
-
-/* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
- -

{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}

- -

例 4 - inset と outset

- -

HTML

- -
<div>
-  <div class="inset">
-    <p class="outset">Outline Demo</p>
-  </div>
-</div>
- -

CSS

- -
.inset {
-  outline-style: inset;
-}
-.outset {
-  outline-style: outset;
-}
-
-/* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
- -

{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}auto値を追加。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.outline-style")}}

diff --git a/files/ja/web/css/outline-style/index.md b/files/ja/web/css/outline-style/index.md new file mode 100644 index 0000000000..63fe79ad38 --- /dev/null +++ b/files/ja/web/css/outline-style/index.md @@ -0,0 +1,241 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - CSS + - CSS プロパティ + - CSS 輪郭線 + - Outline + - Reference + - outline-style +translation_of: Web/CSS/outline-style +--- +
{{CSSRef}}
+ +

CSS の outline-style プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。

+ +
{{EmbedInteractiveExample("pages/css/outline-style.html")}}
+ + + +

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。

+ +

構文

+ +
/* キーワード値 */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* グローバル値 */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+
+ +

outline-style プロパティは、以下に挙げた値のうちの一つで指定します。

+ +

値

+ +
+
+

auto

+
+
ユーザーエージェントに輪郭線の描画を任せます。
+
+

none

+
+
輪郭線を描きません。{{cssxref("outline-width")}} は 0 です。
+
+

dotted

+
+
点線の輪郭線です。
+
+

dashed

+
+
破線の輪郭線です。
+
+

solid

+
+
1本の実線の輪郭線です。
+
+

double

+
+
2本の実線の輪郭線です。{{cssxref("outline-width")}}は2本の線とその隙間の合計です。
+
+

groove

+
+
ページに刻まれたかのように見える輪郭線です。
+
+

ridge

+
+
grooveの逆で、ページから押し出されたように見える輪郭線です。
+
+

inset

+
+
領域がページに埋め込まれたかのように見える輪郭線です。
+
+

outset

+
+
insetの逆で、領域がページから隆起しているように見える輪郭線です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

例 0 - auto

+ +

値autoは、輪郭線スタイルがカスタムであることを表します。 — 典型的には、プラットフォーム用のユーザーインターフェースのデフォルトのスタイル、または、CSSで詳細に記述できるスタイルよりも表現豊かなスタイル(例:輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線)

+ +

HTML

+ +
<div>
+  <p class="auto">Outline Demo</p>
+</div>
+ +

CSS

+ +
.auto {
+  outline-style: auto; /* "outline: auto" と同じ */
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_0_-_auto') }}

+ +

例 1 - dotted と dashed

+ +

HTML

+ +
<div>
+  <div class="dotted">
+    <p class="dashed">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.dotted {
+  outline-style: dotted; /* "outline: dotted" と同じ */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}

+ +

例 2 - solid と double

+ +

HTML

+ +
<div>
+  <div class="solid">
+    <p class="double">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_2_-_solid_and_double') }}

+ +

例 3 - groove と ridge

+ +

HTML

+ +
<div>
+  <div class="groove">
+    <p class="ridge">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}

+ +

例 4 - inset と outset

+ +

HTML

+ +
<div>
+  <div class="inset">
+    <p class="outset">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* デモを見やすく */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}auto値を追加。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.outline-style")}}

diff --git a/files/ja/web/css/outline-width/index.html b/files/ja/web/css/outline-width/index.html deleted file mode 100644 index 0f17326a4a..0000000000 --- a/files/ja/web/css/outline-width/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: outline-width -slug: Web/CSS/outline-width -tags: - - CSS - - CSS Outline - - CSS Property - - Layout - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/outline-width ---- -
{{CSSRef}}
- -

CSS の outline-width プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。

- -
{{EmbedInteractiveExample("pages/css/outline-width.html")}}
- - - -

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。

- -

構文

- -
/* キーワード値 */
-outline-width: thin;
-outline-width: medium;
-outline-width: thick;
-
-/* <length> 値 */
-outline-width: 1px;
-outline-width: 0.1em;
-
-/* グローバル値 */
-outline-width: inherit;
-
- -

outline-width プロパティは、以下に挙げた値のうちの一つで指定します。

- -

値

- -
-
{{cssxref("<length>")}}
-
輪郭線の太さを <length> で指定します。
-
thin
-
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 1px です。
-
medium
-
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 3px です。
-
thick
-
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 5px です。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

要素の輪郭線の幅の設定

- -

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>
-
- -

CSS

- -
span {
-  outline-style: solid;
-  display: inline-block;
-  margin: 20px;
-}
-
-#thin {
-  outline-width: thin;
-}
-
-#medium {
-  outline-width: medium;
-}
-
-#thick {
-  outline-width: thick;
-}
-
-#twopixels {
-  outline-width: 2px;
-}
-
-#oneex {
-  outline-width: 1ex;
-}
-
-#em {
-  outline-width: 1.2em;
-}
-
-
- -

結果

- -

{{EmbedLiveSample('Setting_an_elements_outline_width', '100%', '80')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.outline-width")}}

diff --git a/files/ja/web/css/outline-width/index.md b/files/ja/web/css/outline-width/index.md new file mode 100644 index 0000000000..0f17326a4a --- /dev/null +++ b/files/ja/web/css/outline-width/index.md @@ -0,0 +1,139 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +tags: + - CSS + - CSS Outline + - CSS Property + - Layout + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/outline-width +--- +
{{CSSRef}}
+ +

CSS の outline-width プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。

+ +
{{EmbedInteractiveExample("pages/css/outline-width.html")}}
+ + + +

たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。

+ +

構文

+ +
/* キーワード値 */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* <length> 値 */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* グローバル値 */
+outline-width: inherit;
+
+ +

outline-width プロパティは、以下に挙げた値のうちの一つで指定します。

+ +

値

+ +
+
{{cssxref("<length>")}}
+
輪郭線の太さを <length> で指定します。
+
thin
+
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 1px です。
+
medium
+
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 3px です。
+
thick
+
ユーザーエージェントに依存します。Firefox のようなデスクトップブラウザーでは、通常は 5px です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

要素の輪郭線の幅の設定

+ +

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>
+
+ +

CSS

+ +
span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#em {
+  outline-width: 1.2em;
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_an_elements_outline_width', '100%', '80')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.outline-width")}}

diff --git a/files/ja/web/css/outline/index.html b/files/ja/web/css/outline/index.html deleted file mode 100644 index 3bfa1c474a..0000000000 --- a/files/ja/web/css/outline/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: outline -slug: Web/CSS/outline -tags: - - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - CSS 輪郭線 - - Layout - - Reference - - レイアウト -translation_of: Web/CSS/outline ---- -
{{CSSRef}}
- -

outline は CSS のプロパティで、輪郭線 (outline) に関する様々なプロパティ ({{cssxref("outline-style")}}, {{cssxref("outline-width")}}, {{cssxref("outline-color")}}) を単一の宣言で設定するための一括指定です。

- -
{{EmbedInteractiveExample("pages/css/outline.html")}}
- - - -

他の一括指定プロパティと同様に、省略された値は初期値に設定されます。

- -

境界線と輪郭線

- -

境界線と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。

- - - -

構文

- -
/* 種類 */
-outline: solid;
-
-/* 色 | 種類 */
-outline: #f66 dashed;
-
-/* 種類 | 幅 */
-outline: inset thick;
-
-/* 色 | 種類 | 幅 */
-outline: green solid 3px;
-
-/* グローバル値 */
-outline: inherit;
-outline: initial;
-outline: unset;
-
- -

outline プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。

- -
-

メモ: 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が none だからです。特筆すべき例外は input 要素で、ブラウザーが既定のスタイルを与えます。

-
- -

値

- -
-
<'outline-color'>
-
輪郭線の色を設定します。未指定の場合の既定値は currentcolor です。 {{cssxref("outline-color")}} を参照してください。
-
<'outline-style'>
-
輪郭線の種類を設定します。未指定の場合の既定値は none です。 {{cssxref("outline-style")}} を参照してください。
-
<'outline-width'>
-
輪郭線の太さを設定します。未指定の場合の既定値は medium です。 {{cssxref("outline-width")}} を参照してください。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>
-
- -

CSS

- -
a {
-  border: 1px solid;
-  border-radius: 3px;
-  display: inline-block;
-  margin: 10px;
-  padding: 5px;
-}
-
-a:focus {
-  outline: 4px dotted #e73;
-  outline-offset: 4px;
-  background: #ffa;
-}
-
- -

結果

- -

{{EmbedLiveSample("Example", "100%", 60)}}

- -

アクセシビリティの考慮事項

- -

outline の値を 0 または none にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.outline")}}

-
diff --git a/files/ja/web/css/outline/index.md b/files/ja/web/css/outline/index.md new file mode 100644 index 0000000000..3bfa1c474a --- /dev/null +++ b/files/ja/web/css/outline/index.md @@ -0,0 +1,143 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - CSS 輪郭線 + - Layout + - Reference + - レイアウト +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

outline は CSS のプロパティで、輪郭線 (outline) に関する様々なプロパティ ({{cssxref("outline-style")}}, {{cssxref("outline-width")}}, {{cssxref("outline-color")}}) を単一の宣言で設定するための一括指定です。

+ +
{{EmbedInteractiveExample("pages/css/outline.html")}}
+ + + +

他の一括指定プロパティと同様に、省略された値は初期値に設定されます。

+ +

境界線と輪郭線

+ +

境界線と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。

+ + + +

構文

+ +
/* 種類 */
+outline: solid;
+
+/* 色 | 種類 */
+outline: #f66 dashed;
+
+/* 種類 | 幅 */
+outline: inset thick;
+
+/* 色 | 種類 | 幅 */
+outline: green solid 3px;
+
+/* グローバル値 */
+outline: inherit;
+outline: initial;
+outline: unset;
+
+ +

outline プロパティは以下に挙げた値のうち1～3つの値で指定します。値は順不同です。

+ +
+

メモ: 多くの要素では、スタイルが定義されていないと輪郭線は表示されません。これは style の既定値が none だからです。特筆すべき例外は input 要素で、ブラウザーが既定のスタイルを与えます。

+
+ +

値

+ +
+
<'outline-color'>
+
輪郭線の色を設定します。未指定の場合の既定値は currentcolor です。 {{cssxref("outline-color")}} を参照してください。
+
<'outline-style'>
+
輪郭線の種類を設定します。未指定の場合の既定値は none です。 {{cssxref("outline-style")}} を参照してください。
+
<'outline-width'>
+
輪郭線の太さを設定します。未指定の場合の既定値は medium です。 {{cssxref("outline-width")}} を参照してください。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<a href="#">このリンクは特殊なフォーカスのスタイルです。</a>
+
+ +

CSS

+ +
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 60)}}

+ +

アクセシビリティの考慮事項

+ +

outline の値を 0 または none にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}変更なし。
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.properties.outline")}}

+
diff --git a/files/ja/web/css/resize/index.html b/files/ja/web/css/resize/index.html deleted file mode 100644 index 1633a346e6..0000000000 --- a/files/ja/web/css/resize/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: resize -slug: Web/CSS/resize -tags: - - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - Reference -translation_of: Web/CSS/resize ---- -
{{CSSRef}}
- -

CSS の resize プロパティは、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。

- -
{{EmbedInteractiveExample("pages/css/resize.html")}}
- - - -

構文

- -
/* キーワード値 */
-resize: none;
-resize: both;
-resize: horizontal;
-resize: vertical;
-resize: block;
-resize: inline;
-
-/* グローバル値 */
-resize: inherit;
-resize: initial;
-resize: unset;
- -

resize プロパティは以下の挙げた単一のキーワード値で指定します。

- -

値

- -
-
none
-
ユーザーが要素の寸法を制御する方法を提供しません。
-
both
-
要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。
-
horizontal
-
要素はユーザーが寸法を変更できる仕組みを、水平方向について表示します。
-
vertical
-
要素はユーザーが寸法を変更できる仕組みを、垂直方向について表示します。
-
block {{experimental_inline}}
-
要素はユーザーが寸法を変更できる仕組みを、ブロック方向について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。
-
inline {{experimental_inline}}
-
要素はユーザーが寸法を変更できる仕組みを、インライン方向について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。
-
- -
-

メモ: resize は以下の場合は適用されません。

- - -
- -

形式文法

- -{{csssyntax}} - -

例

- -

テキストエリアの寸法の変更を無効化

- -

多くのブラウザーでは、 {{HTMLElement("textarea")}} 要素は既定で寸法が変更できます。 resize プロパティでこの動作を上書きすることができます。

- -

CSS

- -
textarea {
-  resize: none; /* Disables resizability */
-}
-
- -

HTML

- -
<textarea>Type some text here.</textarea>
- -

結果

- -

{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

- -

任意の要素に対する resize の使用

- -

resize プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な {{HTMLElement("div")}} の中に、寸法が変更可能な段落 ({{HTMLElement("p")}} 要素) を配置しています。

- -

CSS

- -
.resizable {
-  resize: both;
-  overflow: scroll;
-  border: 1px solid black;
-}
-
-div {
-  height: 300px;
-  width: 300px;
-}
-
-p {
-  height: 200px;
-  width: 200px;
-}
- -

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>
- -

結果

- -

{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}block と inline の値を追加
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.resize")}}

- -

関連情報

- - diff --git a/files/ja/web/css/resize/index.md b/files/ja/web/css/resize/index.md new file mode 100644 index 0000000000..1633a346e6 --- /dev/null +++ b/files/ja/web/css/resize/index.md @@ -0,0 +1,156 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - Reference +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

CSS の resize プロパティは、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。

+ +
{{EmbedInteractiveExample("pages/css/resize.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* グローバル値 */
+resize: inherit;
+resize: initial;
+resize: unset;
+ +

resize プロパティは以下の挙げた単一のキーワード値で指定します。

+ +

値

+ +
+
none
+
ユーザーが要素の寸法を制御する方法を提供しません。
+
both
+
要素はユーザーが寸法を変更できる仕組みを、垂直方向と水平方向の両方について表示します。
+
horizontal
+
要素はユーザーが寸法を変更できる仕組みを、水平方向について表示します。
+
vertical
+
要素はユーザーが寸法を変更できる仕組みを、垂直方向について表示します。
+
block {{experimental_inline}}
+
要素はユーザーが寸法を変更できる仕組みを、ブロック方向について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。
+
inline {{experimental_inline}}
+
要素はユーザーが寸法を変更できる仕組みを、インライン方向について表示します ({{cssxref("writing-mode")}} と {{cssxref("direction")}} の値によって、水平方向または垂直方向のどちらかになります)。
+
+ +
+

メモ: resize は以下の場合は適用されません。

+ + +
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

テキストエリアの寸法の変更を無効化

+ +

多くのブラウザーでは、 {{HTMLElement("textarea")}} 要素は既定で寸法が変更できます。 resize プロパティでこの動作を上書きすることができます。

+ +

CSS

+ +
textarea {
+  resize: none; /* Disables resizability */
+}
+
+ +

HTML

+ +
<textarea>Type some text here.</textarea>
+ +

結果

+ +

{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+ +

任意の要素に対する resize の使用

+ +

resize プロパティを使用して、任意の要素の寸法を変更可能にすることができます。以下の例では、寸法が変更可能な {{HTMLElement("div")}} の中に、寸法が変更可能な段落 ({{HTMLElement("p")}} 要素) を配置しています。

+ +

CSS

+ +
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+ +

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>
+ +

結果

+ +

{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}block と inline の値を追加
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.resize")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/text-overflow/index.html b/files/ja/web/css/text-overflow/index.html deleted file mode 100644 index 9462e33e6a..0000000000 --- a/files/ja/web/css/text-overflow/index.html +++ /dev/null @@ -1,316 +0,0 @@ ---- -title: text-overflow -slug: Web/CSS/text-overflow -tags: - - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - - Reference -translation_of: Web/CSS/text-overflow ---- -

{{CSSRef}}

- -

text-overflow は CSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('…') を表示するか、独自の文字列を表示するかです。

- -
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
- - - -

text-overflow プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。

- -
overflow: hidden;
-white-space: nowrap;
- -

text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。

- -

構文

- -

text-overflow プロパティは、一つまたは二つの値を使用して指定することができます。一つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。二つの値が指定された場合は、最初の値が行の左端、二番目の値が行の右端のあふれの動作を指定します。

- -

それぞれの値は以下のうちの一つです。

- - - -

値

- -
-
clip
-
このプロパティの既定値です。このキーワード値はコンテンツ領域の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが text-overflow の空文字列に対応していれば、 text-overflow: ''; を指定することができます。
-
ellipsis
-
このキーワード値は、切り取られたテキストを表現するために省略記号 ('…', U+2026 Horizontal Ellipsis) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。
-
<string> {{experimental_inline}}
-
クリップされたテキストを表すために使われる {{cssxref("<string>")}} です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。
-
fade {{experimental_inline}}
-
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
-
fade( <length> | <percentage> ) {{experimental_inline}}
-
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
-
引数はフェード効果が適用される範囲を指定します。 {{cssxref("<percentage>")}} は行ボックスの幅に対する割合になります。 0 よりも小さい値は 0 に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
p {
-  width: 200px;
-  border: 1px solid;
-  padding: 2px 5px;
-
-  /* BOTH of the following are required for text-overflow */
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.overflow-visible {
-  white-space: initial;
-}
-
-.overflow-clip {
-  text-overflow: clip;
-}
-
-.overflow-ellipsis {
-  text-overflow: ellipsis;
-}
-
-.overflow-string {
-  /* Not supported in most browsers,
-     see the 'Browser compatibility' section below */
-  text-overflow: " [..]";
-}
-
- -

HTML

- -
<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>
-
- -

結果

- -

{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}

- -

注: 以下の表の「実際の結果」は、 MDN エディターが文字列値の text-overflow プロパティを持つ style 属性の中身をすべて削除するという制限があるため、正しく表示されないことがあります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CSS valuedirection: ltrdirection: rtl
期待される結果実際の結果期待される結果実際の結果
visible overflow1234567890 -
1234567890
- 		0987654321 -
1234567890
-
text-overflow: clipt-o_clip.png -
1234567890
- 		t-o_clip_rtl.png -
1234567890
-
text-overflow: ''12345 -
1234567890
- 		54321 -
1234567890
-
text-overflow: ellipsis1234… -
1234567890
- 		…4321 -
1234567890
-
text-overflow: '.'1234. -
1234567890
- 		.4321 -
1234567890
-
text-overflow: clip clip123456 -
1234567890
- 		654321 -
1234567890
-
text-overflow: clip ellipsis1234… -
1234567890
- 		6543… -
1234567890
-
text-overflow: clip '.'1234. -
1234567890
- 		6543. -
1234567890
-
text-overflow: ellipsis clip…3456 -
1234567890
- 		…4321 -
1234567890
-
text-overflow: ellipsis ellipsis…34… -
1234567890
- 		…43… -
1234567890
-
text-overflow: ellipsis '.'…34. -
1234567890
- 		…43. -
1234567890
-
text-overflow: ',' clip,3456 -
1234567890
- 		,4321 -
1234567890
-
text-overflow: ',' ellipsis,34… -
1234567890
- 		,43… -
1234567890
-
text-overflow: ',' '.',34. -
1234567890
- 		,43. -
1234567890
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
CSS Overflow Module Level 4<string> および fade の値と fade() 関数を追加
{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 Overflow')}}初回定義
- -

以前の版のこのインターフェイスは 勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は "草案" レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。

- -

ブラウザーの互換性

- -

{{Compat("css.properties.text-overflow")}}

- -

関連情報

- - diff --git a/files/ja/web/css/text-overflow/index.md b/files/ja/web/css/text-overflow/index.md new file mode 100644 index 0000000000..9462e33e6a --- /dev/null +++ b/files/ja/web/css/text-overflow/index.md @@ -0,0 +1,316 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +tags: + - CSS + - CSS プロパティ + - CSS 基本ユーザーインターフェイス + - Reference +translation_of: Web/CSS/text-overflow +--- +

{{CSSRef}}

+ +

text-overflow は CSS のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('…') を表示するか、独自の文字列を表示するかです。

+ +
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
+ + + +

text-overflow プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。

+ +
overflow: hidden;
+white-space: nowrap;
+ +

text-overflow プロパティは、インラインの進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。

+ +

構文

+ +

text-overflow プロパティは、一つまたは二つの値を使用して指定することができます。一つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。二つの値が指定された場合は、最初の値が行の左端、二番目の値が行の右端のあふれの動作を指定します。

+ +

それぞれの値は以下のうちの一つです。

+ + + +

値

+ +
+
clip
+
このプロパティの既定値です。このキーワード値はコンテンツ領域の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが text-overflow の空文字列に対応していれば、 text-overflow: ''; を指定することができます。
+
ellipsis
+
このキーワード値は、切り取られたテキストを表現するために省略記号 ('…', U+2026 Horizontal Ellipsis) を表示します。省略記号はコンテンツ領域内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。
+
<string> {{experimental_inline}}
+
クリップされたテキストを表すために使われる {{cssxref("<string>")}} です。この文字列はコンテンツ領域内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。
+
fade {{experimental_inline}}
+
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
+
fade( <length> | <percentage> ) {{experimental_inline}}
+
このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
+
引数はフェード効果が適用される範囲を指定します。 {{cssxref("<percentage>")}} は行ボックスの幅に対する割合になります。 0 よりも小さい値は 0 に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* BOTH of the following are required for text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Not supported in most browsers,
+     see the 'Browser compatibility' section below */
+  text-overflow: " [..]";
+}
+
+ +

HTML

+ +
<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>
+
+ +

結果

+ +

{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}

+ +

注: 以下の表の「実際の結果」は、 MDN エディターが文字列値の text-overflow プロパティを持つ style 属性の中身をすべて削除するという制限があるため、正しく表示されないことがあります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS valuedirection: ltrdirection: rtl
期待される結果実際の結果期待される結果実際の結果
visible overflow1234567890 +
1234567890
+ 		0987654321 +
1234567890
+
text-overflow: clipt-o_clip.png +
1234567890
+ 		t-o_clip_rtl.png +
1234567890
+
text-overflow: ''12345 +
1234567890
+ 		54321 +
1234567890
+
text-overflow: ellipsis1234… +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: '.'1234. +
1234567890
+ 		.4321 +
1234567890
+
text-overflow: clip clip123456 +
1234567890
+ 		654321 +
1234567890
+
text-overflow: clip ellipsis1234… +
1234567890
+ 		6543… +
1234567890
+
text-overflow: clip '.'1234. +
1234567890
+ 		6543. +
1234567890
+
text-overflow: ellipsis clip…3456 +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: ellipsis ellipsis…34… +
1234567890
+ 		…43… +
1234567890
+
text-overflow: ellipsis '.'…34. +
1234567890
+ 		…43. +
1234567890
+
text-overflow: ',' clip,3456 +
1234567890
+ 		,4321 +
1234567890
+
text-overflow: ',' ellipsis,34… +
1234567890
+ 		,43… +
1234567890
+
text-overflow: ',' '.',34. +
1234567890
+ 		,43. +
1234567890
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
CSS Overflow Module Level 4<string> および fade の値と fade() 関数を追加
{{SpecName('CSS3 Overflow', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 Overflow')}}初回定義
+ +

以前の版のこのインターフェイスは 勧告候補 に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は "草案" レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.text-overflow")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/user-select/index.html b/files/ja/web/css/user-select/index.html deleted file mode 100644 index 9bd2ff1c44..0000000000 --- a/files/ja/web/css/user-select/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: user-select -slug: Web/CSS/user-select -tags: - - CSS - - CSS Property - - Property - - Reference - - Selection - - 'recipe:css-property' - - user-select -translation_of: Web/CSS/user-select ---- -
{{CSSRef}}
- -

user-select は CSS のプロパティで、ユーザーが文章を範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、{{Glossary("Chrome", "クローム")}}として読み込まれたコンテンツには何の影響も与えません。

- -
/* キーワード値 */
-user-select: none;
-user-select: auto;
-user-select: text;
-user-select: contain;
-user-select: all;
-
-/* グローバル値 */
-user-select: inherit;
-user-select: initial;
-user-select: unset;
-
-/* Mozilla 特有の値 */
--moz-user-select: none;
--moz-user-select: text;
--moz-user-select: all;
-
-/* WebKit 特有の値 */
--webkit-user-select: none;
--webkit-user-select: text;
--webkit-user-select: all; /* Safari では動作しません。 "none" または
-                             "text" を使ってください。さもないと、
-                             <html> コンテナーで入力可能になってしまいます。 */
-
-/* Microsoft 特有の値 */
--ms-user-select: none;
--ms-user-select: text;
--ms-user-select: element;
-
- -
-

注: user-select は継承されるプロパティではありませんが、多くの場合、初期値の auto は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装しており、いくつかの問題を発生させています。現在までに、 Chromium はこの問題を修正し、最終的な動作が仕様書に合うようにすることを選択しています。

-
- -

構文

- -
-
none
-
対象要素とその子孫要素の文章は範囲選択できません。 {{domxref("Selection")}} オブジェクトはこれらの要素も含むことができることに注意してください。
-
auto
-
-

auto の使用値は下記のように決められます。

- -
    -
  • ::before と ::after の擬似要素では、使用値は none になります。
    • -
  • 編集可能な要素の場合、使用値は contain になります。
    • -
  • 上記以外で、親要素の user-select の使用値が all の場合、対象要素の使用値も all になります。
    • -
  • 上記以外で、親要素の user-select の使用値が none の場合、対象要素の使用値も none になります。
    • -
  • 上記以外の場合、使用値は text になります。
    • -
-
-
text
-
ユーザーはテキストを範囲選択できます。
-
all
-
この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。
-
contain
-
要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。
-
element{{non-standard_inline}} (IE 特有のエイリアス)
-
contain と同じです。 Internet Explorer だけが対応しています。
-
- -
-

注: CSS UI 4 では、 user-select: element が contain に名称が変わります。

-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<p>このテキストを選択できるはずです。</p>
-<p class="unselectable">ちょっと、このテキストの選択はできませんよ！</p>
-<p class="all">一度クリックすると、このテキスト全体を選択します。</p>
-
- -

CSS

- -
.unselectable {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.all {
-  -moz-user-select: all;
-  -webkit-user-select: all;
-  -ms-user-select: all;
-  user-select: all;
-}
-
- -

結果

- -

{{EmbedLiveSample("Examples")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}{{Spec2('CSS4 UI')}}初回定義。 -webkit-user-select は user-select の非推奨のエイリアスであることも定義した。
- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.user-select")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/user-select/index.md b/files/ja/web/css/user-select/index.md new file mode 100644 index 0000000000..9bd2ff1c44 --- /dev/null +++ b/files/ja/web/css/user-select/index.md @@ -0,0 +1,151 @@ +--- +title: user-select +slug: Web/CSS/user-select +tags: + - CSS + - CSS Property + - Property + - Reference + - Selection + - 'recipe:css-property' + - user-select +translation_of: Web/CSS/user-select +--- +
{{CSSRef}}
+ +

user-select は CSS のプロパティで、ユーザーが文章を範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、{{Glossary("Chrome", "クローム")}}として読み込まれたコンテンツには何の影響も与えません。

+ +
/* キーワード値 */
+user-select: none;
+user-select: auto;
+user-select: text;
+user-select: contain;
+user-select: all;
+
+/* グローバル値 */
+user-select: inherit;
+user-select: initial;
+user-select: unset;
+
+/* Mozilla 特有の値 */
+-moz-user-select: none;
+-moz-user-select: text;
+-moz-user-select: all;
+
+/* WebKit 特有の値 */
+-webkit-user-select: none;
+-webkit-user-select: text;
+-webkit-user-select: all; /* Safari では動作しません。 "none" または
+                             "text" を使ってください。さもないと、
+                             <html> コンテナーで入力可能になってしまいます。 */
+
+/* Microsoft 特有の値 */
+-ms-user-select: none;
+-ms-user-select: text;
+-ms-user-select: element;
+
+ +
+

注: user-select は継承されるプロパティではありませんが、多くの場合、初期値の auto は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装しており、いくつかの問題を発生させています。現在までに、 Chromium はこの問題を修正し、最終的な動作が仕様書に合うようにすることを選択しています。

+
+ +

構文

+ +
+
none
+
対象要素とその子孫要素の文章は範囲選択できません。 {{domxref("Selection")}} オブジェクトはこれらの要素も含むことができることに注意してください。
+
auto
+
+

auto の使用値は下記のように決められます。

+ +
    +
  • ::before と ::after の擬似要素では、使用値は none になります。
    • +
  • 編集可能な要素の場合、使用値は contain になります。
    • +
  • 上記以外で、親要素の user-select の使用値が all の場合、対象要素の使用値も all になります。
    • +
  • 上記以外で、親要素の user-select の使用値が none の場合、対象要素の使用値も none になります。
    • +
  • 上記以外の場合、使用値は text になります。
    • +
+
+
text
+
ユーザーはテキストを範囲選択できます。
+
all
+
この要素の内容は不可分的に選択されます。選択範囲が要素の一部を含んだ場合、選択範囲はすべての子孫要素を含む要素全体が含まれなければなりません。子孫要素でダブルクリックや右クリックを行うと、この値が付けられている最も上位の先祖要素が範囲選択されます。
+
contain
+
要素の内部から選択を始めることができます。しかし、選択範囲は要素の境界内のみに限定されます。
+
element{{non-standard_inline}} (IE 特有のエイリアス)
+
contain と同じです。 Internet Explorer だけが対応しています。
+
+ +
+

注: CSS UI 4 では、 user-select: element が contain に名称が変わります。

+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<p>このテキストを選択できるはずです。</p>
+<p class="unselectable">ちょっと、このテキストの選択はできませんよ！</p>
+<p class="all">一度クリックすると、このテキスト全体を選択します。</p>
+
+ +

CSS

+ +
.unselectable {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.all {
+  -moz-user-select: all;
+  -webkit-user-select: all;
+  -ms-user-select: all;
+  user-select: all;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Examples")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 UI', '#propdef-user-select', 'user-select')}}{{Spec2('CSS4 UI')}}初回定義。 -webkit-user-select は user-select の非推奨のエイリアスであることも定義した。
+ +

ブラウザーの互換性

+ +
+

{{Compat("css.properties.user-select")}}

+
+ +

関連情報

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