From 0ed7c371f7ff103e19b2474e8a55c02d77e3c74d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 16 Oct 2021 23:48:25 +0900 Subject: CSS 基本ユーザーインターフェイスの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/15 時点の英語版に同期 --- files/ja/web/css/appearance/index.md | 2871 ++------------------ files/ja/web/css/box-sizing/index.md | 126 +- files/ja/web/css/css_basic_user_interface/index.md | 104 +- .../index.md | 148 +- files/ja/web/css/cursor/index.md | 605 +++-- files/ja/web/css/ime-mode/index.md | 124 +- files/ja/web/css/outline-color/index.md | 152 +- files/ja/web/css/outline-offset/index.md | 94 +- files/ja/web/css/outline-style/index.md | 292 +- files/ja/web/css/outline-width/index.md | 134 +- files/ja/web/css/outline/index.md | 162 +- files/ja/web/css/resize/index.md | 182 +- files/ja/web/css/text-overflow/index.md | 441 ++- files/ja/web/css/user-select/index.md | 153 +- 14 files changed, 1532 insertions(+), 4056 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/appearance/index.md b/files/ja/web/css/appearance/index.md index c3a4b35afa..3bac4a5fc6 100644 --- a/files/ja/web/css/appearance/index.md +++ b/files/ja/web/css/appearance/index.md @@ -1,5 +1,5 @@ --- -title: 'appearance (-moz-appearance, -webkit-appearance)' +title: appearance (-moz-appearance, -webkit-appearance) slug: Web/CSS/appearance tags: - '-moz-appearance' @@ -9,41 +9,39 @@ tags: - CSS 基本ユーザーインターフェイス - Reference - appearance + - recipe:css-property +browser-compat: css.properties.appearance translation_of: Web/CSS/appearance --- -
{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}} -

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

+**`appearance`** は CSS のプロパティで、 OS のテーマに基づいたプラットフォームネイティブのスタイル付けを使用して要素を表示するために使用されます。**`-moz-appearance`** および **`-webkit-appearance`** はこのプロパティの標準外のバージョンで、(それぞれ) Gecko (Firefox) と Webkit ベース (Safari など) や Blink ベース (Chrome、Opera など) のブラウザーで同じことを実現するために使用されます。なお、 Firefox や Edge もまた、互換性の理由から **`-webkit-appearance`** に対応しています。 -

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

+{{EmbedInteractiveExample("pages/css/appearance.html")}} -
{{EmbedInteractiveExample("pages/css/appearance.html")}}
+**`-moz-appearance`** プロパティは [XUL](/ja/docs/Mozilla/Tech/XUL/Tutorial) スタイルシート内で、プラットフォーム固有のカスタムウィジェットをデザインするために頻繁に使用されていました。また、 Mozilla プラットフォームに搭載するウィジェットの [XBL](/ja/docs/XBL) 実装でも使用されていました。Gecko/Firefox 80 以降では、これらの使い方は **`-moz-default-appearance`** に変更され、内部スタイルシートの外では使用するべきではなくなりました。 - +> **Note:** ウェブサイトでこのプロパティを使いたいのであれば、とても注意深くテストする必要があります。現在のブラウザーのほとんどは対応していますが、その実装は大きく異なります。古いブラウザーでは、 `none` キーワードであっても、ブラウザーによってフォーム要素すべてに同じ効果があるわけではなく、まったく対応していないものもあります。最新のブラウザーでは、その差は小さくなっています。 -

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

+## 構文 -
-

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

-
- -

構文

- -
/* CSS 基本ユーザーインターフェイス Level 4 の値 */
+```css
+/* CSS 基本ユーザーインターフェイス Level 4 の値 */
 appearance: none;
 appearance: auto;
-appearance: button;
+appearance: menulist-button;
 appearance: textfield;
+
+/* "Compat-auto" の値は 'auto' と同じ効果 */
+appearance: button;
 appearance: searchfield;
 appearance: textarea;
 appearance: push-button;
-appearance: button-bevel;
 appearance: slider-horizontal;
 appearance: checkbox;
 appearance: radio;
 appearance: square-button;
 appearance: menulist;
-appearance: menulist-button;
 appearance: listbox;
 appearance: meter;
 appearance: progress-bar;
@@ -55,2617 +53,270 @@ appearance: progress-bar;
 /* WebKit/Blink (Gecko や Edge も同様) で使用できる値の一部 */
 -webkit-appearance: media-mute-button;
 -webkit-appearance: caret;
-
-

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

+/* グローバル値 */ +appearance: inherit; +appearance: initial; +appearance: revert; +appearance: unset; +``` -

値

+### 値 -

<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}} -
値ブラウザー説明
noneFirefox Chrome Safari Edge特別なスタイルは適用されません。これが既定です。
autoFirefox Chrome + ユーザーエージェントが要素に基づいて適切で特別なスタイルを選択します。特別なスタイルがない要素では `none` として動作します。 +
menulist-buttonFirefox Chrome Safari Edge + この要素がメニューリストを開くことができるようなボタンとしてのスタイルになります。 +
textfieldFirefox Chrome Safari Edge
+ 以下の値は auto と同等のものとして扱われます。 +
buttonFirefox Chrome Safari Edgeこの要素がボタンのように表示されます。
checkboxFirefox Chrome Safari Edge + この要素がチェックボックスのように表示されます。実際の「チェックボックス」の部分のみが含まれます。 +
listboxFirefox Chrome Safari Edge
menulistFirefox Chrome Safari Edge
meterChrome Safari Firefox
progress-barChrome Safari Firefox
push-buttonChrome Safari Edge
radioFirefox Chrome Safari Edge + この要素がラジオボタンのように表示されます。実際の「ラジオボタン」の部分のみが含まれます。 +
searchfieldFirefox Chrome Safari Edge
slider-horizontalChrome Safari Edge
square-buttonChrome Safari Edge
textareaFirefox Chrome Safari Edge
- 
-<div>Lorem</div>
- - {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} - Firefox - Firefox 64 で削除 - - - -apple-pay-button {{Non-standard_Inline}} - - - {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}} - Safari - iOS and macOS only. Available on the web starting in iOS 10.1 and macOS 10.12.1 - - - +

独自のスタイル付けの適用

-

形式文法

+#### HTML -{{CSSSyntax}} +```html +

+``` -

例

+#### CSS -

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

+```css +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + vertical-align: middle; +} -
.exampleone {
-  -moz-appearance: toolbarbutton;
+input[type="checkbox"] {
+  border: 2px solid #555;
+  width: 20px;
+  height: 20px;
+  padding: 4px;
+}
+input[type="checkbox"]:checked {
+  background: #555;
+  background-clip: content-box;
+}
+label {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0 -2px 8px;
 }
-
+``` -

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

+#### 結果 -

仕様書

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

{{CSSInfo}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS 3 基本ユーザーインターフェイスでの `appearance` の定義](https://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance) (2004-05-11 より勧告候補)。 +- [UI 仕様 4 から削除された CSS3 機能](https://wiki.csswg.org/spec/css4-ui#dropped-css3-features) diff --git a/files/ja/web/css/box-sizing/index.md b/files/ja/web/css/box-sizing/index.md index 49d9c8e731..42e5f1e008 100644 --- a/files/ja/web/css/box-sizing/index.md +++ b/files/ja/web/css/box-sizing/index.md @@ -4,79 +4,92 @@ slug: Web/CSS/box-sizing tags: - Boxes - CSS - - CSS Box Model - - CSS Property - - CSS プロパティ - CSS ボックスモデル + - CSS プロパティ - Reference - border-box - box model - box-sizing - content-box - height + - recipe:css-property - size - width +browser-compat: css.properties.box-sizing translation_of: Web/CSS/box-sizing --- -

{{CSSRef}}

+{{CSSRef}} + +**`box-sizing`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の全体の幅と高さをどのように計算するのかを設定します。 + +{{EmbedInteractiveExample("pages/css/box-sizing.html")}} + +[CSS ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)の既定では、要素に割り当てられた `width` および `height` は、要素のコンテンツ領域のみに適用されます。要素に境界やパディングがある場合、画面に表示される矩形の大きさは `width` および `height` にこれらを加えたものになります。つまり、`width` および `height` を設定する際には、境界やパディングが加えられるように値を調整しなければなりません。例えば、`width: 25%;` で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。 + +`box-sizing` プロパティは上記の振る舞いを調整するために使用できます。 + +- `content-box` は CSS の box-sizing における既定の振る舞いです。ある要素の幅を 100 ピクセルに設定した場合、その要素のコンテンツ領域の幅が 100 ピクセルになり、境界やパディングを加えたものが最終的に表示される幅になり、要素が 100px よりも広くなります。 +- `border-box` は、境界およびパディングを、要素に指定した width および height の中で取るようブラウザーに指示します。要素の width を 100 ピクセルに設定した場合、100 ピクセルの中に追加した境界やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小されます。これで普通は、要素に対するサイズ設定をもっと簡単になります。 + + `box-sizing: border-box` はブラウザーが {{htmlelement("table")}}, {{htmlelement("select")}}, {{htmlelement("button")}} の各要素、また {{htmlelement("input")}} 要素のうち type が `{{htmlelement("input/radio", "radio")}}`, `{{htmlelement("input/checkbox", "checkbox")}}`, `{{htmlelement("input/reset", "reset")}}`, `{{htmlelement("input/button", "button")}}`, `{{htmlelement("input/submit", "submit")}}`, `{{htmlelement("input/color", "color")}}`, `{{htmlelement("input/search", "search")}}` であるものに対して使用する既定のスタイル付けです。 + +> **Note:** 要素をレイアウトする際には、 `box-sizing` を `border-box` に設定しておくと便利です。これにより、要素の寸法の扱いがとても簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 `position: relative` または `position: absolute` を使用する場合、 `box-sizing: content-box` を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。 -

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

+## 構文 -
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+```css +box-sizing: border-box; +box-sizing: content-box; - +/* グローバル値 */ +box-sizing: inherit; +box-sizing: initial; +box-sizing: revert; +box-sizing: unset; +``` -

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

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

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

+### 値 - +- `content-box` -
-

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

-
+ - : これは、 CSS 標準で規定されている初期値および既定値です。 {{Cssxref("width")}} および {{Cssxref("height")}} プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界、マージン領域は含みません。例えば `.box {width: 350px; border: 10px solid black;}` とすると 370px の幅のボックスを描画します。 -

構文

+ この場合、それぞれの要素の寸法は、*幅 = コンテンツの幅*、*高さ = コンテンツの高さ*として計算されます。 (境界やパディングは計算に含まれません。) -

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

+- `border-box` -

値

+ - : {{Cssxref("width")}} および {{Cssxref("height")}} プロパティは、コンテンツ、パディング、境界の各領域を含みますが、マージンは含みません。なお、パディングと境界はボックスの内側に置かれることに注意してください。例えば `.box {width: 350px; border: 10px solid black;}` とすると、ボックスの幅が 350px、コンテンツ領域の幅が 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、`border-box` を使用して要素を非表示にすることはできません。 -
-
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}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

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

+

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

-

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

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

HTML

+#### HTML -
<div class="content-box">Content box</div>
-<br>
-<div class="border-box">Border box</div>
+```html +
Content box
+
+
Border box
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   width: 160px;
   height: 80px;
   padding: 20px;
@@ -99,37 +112,20 @@ translation_of: Web/CSS/box-sizing
      コンテンツ領域の幅: 160px - (2 * 20px) - (2 * 8px) = 104px
      コンテンツ領域の高さ: 80px - (2 * 20px) - (2 * 8px) = 24px */
 }
-
+``` -

結果

+#### 結果 -

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

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

仕様書

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

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS 基本ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) diff --git a/files/ja/web/css/css_basic_user_interface/index.md b/files/ja/web/css/css_basic_user_interface/index.md index c8e3a80d85..98740f9d8b 100644 --- a/files/ja/web/css/css_basic_user_interface/index.md +++ b/files/ja/web/css/css_basic_user_interface/index.md @@ -4,71 +4,45 @@ slug: Web/CSS/CSS_Basic_User_Interface tags: - CSS - CSS 基本ユーザーインターフェイス - - Reference + - ガイド - 概要 + - Reference translation_of: Web/CSS/CSS_Basic_User_Interface --- -
{{CSSRef}}
- -

CSS 基本ユーザーインターフェイス (CSS Basic User Interface) は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。

- -

リファレンス

- -

プロパティ

- -
- -
- -

ガイド

- -
-
cursor プロパティでの URL 値の使用
-
カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}} 
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}} 
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}初回定義
+{{CSSRef}} + +**CSS 基本ユーザーインターフェイス** (CSS Basic User Interface) は CSS のモジュールの一つで、ユーザーインターフェイスに関する表示や機能を定義します。 + +## リファレンス + +## プロパティ + +- {{CSSxRef("appearance")}} {{Experimental_Inline}} +- {{CSSxRef("box-sizing")}} +- {{CSSxRef("cursor")}} +- {{CSSxRef("ime-mode")}} {{Deprecated_Inline}} +- {{CSSxRef("nav-down")}} {{Experimental_Inline}} +- {{CSSxRef("nav-left")}} {{Experimental_Inline}} +- {{CSSxRef("nav-right")}} {{Experimental_Inline}} +- {{CSSxRef("nav-up")}} {{Experimental_Inline}} +- {{CSSxRef("outline")}} +- {{CSSxRef("outline-width")}} +- {{CSSxRef("outline-style")}} +- {{CSSxRef("outline-color")}} +- {{CSSxRef("outline-offset")}} +- {{CSSxRef("resize")}} +- {{CSSxRef("text-overflow")}} +- {{CSSxRef("user-select")}} + +## ガイド + +- [`cursor` プロパティでの URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property) + - : カスタムカーソルを生成するために {{CSSxRef("cursor")}} プロパティに URL を使用できる方法を説明します。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| --------------------------------- | -------------------------- | -------- | +| {{SpecName("CSS4 Basic UI")}} | {{Spec2("CSS4 Basic UI")}} | | +| {{SpecName("CSS3 Basic UI")}} | {{Spec2("CSS3 Basic UI")}} | | +| {{SpecName("CSS2.1", "ui.html")}} | {{Spec2("CSS2.1")}} | 初回定義 | diff --git a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md index 98b56ee788..cb2fcddd24 100644 --- a/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md +++ b/files/ja/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.md @@ -4,37 +4,43 @@ slug: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property tags: - CSS - Gecko - - Guide + - ガイド - NeedsUpdate - Reference translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property --- -
{{cssref}}
+{{CSSRef}} -

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

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

構文

+## 構文 -

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

+基本 (CSS 2.1) の基本的な記述は次の通りです。 -
{{CSSxRef("cursor")}}: [ {{CSSxRef("<url>")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
+```css +{{CSSxRef("cursor")}}: [ {{CSSxRef("url()")}} , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}} +``` -

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

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

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

+例えば次のような値が有効です。 -
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+```css +cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; +``` -

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

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

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

+Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。 -
{{CSSxRef("cursor")}}: [ {{CSSxRef("<uri>")}} [ <x> <y> ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}}
-
+```css +{{CSSxRef("cursor")}}: [ {{CSSxRef("url()")}} [ ]? , ]* {{CSSxRef("cursor", "<keyword>", "#Values")}} +``` -

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

+これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。 -
.foo  {
+```css
+.foo  {
   cursor: auto;
   cursor: url(cursor1.png) 4 12, auto;
 }
@@ -45,75 +51,73 @@ translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor
 }
 
 /* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */
-
+``` -

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

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

制限

-

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

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

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

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

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

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

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

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

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

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

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

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

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+Microsoft Internet Explorer 6.0 も `cursor` プロパティに対応しています。しかし、次の制限があります。 -
    -
  • IE は CUR と ANI 形式のみに対応。
    • -
  • IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。
    • -
+- IE は CUR と ANI 形式のみに対応。 +- IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザー最初期バージョン形式 (例)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 に対応しています。
ブラウザー最初期バージョン形式 (例)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.md b/files/ja/web/css/cursor/index.md index cd3cb00f97..0a92415576 100644 --- a/files/ja/web/css/cursor/index.md +++ b/files/ja/web/css/cursor/index.md @@ -4,32 +4,27 @@ slug: Web/CSS/cursor tags: - Arrow - CSS - - CSS Property - CSS プロパティ - - Cursor - - Custom Cursor + - カーソル + - カスタムカーソル - Reference - UI - - mouse - - pointer - - 'recipe:css-property' - - カスタムカーソル - - カーソル - - ポインター - マウス + - ポインター + - recipe:css-property +browser-compat: css.properties.cursor translation_of: Web/CSS/cursor --- -

{{CSSRef}}

- -

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

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+**`cursor`** は [CSS](/ja/docs/Web/CSS) のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。 - +{{EmbedInteractiveExample("pages/css/cursor.html")}} -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 cursor: pointer;
 cursor: auto;
 
@@ -43,242 +38,308 @@ cursor: url(cursor2.png) 2 2, pointer;
 /* グローバル値 */
 cursor: inherit;
 cursor: initial;
+cursor: revert;
 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}}

- -

形式文法

+``` + + `cursor` プロパティはゼロ個以上の `` をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの `` は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。 + +それぞれの `` には空白で区切った 2 つの数値を続けることができ、`` 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。 + +例えば、これは `` 値を使用して 2 つの画像を指定し、`` 座標を 2 つ目に設定し、どちらの画像も読み込めなかったときは `progress` キーワードで代替されるように指定しています。 + +```css +cursor: url(one.svg), url(two.svg) 5 5, progress; +``` + +### 値 + +- `` + `url(…)` の形式か、またはカンマ区切りのリスト `url(…), url(…), …` で画像の URL を指定します。複数の {{cssxref("url()")}} の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定*しなければなりません*。詳細は [cursor プロパティにおける URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)を参照して下さい。 +- `` `` {{experimental_inline}} + - : 任意で x 座標と y 座標を指定します。2 つの 32 未満の非負数で、単位なしです。 +- キーワード値 + + - : _値の上にマウスを当てると、各項目の実際の表示を確認できます。_ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
カテゴリーCSS 値例説明
一般auto + 現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。 +
defaultプラットフォームに依存する既定のカーソルです。ふつうは矢印です。
noneカーソルを表示しません。
リンクおよび状態context-menucontext-menu.pngコンテキストメニューが利用できることを示します。
helpヘルプが使用可能であることを示します。
pointer + カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。 +
progress + プログラムがバックグラウンドでビジー状態であるが、(wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。 +
wait + プログラムがビジー状態で、(progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。 +
選択cell表のセルまたは一連のセルが選択できることを示します。
crosshair十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
textテキストを選択可能であることを示します。通常、I ビームが表示されます。
vertical-textvertical-text.gif + 縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。 +
ドラッグ＆ドロップaliasエイリアスやショートカットが作成されることを示します。
copy何かがコピーされることを示します。
move何かが移動されることを示します。
no-drop + no-drop.gif + + 現在の位置にアイテムがドロップできないことを示します。
{{bug("275173")}}: Windows および Mac OS X では、no-drop は not-allowed と同じです。 +
not-allowednot-allowed.gif要求された操作が受け付けられないことを示します。
grab何かをグラブ (移動のためにドラッグ) することができることを示します。
grabbing何かをグラブ (移動のためにドラッグ) していることを示します。
+ サイズ変更＆スクロール + 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 {
+```css
+.foo {
   cursor: crosshair;
 }
 
@@ -290,40 +351,18 @@ cursor: unset;
 .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")}}
- -

関連情報

- - +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [cursor プロパティにおける URL 値の使用](/ja/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property) +- {{cssxref("pointer-events")}} +- {{cssxref("url()", "url()")}} 関数 diff --git a/files/ja/web/css/ime-mode/index.md b/files/ja/web/css/ime-mode/index.md index 3eeaf99783..f537a4fbf8 100644 --- a/files/ja/web/css/ime-mode/index.md +++ b/files/ja/web/css/ime-mode/index.md @@ -3,100 +3,88 @@ title: ime-mode slug: Web/CSS/ime-mode tags: - CSS - - CSS Reference + - CSS プロパティ - Deprecated + - recipe:css-property +browser-compat: css.properties.ime-mode translation_of: Web/CSS/ime-mode --- -
{{CSSRef}} {{deprecated_header}}
+{{CSSRef}} {{deprecated_header}} -

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

+**`ime-mode`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストフィールドで Input Method Editor (以下 IME) をコントロールします。このプロパティは廃止されました。 -
/* Keyword values */
+```css
+/* Keyword values */
 ime-mode: auto;
 ime-mode: normal;
 ime-mode: active;
 ime-mode: inactive;
 ime-mode: disabled;
 
-/* Global values */
+/* グローバル値 */
 ime-mode: inherit;
 ime-mode: initial;
-ime-mode: unset;
+ime-mode: revert; +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")}}

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

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

-
+> **Note:** 一般に、公開されたウェブサイトが IME モードを変更することは適切ではありません。このプロパティは、私的ななウェブアプリケーションでのみ使用すべきです。また、以前に古いコードで設定されていた場合は、プロパティを元に戻すべきです。 -

{{cssinfo}}

+## 構文 -

構文

+`ime-mode` プロパティは、以下のキーワード値のうちの一つを使用して指定します。 -

値

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

公式の構文

+## 解説 + +Internet Explorer とは異なり、Firefox の `ime-mode` は `` にも適用できます。しかし、これはユーザーの使い勝手にはマイナスの影響を与えます。パスワードフィールドでは IME は有効に*されるべきではありません*。ユーザーは以下の CSS をユーザースタイルシートに挿入することで、推奨された設定に従わないサイトの動作を修正することができます。 + +```css +input[type=password] { + ime-mode: auto !important; +} +``` + +Gecko 1.9 (Firefox 3) の Mac 版では、disabled に設定されたフィールドがフォーカスを失う際に、IME の状態を以前の状態に戻すことができません。そのため、Mac ユーザーは `disabled` 値を利用したフォームの利用に苛立ちを覚えるかもしれません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

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

+### インプットメソッドの対応の無効化 -
<input type="text" name="name" value="initial value" style="ime-mode: disabled">
+この例は、フィールドの IME の対応を無効にします。これは、 拡張文字セットに対応していないデータベースにデータを入力するフィールドで一般的に行われていました。 -
-

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

-
+```html + +``` -

注記

+> **Note:** 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")}}

-
-
+{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/css/outline-color/index.md b/files/ja/web/css/outline-color/index.md index 0fbdf74dfe..d63d8dcc5c 100644 --- a/files/ja/web/css/outline-color/index.md +++ b/files/ja/web/css/outline-color/index.md @@ -3,30 +3,29 @@ title: outline-color slug: Web/CSS/outline-color tags: - CSS - - CSS Outline - - CSS Property - - CSS User Interace - - HTML Colors - - HTML Styles - - Outline + - CSS 輪郭線 + - CSS プロパティ + - CSS ユーザーインターフェイス + - HTML 色 + - HTML スタイル + - アウトライン - Reference - - Styles + - スタイル - Styling HTML - outline-color - 'recipe:css-property' translation_of: Web/CSS/outline-color --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`outline-color`** は CSS のプロパティで、要素の輪郭線の色を設定します。 -
{{EmbedInteractiveExample("pages/css/outline-color.html")}}
+{{EmbedInteractiveExample("pages/css/outline-color.html")}} - +## 構文 -

構文

- -
/* <color> 値 */
+```css
+/*  値 */
 outline-color: #f92525;
 outline-color: rgb(30,222,121);
 outline-color: blue;
@@ -37,100 +36,81 @@ outline-color: invert;
 /* グローバル値 */
 outline-color: inherit;
 outline-color: initial;
+outline-color: revert;
 outline-color: unset;
-
+``` -

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

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

値

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

解説

+## 解説 -

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

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

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

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

アクセシビリティの考慮

+## アクセシビリティの考慮 -

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

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

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

+色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の[ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)](https://www.w3.org/WAI/intro/wcag) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。 - +- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/) +- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

青い実線の輪郭線の設定

+

青い実線の輪郭線の設定

-

HTML

+#### HTML -
<p>見ての通り、輪郭線は青です。</p>
+```html +

見ての通り、輪郭線は青です。

+``` -

CSS

+#### CSS -
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")}}

-
- -

関連情報

- -
    -
  • {{cssxref("<color>")}} データ型
    • -
  • その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • -
  • CSS を使用した HTML の要素への色の適用
    • -
+} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_a_solid_blue_outline') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} +- {{cssxref("<color>")}} データ型 +- その他の色に関するプロパティ: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} +- [CSS を使用した HTML の要素への色の適用](/ja/docs/Web/HTML/Applying_color) \ No newline at end of file diff --git a/files/ja/web/css/outline-offset/index.md b/files/ja/web/css/outline-offset/index.md index 5995f59e76..e59e22199b 100644 --- a/files/ja/web/css/outline-offset/index.md +++ b/files/ja/web/css/outline-offset/index.md @@ -3,83 +3,87 @@ title: outline-offset slug: Web/CSS/outline-offset tags: - CSS - - CSS Outline - - CSS Property - - CSS プロパティ - CSS 輪郭線 + - CSS プロパティ - Reference - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.outline-offset translation_of: Web/CSS/outline-offset --- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/outline-offset.html")}}
+{{CSSRef}} - +CSS の **`outline-offset`** プロパティは、要素の辺や境界線と[輪郭線](/ja/docs/Web/CSS/outline)との空間の量を設定します。 -

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

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

構文

+## 構文 -
/* <length> 値 */
+```css
+/*  値 */
 outline-offset: 3px;
 outline-offset: 0.2em;
 
 /* グローバル値 */
 outline-offset: inherit;
 outline-offset: initial;
+outline-offset: revert;
 outline-offset: unset;
-
+``` + +### 値 + +- `{{cssxref("<length>")}}` + - : 要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 `0` を指定すると輪郭線は要素との隙間を置かずに表示されます。 + +## 解説 -

値

+輪郭線 (outline) は要素の周囲、境界線 (border) の外側に描かれる線です。要素とその輪郭線の間は透明です。つまり、親要素の背景と同じになります。 -
-
{{cssxref("<length>")}}
-
要素とその輪郭線との空間の幅です。負の値を指定すると輪郭線は要素の内側に表示されます。 0 を指定すると輪郭線は要素との隙間を置かずに表示されます。
-
+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

輪郭線のオフセットをピクセル数で設定

+ +#### HTML -
p {
+```html
+
Gallia est omnis divisa in partes tres.

+```
+
+#### CSS
+
+```css
+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('Setting_outline_offset_in_pixels')}} -

{{EmbedLiveSample('Example')}}

+## 仕様書 -

仕様書

+{{Specifications}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}初回定義
+## ブラウザーの互換性 -

{{cssinfo}}

+{{Compat}} -

ブラウザーの互換性

+## 関連情報 -

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

+- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} diff --git a/files/ja/web/css/outline-style/index.md b/files/ja/web/css/outline-style/index.md index 63fe79ad38..364d1bb098 100644 --- a/files/ja/web/css/outline-style/index.md +++ b/files/ja/web/css/outline-style/index.md @@ -3,26 +3,25 @@ title: outline-style slug: Web/CSS/outline-style tags: - CSS - - CSS プロパティ - CSS 輪郭線 - - Outline + - CSS プロパティ - Reference - - outline-style + - recipe:css-property +browser-compat: css.properties.outline-style translation_of: Web/CSS/outline-style --- -
{{CSSRef}}
+{{CSSRef}} -

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

+CSS の **`outline-style`** プロパティは、要素の輪郭線のスタイルを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。 -
{{EmbedInteractiveExample("pages/css/outline-style.html")}}
+{{EmbedInteractiveExample("pages/css/outline-style.html")}} - +たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。 -

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

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 outline-style: auto;
 outline-style: none;
 outline-style: dotted;
@@ -37,96 +36,88 @@ outline-style: outset;
 /* グローバル値 */
 outline-style: inherit;
 outline-style: initial;
+outline-style: revert;
 outline-style: unset;
-
- -

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

- -

値

- -
-
-

auto

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

none

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

dotted

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

dashed

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

solid

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

double

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

groove

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

ridge

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

inset

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

outset

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

形式文法

+``` + +`outline-style` プロパティは、以下に挙げた値のうちの一つで指定します。 + +### 値 + +- `auto` + - : ユーザーエージェントに輪郭線の描画を任せます。 +- `none` + - : 輪郭線を描きません。{{cssxref("outline-width")}} は `0` です。 +- `dotted` + - : 点線の輪郭線です。 +- `dashed` + - : 破線の輪郭線です。 +- `solid` + - : 1 本の実線の輪郭線です。 +- `double` + - : 2 本の実線の輪郭線です。{{cssxref("outline-width")}} は 2 本の線とその隙間の合計です。 +- `groove` + - : ページに刻まれたかのように見える輪郭線です。 +- `ridge` + - : `groove` の逆で、ページから押し出されたように見える輪郭線です。 +- `inset` + - : 領域がページに埋め込まれたかのように見える輪郭線です。 +- `outset` + - : `inset` の逆で、領域がページから隆起しているように見える輪郭線です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

例 0 - auto

+

輪郭線のスタイルを auto に設定

-

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

+`auto` の値は、輪郭線のスタイルが独自のものであることを表します。[仕様書](https://www.w3.org/TR/css-ui-3/#outline-style)によれば、「典型的には、プラットフォーム用のユーザーインターフェイスの既定のスタイル、または、CSS で詳細に記述できるスタイルよりも表現豊かなスタイル 、例えば、輝いて見える半透明の外郭を持つ、輪郭の丸い輪郭線」となっています。 -

HTML

+#### HTML -
<div>
-  <p class="auto">Outline Demo</p>
-</div>
+```html +
+

Outline Demo

+
+``` -

CSS

+#### CSS -
.auto {
-  outline-style: auto; /* "outline: auto" と同じ */
+```css
+.auto {
+  outline-style: auto; /* same result as "outline: auto" */
 }
 
 /* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
+* { outline-width: 10px; padding: 15px; } +``` + +#### 結果 -

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

+{{ EmbedLiveSample('Setting_outline_style_to_auto') }} -

例 1 - dotted と dashed

+

輪郭線を dashed と dotted に設定

-

HTML

+#### HTML -
<div>
-  <div class="dotted">
-    <p class="dashed">Outline Demo</p>
-  </div>
-</div>
+```html +
+
+

Outline Demo

+
+
+``` -

CSS

+#### CSS -
.dotted {
+```css
+.dotted {
   outline-style: dotted; /* "outline: dotted" と同じ */
 }
 .dashed {
@@ -134,23 +125,29 @@ outline-style: unset;
 }
 
 /* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
+* { outline-width: 10px; padding: 15px; } +``` -

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

+#### 結果 -

例 2 - solid と double

+{{ EmbedLiveSample('Setting_outline_style_to_dashed_and_dotted') }} -

HTML

+

輪郭線のスタイルを solid と double に設定

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

CSS

+```html +
+
+

Outline Demo

+
+
+``` -
.solid {
+#### CSS
+
+```css
+.solid {
   outline-style: solid;
 }
 .double {
@@ -158,23 +155,29 @@ outline-style: unset;
 }
 
 /* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
+* { outline-width: 10px; padding: 15px; } +``` + +#### 結果 -

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

+{{ EmbedLiveSample('Setting_outline_style_to_solid_and_double') }} -

例 3 - groove と ridge

+

輪郭線のスタイルを groove と ridge に設定

-

HTML

+#### HTML -
<div>
-  <div class="groove">
-    <p class="ridge">Outline Demo</p>
-  </div>
-</div>
+```html +
+
+

Outline Demo

+
+
+``` -

CSS

+#### CSS -
.groove {
+```css
+.groove {
   outline-style: groove;
 }
 .ridge {
@@ -182,23 +185,29 @@ outline-style: unset;
 }
 
 /* デモを見やすく */
-* { outline-width: 10px; padding: 15px; }
+* { outline-width: 10px; padding: 15px; } +``` -

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

+#### 結果 -

例 4 - inset と outset

+{{ EmbedLiveSample('Setting_outline_style_to_groove_and_ridge') }} -

HTML

+

輪郭線のスタイルを inset と outset に設定

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

CSS

+```html +
+
+

Outline Demo

+
+
+``` -
.inset {
+#### CSS
+
+```css
+.inset {
   outline-style: inset;
 }
 .outset {
@@ -206,36 +215,23 @@ outline-style: unset;
 }
 
 /* デモを見やすく */
-* { 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")}}

+* { outline-width: 10px; padding: 15px; } +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_outline_style_to_inset_and_outset') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-width")}} diff --git a/files/ja/web/css/outline-width/index.md b/files/ja/web/css/outline-width/index.md index 0f17326a4a..eb825528e8 100644 --- a/files/ja/web/css/outline-width/index.md +++ b/files/ja/web/css/outline-width/index.md @@ -3,78 +3,81 @@ title: outline-width slug: Web/CSS/outline-width tags: - CSS - - CSS Outline - - CSS Property + - CSS 輪郭線 + - CSS プロパティ - Layout - Reference - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.outline-width translation_of: Web/CSS/outline-width --- -
{{CSSRef}}
+{{CSSRef}} -

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

+[CSS](/ja/docs/Web/CSS) の **`outline-width`** プロパティは、要素の輪郭線の太さを設定します。輪郭線とは要素の周りに描かれる線のことで、 {{cssxref("border")}} よりも外側です。 -
{{EmbedInteractiveExample("pages/css/outline-width.html")}}
+{{EmbedInteractiveExample("pages/css/outline-width.html")}} - +たいていの場合、輪郭線の見た目を定義するときは一括指定プロパティ {{cssxref("outline")}} を使ったほうが便利です。 -

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

+## 構文 -

構文

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

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

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

値

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

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

要素の輪郭線の幅の設定

+

要素の輪郭線の幅の設定

-

HTML

+#### 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>
-
+```html +thin +medium +thick +2px +1ex +1.2em +``` -

CSS

+#### CSS -
span {
+```css
+span {
   outline-style: solid;
   display: inline-block;
   margin: 20px;
@@ -103,37 +106,22 @@ outline-width: inherit;
 #em {
   outline-width: 1.2em;
 }
+```
+
+#### 結果
+
+{{EmbedLiveSample('Setting_an_elements_outline_width', '100%', '80')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
 
-
- -

結果

- -

{{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")}}

+- {{cssxref("outline")}} +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} diff --git a/files/ja/web/css/outline/index.md b/files/ja/web/css/outline/index.md index 3bfa1c474a..8e75e0a488 100644 --- a/files/ja/web/css/outline/index.md +++ b/files/ja/web/css/outline/index.md @@ -3,36 +3,32 @@ title: outline slug: Web/CSS/outline tags: - CSS - - CSS プロパティ - - CSS 基本ユーザーインターフェイス - CSS 輪郭線 - - Layout - - Reference + - CSS プロパティ - レイアウト + - Reference + - recipe:css-shorthand-property +browser-compat: css.properties.outline translation_of: Web/CSS/outline --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`outline`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、輪郭線 (outline) に関する様々なプロパティを単一の宣言で設定します。 -
{{EmbedInteractiveExample("pages/css/outline.html")}}
+{{EmbedInteractiveExample("pages/css/outline.html")}} - +## 構成要素のプロパティ -

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

+このプロパティは以下の CSS プロパティの一括指定です。 -

境界線と輪郭線

+- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} -

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

+## 構文 -
    -
  • 輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。
    • -
  • 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。
    • -
- -

構文

- -
/* 種類 */
+```css
+/* 種類 */
 outline: solid;
 
 /* 色 | 種類 */
@@ -47,40 +43,61 @@ outline: green solid 3px;
 /* グローバル値 */
 outline: inherit;
 outline: initial;
+outline: revert;
 outline: unset;
-
+``` -

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

+`outline` プロパティは以下に挙げた 1 ～ 3 つの値を用いて指定することができます。値は順不同です。 -
-

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

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

値

+### 値 + +- `<'outline-color'>` + - : 輪郭線の色を設定します。未指定の場合の既定値は `currentcolor` です。 {{cssxref("outline-color")}} を参照してください。 +- `<'outline-style'>` + - : 輪郭線の種類を設定します。未指定の場合の既定値は `none` です。 {{cssxref("outline-style")}} を参照してください。 +- `<'outline-width'>` + - : 輪郭線の太さを設定します。未指定の場合の既定値は `medium` です。 {{cssxref("outline-width")}} を参照してください。 + +## 解説 + +[境界線](/ja/docs/Web/CSS/border)と輪郭線はとても似ています。しかし、輪郭線は以下の点で境界線とは異なります。 + +- 輪郭線は領域を占有せず、要素のコンテンツの外側に描かれます。- 仕様によれば、輪郭線は矩形である必要はありませんが、ふつうは矩形です。 + +他の一括指定プロパティと同様に、省略された値は[初期値](/ja/docs/Web/CSS/initial_value)に設定されます。 + +## アクセシビリティの考慮 + +`outline` の値を `0` または `none` にすると、ブラウザーの既定のフォーカス表示を削除します。要素が操作できるものであれば、視覚的なフォーカス表示が必要です。既定のフォーカス表示を削除するのであれば、目に見える分かりやすいフォーカスのスタイル付けを提供してください。 -
-
<'outline-color'>
-
輪郭線の色を設定します。未指定の場合の既定値は currentcolor です。 {{cssxref("outline-color")}} を参照してください。
-
<'outline-style'>
-
輪郭線の種類を設定します。未指定の場合の既定値は none です。 {{cssxref("outline-style")}} を参照してください。
-
<'outline-width'>
-
輪郭線の太さを設定します。未指定の場合の既定値は medium です。 {{cssxref("outline-width")}} を参照してください。
-
+- [How to Design Useful and Usable Focus Indicators](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/)
  • + WCAG 2.1: [成功基準 2.4.7 の理解: フォーカスの可視性](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) -

    形式文法

    +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

    例

    +## 例 + +

    輪郭線を使用してフォーカスのスタイルを設定

    -

    HTML

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

    CSS

    +#### CSS -
    a {
+```css
+a {
   border: 1px solid;
   border-radius: 3px;
   display: inline-block;
@@ -93,51 +110,22 @@ a:focus {
   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")}}

    -
    +``` + +#### 結果 + +{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("outline-color")}} +- {{cssxref("outline-style")}} +- {{cssxref("outline-width")}} diff --git a/files/ja/web/css/resize/index.md b/files/ja/web/css/resize/index.md index 1633a346e6..4b4c1e75c3 100644 --- a/files/ja/web/css/resize/index.md +++ b/files/ja/web/css/resize/index.md @@ -2,23 +2,29 @@ title: resize slug: Web/CSS/resize tags: + - CSS 基本ユーザーインターフェイス - CSS - CSS プロパティ - - CSS 基本ユーザーインターフェイス - Reference + - recipe:css-property +browser-compat: css.properties.resize translation_of: Web/CSS/resize --- -
    {{CSSRef}}
    +{{CSSRef}} + +**`resize`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の寸法を変更できるかどうか、もしそうなら、どの方向に変更できるかを設定します。 -

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

    +{{EmbedInteractiveExample("pages/css/resize.html")}} -
    {{EmbedInteractiveExample("pages/css/resize.html")}}
    +`resize` は以下の者には適用されません。 - +- インライン要素 +- {{cssxref("overflow")}} プロパティが `visible` であるブロック要素 -

    構文

    +## 構文 -
    /* キーワード値 */
+```css
+/* キーワード値 */
 resize: none;
 resize: both;
 resize: horizontal;
@@ -29,68 +35,78 @@ 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 は以下の場合は適用されません。

    - -
      -
    • インライン要素
      • -
    • {{cssxref("overflow")}} プロパティが visible に設定されたブロック要素
      • -
    -
    +resize: revert; +resize: unset; +``` + +`resize` プロパティは以下の挙げた単一のキーワード値で指定します。 + +### 値 -

    形式文法

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

    例

    +## 例 -

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

    +

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

    -

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

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

    CSS

    +#### HTML -
    textarea {
+```html
+
+```
+
+#### CSS
+
+```css
+textarea {
   resize: none; /* Disables resizability */
 }
-
    +``` -

    HTML

    +#### 結果 -
    <textarea>Type some text here.</textarea>
    +{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}} -

    結果

    +

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

    -

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

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

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

    +#### HTML -

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

    +```html +
    +

    + This paragraph is resizable in all directions, because + the CSS `resize` property is set to `both` on this element. +

    +
    +``` -

    CSS

    +#### CSS -
    .resizable {
+```css
+.resizable {
   resize: both;
   overflow: scroll;
   border: 1px solid black;
@@ -104,53 +120,21 @@ div {
 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")}}

    - -

    関連情報

    - -
      -
    • {{HTMLElement("textarea")}}
      • -
    +{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("textarea")}} diff --git a/files/ja/web/css/text-overflow/index.md b/files/ja/web/css/text-overflow/index.md index 9462e33e6a..e0be9b14e4 100644 --- a/files/ja/web/css/text-overflow/index.md +++ b/files/ja/web/css/text-overflow/index.md @@ -4,79 +4,114 @@ slug: Web/CSS/text-overflow tags: - CSS - CSS プロパティ - - CSS 基本ユーザーインターフェイス - Reference + - recipe:css-property +browser-compat: css.properties.text-overflow translation_of: Web/CSS/text-overflow --- -

    {{CSSRef}}

    +{{CSSRef}} -

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

    +**`text-overflow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('`…`') を表示するか、独自の文字列を表示するかです。 -
    {{EmbedInteractiveExample("pages/css/text-overflow.html")}}
    +{{EmbedInteractiveExample("pages/css/text-overflow.html")}} - +`text-overflow` プロパティは、あふれることを強制するものではありません。テキストをコンテナーからあふれさせるには、次の例のように、他の CSS プロパティである {{cssxref("overflow")}} や {{cssxref("white-space")}} を設定する必要があります。 -

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

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

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

    +## 構文 -

    構文

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

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

    +```css +text-overflow: clip; +text-overflow: ellipsis ellipsis; +text-overflow: ellipsis " [..]"; -

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

    +/* グローバル値 */ +text-overflow: inherit; +text-overflow: initial; +text-overflow: revert; +text-overflow: unset; +``` -
      -
    • キーワード値のうちの一つ: clip, ellipsis, fade
      • -
    • フェードの長さを制御するための fade() 関数に {{cssxref("<length>")}} または {{cssxref("<percentage>")}} が渡されたもの
      • -
    • <string>
      • -
    +- キーワード値 `clip`, `ellipsis`, `fade` のうちの一つ +- フェードの長さを制御するための `fade()` 関数に {{cssxref("<length>")}} または {{cssxref("<percentage>")}} が渡されたもの +- `` -

    値

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

    公式定義

    + - : このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。 -

    {{CSSInfo}}

    + 引数はフェード効果が適用される範囲を指定します。 {{cssxref("<percentage>")}} は行ボックスの幅に対する割合になります。 `0` よりも小さい値は `0` に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。 -

    形式文法

    +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

    例

    +## 例 + +

    値 1 つの構文

    + +この例は、様々な `text-overflow` の値が段落に適用された例を、左書きと右書きのテキストで示します。 + +#### HTML + +```html + +
    +

    Left to right text

    + 
    clip
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    + 
    ellipsis
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    + 
    " [..]"
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    +
    -

    CSS

    +
    +

    Right to left text

    + 
    clip
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    + 
    ellipsis
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    + 
    " [..]"
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    +
    +``` -
    p {
+#### CSS
+
+```css
+p {
   width: 200px;
   border: 1px solid;
   padding: 2px 5px;
 
-  /* BOTH of the following are required for text-overflow */
+  /* Both of the following are required for text-overflow */
   white-space: nowrap;
   overflow: hidden;
 }
 
-.overflow-visible {
-  white-space: initial;
-}
-
 .overflow-clip {
   text-overflow: clip;
 }
@@ -86,231 +121,101 @@ white-space: nowrap;
    } .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")}}

    - -

    関連情報

    - -
      -
    • 関連 CSS プロパティ: {{cssxref("overflow")}}, {{cssxref("white-space")}}
      • -
    • 単語の改行を制御する CSS プロパティ: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}
      • -
    + +body { + display: flex; + justify-content: space-around; +} + +.ltr > p { + direction: ltr; +} + +.rtl > p { + direction: rtl; +} +``` + +#### 結果 + +{{EmbedLiveSample('One-value_syntax', 600, 320)}} + +

    値 2 つの構文

    + +この例は `text-overflow` の値 2 つの構文を表し、テキストの先頭と末尾の様々なあふれの動作を表しています。 +効果を見るには、スクロールをして行頭を隠すようにする必要があります。 + +#### HTML + +```html +
    clip clip
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    +
    clip ellipsis
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    +
    ellipsis ellipsis
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    +
    ellipsis " [..]"
    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    +``` + +#### CSS + +```css +p { + width: 200px; + border: 1px solid; + padding: 2px 5px; + + /* 以下のどちらも text-overflow に必要です */ + white-space: nowrap; + overflow: scroll; +} + +.overflow-clip-clip { + text-overflow: clip clip; +} + +.overflow-clip-ellipsis { + text-overflow: clip ellipsis; +} + +.overflow-ellipsis-ellipsis { + text-overflow: ellipsis ellipsis; +} + +.overflow-ellipsis-string { + text-overflow: ellipsis " [..]"; +} +``` + +#### JavaScript + +```js +// それぞれの段落をスクロールされ、行頭が隠れるようにします +const paras = document.querySelectorAll("p"); + +for (let para of paras) { + para.scroll(100, 0); +} +``` + +#### 結果 + +{{EmbedLiveSample('Two-value_syntax', 600, 360)}} + +## 仕様書 + +{{Specifications}} + +以前の版のこのインターフェイスは *勧告候補* に達していました。いくつかの "at-risk" の記載のなかった機能を取り除く必要があったため、この仕様は *草案* レベルに下されたため、勧告候補の状態ではないこのプロパティが、接頭辞なしでブラウザーに実装されました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連 CSS プロパティ: {{cssxref("overflow")}}, {{cssxref("white-space")}} +- 単語の改行を制御する CSS プロパティ: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}} diff --git a/files/ja/web/css/user-select/index.md b/files/ja/web/css/user-select/index.md index 9bd2ff1c44..5334ae5976 100644 --- a/files/ja/web/css/user-select/index.md +++ b/files/ja/web/css/user-select/index.md @@ -3,19 +3,21 @@ title: user-select slug: Web/CSS/user-select tags: - CSS - - CSS Property - - Property + - CSS プロパティ + - プロパティ - Reference - Selection - - 'recipe:css-property' + - recipe:css-property - user-select +browser-compat: css.properties.user-select translation_of: Web/CSS/user-select --- -
    {{CSSRef}}
    +{{CSSRef}} -

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

    +**`user-select`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ユーザーがテキストを範囲選択できるかどうかを制御します。これは、テキストボックスを除いて、{{Glossary("Chrome", "クローム")}}として読み込まれたコンテンツには影響を与えません。 -
    /* キーワード値 */
+```css
+/* キーワード値 */
 user-select: none;
 user-select: auto;
 user-select: text;
@@ -25,6 +27,7 @@ user-select: all;
 /* グローバル値 */
 user-select: inherit;
 user-select: initial;
+user-select: revert;
 user-select: unset;
 
 /* Mozilla 特有の値 */
@@ -35,71 +38,66 @@ user-select: unset;
 /* WebKit 特有の値 */
 -webkit-user-select: none;
 -webkit-user-select: text;
--webkit-user-select: all; /* Safari では動作しません。 "none" または
+-webkit-user-select: all; /* Safari では動作しません。"none" または
                              "text" を使ってください。さもないと、
-                             <html> コンテナーで入力可能になってしまいます。 */
+                              コンテナーで入力可能になってしまいます。 */
 
 /* Microsoft 特有の値 */
 -ms-user-select: none;
 -ms-user-select: text;
 -ms-user-select: element;
-
    +``` -
    -

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

    -
    +> **Note:** `user-select` は継承されるプロパティではありませんが、多くの場合、初期値の `auto` は継承されているように見えます。 WebKit/Chromium ベースのブラウザーは、仕様書に書かれている動作に従わず、このプロパティを継承するように実装して*おり*、いくつかの問題を発生させています。現在までに、 Chromium は[この問題を修正し](https://chromium.googlesource.com/chromium/src/+/b01af0b296ecb855aac95c4ed335d188e6eac2de)、最終的な動作が仕様書に合うようにすることを選択しています。 + +## 構文 + +- `none` + - : 対象要素とその子孫要素の文章は範囲選択できません。 {{domxref("Selection")}} オブジェクトはこれらの要素も含むことができることに注意してください。 +- `auto` + + - : `auto` の使用値は下記のように決められます。 -

    構文

    - -
    -
    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 に名称が変わります。

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

    公式定義

    +## 公式定義 -

    {{CSSInfo}}

    +{{CSSInfo}} -

    形式文法

    +## 形式文法 {{csssyntax}} -

    例

    +

    例

    -

    HTML

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

    このテキストを選択できるはずです。

    +

    ちょっと、このテキストの選択はできませんよ！

    +

    一度クリックすると、このテキスト全体を選択します。

    +``` -

    CSS

    +### CSS -
    .unselectable {
+```css
+.unselectable {
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
@@ -112,40 +110,21 @@ user-select: unset;
   -ms-user-select: all;
   user-select: all;
 }
-
    - -

    結果

    - -

    {{EmbedLiveSample("Examples")}}

    - -

    仕様書

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

    ブラウザーの互換性

    - -
    -

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

    -
    +``` + +### 結果 + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

    関連情報

    +## 関連情報 -
      -
    • {{Cssxref("::selection")}} 擬似要素
      • -
    • JavaScript の {{domxref("Selection")}} オブジェクト
      • -
    +- {{Cssxref("::selection")}} 擬似要素 +- JavaScript の {{domxref("Selection")}} オブジェクト -- cgit v1.2.3-54-g00ecf