recursal/MDN huggingface dataset:
word-break
==========

**`word-break`** は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

試してみましょう
--------

構文
--


```css
/\* キーワード値 \*/
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /\* 非推奨 \*/

/\* グローバル値 \*/
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;
```


`word-break` プロパティは、下記のリストの中から 1 つを選んで指定します。

### 値

`normal`

既定の改行規則を使用します。

`break-all`

CJK (中国語、台湾語、日本語、韓国語) 以外のテキストにおいて、単語中などでの文字の改行に関する禁則処理を解除し、どの文字の間でも改行するようにします。

`keep-all`

CJK テキストの改行を許可しません。 CJK 以外のテキストについては `normal` と同じ挙動となります。

`break-word` 
非推奨

`overflow-wrap` プロパティの値とは関係なく、 `word-break: normal` や `overflow-wrap: anywhere` と同じ効果になります。


**メモ:** `word-break: break-word` および `overflow-wrap: break-word` (`overflow-wrap` を参照) とは対照的に、 `word-break: break-all` はテキストがコンテナーからちょうどあふれたところで (単語全体を次の行に送れば途中で改行を防ぐことができる場合であっても) 位置で改行を生成します。

**メモ:** `word-break: break-word` は非推奨ですが、指定した場合は `overflow-wrap` プロパティの値とは関係なく、 `word-break: normal` や `overflow-wrap: anywhere` と同じ効果になります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `normal` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

word-break =   
  normal      |  
  keep-all    |  
  break-all   |  
  break-word    
  
```

例
-

### HTML


```html
<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>

<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
```

### CSS


```css
.narrow {
  padding: 10px;
  border: 1px solid;
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 1px;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord {
  word-break: break-word;
}
```

仕様書
---

| Specification |
| --- |
| CSS Text Module Level 3 # word-break-property |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `overflow-wrap`
* `hyphens`
* `line-break`
* テキストの分割と折り返しのガイド
margin-inline-end
=================

**`margin-inline-end`** は CSS のプロパティで、要素のインライン方向の論理的な末尾側のマージンを定義し、それが要素の書字方向やテキストの方向に応じて物理的なマージンに対応づけられます。これは `margin-top`, `margin-right`, `margin-bottom`, `margin-left` の何れかのプロパティに対応し、どれに対応するかは `writing-mode`, `direction`, `text-orientation` で定義された値によって決まります。

試してみましょう
--------

構文
--


```css
/\* <length> 値 \*/
margin-inline-end: 10px; /\* 絶対的な長さ \*/
margin-inline-end: 1em; /\* テキストの大きさに対する相対値 \*/
margin-inline-end: 5%; /\* 直近のブロックコンテナーの大きさに対する相対値 \*/

/\* キーワード値 \*/
margin-inline-end: auto;

/\* グローバル値 \*/
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-end: revert;
margin-inline-end: revert-layer;
margin-inline-end: unset;
```


関連プロパティとして、要素の他のマージンを定義する `margin-block-start`, `margin-block-end`, `margin-inline-start` があります。

### 値

`margin-inline-end` プロパティは `margin-left` プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `margin` と同じ |
| 継承 | なし |
| パーセント値 | レイアウトモデルに依存 |
| 計算値 | 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto` |
| アニメーションの種類 | length |

形式文法
----
```

margin-inline-end =   
  <'margin-top'>    
  
```

例
-

### インライン方向の末尾側のマージンの設定

#### HTML


```html
<div>
  <p class="exampleText">Example text</p>
</div>
```


#### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-end: 20px;
  background-color: #c8c800;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS 論理的プロパティと値
* `margin-inline-start`
* 対応づけ先の物理的なプロパティ: `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* `writing-mode`, `direction`, `text-orientation`
-webkit-mask-attachment
=======================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

`mask-image` が指定されている場合、 `-webkit-mask-attachment` はそのマスク画像の位置をビューポート内で固定するか、それとも包含ブロックと共にスクロールするかを指定します。


```css
/\* キーワード値 \*/
-webkit-mask-attachment: scroll;
-webkit-mask-attachment: fixed;
-webkit-mask-attachment: local;

/\* 複数の値 \*/
-webkit-mask-attachment: scroll, local;
-webkit-mask-attachment: fixed, local, scroll;

/\* グローバル値 \*/
-webkit-mask-attachment: inherit;
-webkit-mask-attachment: initial;
-webkit-mask-attachment: unset;
```

構文
--

### 値

scroll

`scroll` が指定された場合、マスク画像はマスク画像を含むブロックと共にビューポート内でスクロールします。

fixed

`fixed` が指定された場合、マスク画像は包含する要素と共にスクロールせず、ビューポート内の一定の場所に残ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `scroll` |
| 適用対象 | すべての要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### ビューポートにマスク画像を固定


```css
body {
  -webkit-mask-image: url("images/mask.png");
  -webkit-mask-attachment: fixed;
}
```

仕様書
---

Not part of any standard.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `mask`
* `mask-clip`
* `-webkit-mask-box-image`
* `mask-origin`
* `mask-image`
* `-webkit-mask-composite`
* `mask-repeat`
::spelling-error
================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`::spelling-error`** は CSS の擬似要素で、綴りが正しくないとユーザーエージェントが判断したテキストの区間を示します。

利用できるプロパティ
----------

`::spelling-error` 擬似要素では、一部の CSS プロパティのみが利用できます。

* `color`
* `background-color`
* `cursor`
* `caret-color`
* `outline` およびその個別指定プロパティ
* `text-decoration` および関連プロパティ
* `text-emphasis-color`
* `text-shadow`
構文
--


```css
::spelling-error {}
```

例
-

### 文書の単純なスペルチェック

この例では、最終的に対応しているブラウザーでは、表示されたスタイルでフラグ付きのスペルミスを強調表示します。

#### HTML


```html
<p contenteditable spellcheck="true">
  My friends are coegdfgfddffbgning to the party tonight.
</p>
```


#### CSS


```css
::spelling-error {
  text-decoration: wavy red;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-spelling-error |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `::grammar-error`
overscroll-behavior-x
=====================

**`overscroll-behavior-x`** は CSS のプロパティで、スクロール領域の水平方向の境界に達したときのブラウザーの挙動を設定します。

全体的な説明は `overscroll-behavior` を参照してください。


```css
/\* キーワード値 \*/
overscroll-behavior-x: auto; /\* 既定値 \*/
overscroll-behavior-x: contain;
overscroll-behavior-x: none;

/\* グローバル値 \*/
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: unset;
```

構文
--

`overscroll-behavior-x` プロパティは、次の値の一覧のうち一つのキーワードで指定します。

### 値

`auto`

スクロールの末端における既定の振る舞いが通常通りに発生します。

`contain`

この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。

`none`

隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | 非置換ブロックレベル要素と非置換インラインブロック要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

overscroll-behavior-x =   
  contain  |  
  none     |  
  auto       
  
```

例
-

### 背後にある要素が横にスクロールするのを防ぐ

簡単な overscroll-behavior-x の例 (ソースコードも参照) の中で、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い `width` を持っているので、ページは水平にスクロールします。内側のボックスは width (と `height`) が小さく、ビューポート内にきちんと収まりますが、内容は広い `width` を持ち、水平にスクロールします。

既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。これを防ぐために、内側のボックスに `overscroll-behavior-x: contain` を設定することができます。


```css
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}
```

仕様書
---

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-physical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* スクロールを制御する: 引いて更新や末端の効果のカスタマイズ
* 対応付けられる論理的プロパティ: `overscroll-behavior-inline`, `overscroll-behavior-block`
:right
======

**`:right`** は CSS の擬似クラスで、`@page` アットルールで使われ、印刷文書の右側のページすべてを表します。


```css
/\* 印刷時に右側のページを選択 \*/
@page :right {
  margin: 2in 3in;
}
```


そのページが左側か右側かは、文書の主要な書字方向によって決まります。例えば、最初のページの主な書字方向が左から右であれば `:right` ページになります。書字方向が右から左であれば `:left` ページになります。

**メモ:** この擬似クラスは、*ページボックス*の `margin`, `padding`, `border`, `background` の各プロパティのみを変更するために使用することができます。他のすべてのプロパティは無視され、ページ内の文書コンテンツではなく、ページボックスにのみ影響します。

構文
--
```

:right
```

例
-

### 右側のページにマージンを設定


```css
@page :right {
  margin: 2in 3in;
}
```

仕様書
---

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `@page`
* ページに関する他の擬似クラス: `:first`, `:left`
padding-bottom
==============

**`padding-bottom`** は CSS のプロパティで、要素のパディング領域における下側の高さを設定します。

試してみましょう
--------

要素のパディング領域とは、コンテンツと境界との間の領域のことです。

![CSS の padding-bottom プロパティの要素ボックスへの影響](/ja/docs/Web/CSS/padding-bottom/padding-bottom.svg)

**メモ:** `padding` プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。

構文
--


```css
/\* <length> の値 \*/
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/\* <percentage> の値 \*/
padding-bottom: 10%;

/\* グローバル値 \*/
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: revert;
padding-bottom: revert-layer;
padding-bottom: unset;
```


`padding-bottom` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。

### 値

`<length>`

パディングの寸法を固定値で表したものです。負の数であってはいけません。

`<percentage>`

パディングの寸法を包含ブロックのインラインサイズ（`writing-mode` で横書き言語と定義されている場合は *width*）に対するパーセント値で示したものです。負の数であってはいけません。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `0` |
| 適用対象 | `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group`, `table-column` を除くすべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 指定されたパーセント値または絶対的な長さ |
| アニメーションの種類 | length |

形式文法
----
```

padding-bottom =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### ピクセル数とパーセント値で下パディングを設定


```css
.content {
  padding-bottom: 5%;
}
.sidebox {
  padding-bottom: 10px;
}
```

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS 基本ボックスモデル入門
* `padding-top`, `padding-right`, `padding-left` および `padding` 一括指定
* 対応付けられる論理的プロパティ: `padding-block-start`, `padding-block-end`, `padding-inline-start`, `padding-inline-end` および一括指定の `padding-block` と `padding-inline`
symbols()
=========

**`symbols()`** は CSS の関数で、カウンタースタイルをインラインで、 `list-style` のようなプロパティの値で直接定義することができます。 `@counter-style` とは異なり、 `symbols()` は*無名*です (すなわち一度しか使用できません)。 `@counter-style` よりも機能は劣りますが、より簡単でより短く書くことができます。

構文
--


```css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
```


`<symbols-type>` は以下のうちの一つで指定することができます。

* `cyclic`: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。
* `numeric`: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。
* `alphabetic`: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、 `0` がありません。
* `symbolic`: このシステムでは値を循環させ、循環ごとに数を増やします（最初の循環では 1 回、 2 回目は 2 回、など）。
* `fixed`: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。
例
-

### HTML


```html
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ol>
```

### CSS


```css
ol {
  list-style: symbols(cyclic "\*" "†" "‡");
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Counter Styles Level 3 # symbols-function |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `@counter-style`
* `list-style-type` および対応する一括指定である `list-style`
全称セレクター
=======

CSS の**全称セレクター** (universal selector) (`*`) は、すべての種類の要素に一致します。


```css
/\* すべての要素を選択 \*/
\* {
  color: green;
}
```


全称セレクターは `@namespace` を使用して名前空間を付けることができます。これは、複数の名前空間を含む文書、例えば HTML5 とインライン SVG または MathML、または複数の語彙が混在した XML などを扱うのに有用です。

* `ns|*` - 名前空間 *ns* の中ですべての要素に一致します
* `*|*` - すべての要素に一致します
* `|*` - 名前空間が宣言されていないすべての要素に一致します
構文
--


```css
\* { スタイルプロパティ }
```


アスタリスクは単純セレクターを伴う場合に省略可能です。たとえば、 `*.warning` と `.warning` は等価です。

例
-

### CSS


```css
\* [lang^="en"] {
  color: green;
}

\*.warning {
  color: red;
}

\*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

/\* 浮動要素の後の兄弟要素で自動的に浮動を解除する \*/
.floating + \* {
  clear: left;
}
```

### HTML


```html
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>
```

### 結果

### 名前空間

この例では、セレクターは example 名前空間内の要素にのみ一致します。


```css
@namespace example url(http://www.example.com);
example|\* {
  color: blue;
}
```

仕様書
---

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS セレクター
* CSS の学習: セレクター
CSS 基本ユーザーインターフェイス
==================

**CSS 基本ユーザーインターフェイス** (CSS Basic User Interface) モジュールでは、輪郭線プロパティ、ポインティングデバイスやキーボードへの視覚的フィードバック、 UI ウィジェットの既定の外見の変更など、ユーザーインターフェイス関連の機能のレンダリングや機能を定義することができます。

基本ユーザーインターフェイスプロパティは、操作している要素に視覚的な手がかりを提供することで、使い勝手やアクセシビリティを向上させるために使用することができます。これには、マウスカーソルやキーボード方向のフォーカスナビゲーションのスタイル設定、編集可能な要素にフォーカスがあるときのキャレットカーソルのスタイル設定などがあります。このモジュールは、要素のボックスモデルの寸法とスタイル設定に影響を与えることなく、フォーカスされた（またはフォーカスされていない）要素に輪郭線を提供するために指定されました。この UI モジュールは、ユーザーインターフェイスコントロールのスタイル設定も可能にします。

### 基本ユーザーインターフェイスの操作

基本ユーザーインターフェイスプロパティが UI 機能の外観をどのように変化させるかを見るには、この例の要素を操作してください。なお、このサンプルの機能の中には、使い勝手を向上させるものもあれば、ユーザー体験を損なうものもあります。

CSS の `outline` と `outline-offset` プロパティは、どの要素が現在フォーカスを持っているかをユーザーにフィードバックするために使用されました。 `accent-color` は、すべてのフォームコントロールにテーマ色を提供します。テキスト編集時に現れるキャレットは、 `caret-color` プロパティのおかげで同じ色になっています。これらはすべて UI の改善と考えることができます。

いくつかの機能はユーザビリティを損ないます。 `cursor` プロパティは、ブラウザー既定値からカーソルを変更するために使用され、混乱を招きます。 `resize` プロパティは 2 つ目の `<textarea>` がリサイズ可能になるのを防ぎ、 `pointer-events` プロパティは 3 つ目の `<textarea>` がクリックイベントを受け取るのを防ぎます。キーボードを使用してフォーカスを移動することは可能です。

この基本ユーザーインターフェイスサンプルのコードを見るには、 GitHub でソースを見てください。

リファレンス
------

プロパティ
-----

* `accent-color`
* `appearance`
* `caret`、以下の一括指定
    + `caret-color`
    + `caret-shape`
* `cursor`
* `nav-down` 
Experimental
* `nav-left` 
Experimental
* `nav-right` 
Experimental
* `nav-up` 
Experimental
* `outline`、以下の一括指定
    + `outline-color`
    + `outline-style`
    + `outline-width`
* `outline-offset`
* `pointer-events`
* `resize`
* `user-select`
ガイド
---

フォームの学習: フォームへの高度なスタイル設定

`appearance` を使用してフォームコントロールをスタイル設定する方法を説明します。

関連概念
----

* CSS の `cursor` プロパティ
* SVG の `cursor` (en-US) 属性
* CSS の `:focus`, `:focus-within`, `:focus-visible` 擬似クラス
* `CaretPosition` インターフェイス
仕様書
---

| Specification |
| --- |
| CSS Basic User Interface Module Level 4  |

関連情報
----

* Tips for Designing Useful and Usable Focus Indicators (2016)
object-position
===============

**`object-position`** は CSS のプロパティで、ボックス内における置換要素の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。

置換要素のオブジェクトの内在サイズ（すなわち、自然なサイズ）を、その要素のボックス内に合わせる方法を調整するために、`object-fit` プロパティを使用することができます。

試してみましょう
--------

構文
--


```css
/\* キーワード値 \*/
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/\* <percentage> 値 \*/
object-position: 25% 75%;

/\* <length> 値 \*/
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/\* 縁からのオフセット値 \*/
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/\* グローバル値 \*/
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;
```

### 値

`<position>`

要素のボックスの端に対する 2D 上の位置を表す、1 個から 4 個の値です。相対値または絶対値のオフセットを指定できます。


**メモ:** 置換要素がボックス外にはみ出る位置も指定できます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `50% 50%` |
| 適用対象 | 置換要素 |
| 継承 | あり |
| パーセント値 | 要素自身の幅と高さに対する相対値 |
| 計算値 | 指定通り |
| アニメーションの種類 | 反復可能リスト |

形式文法
----
```

object-position =   
  <position>    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

### 画像の内容の配置を設定

#### HTML

それぞれ MDN のロゴを表示する 2 つの `<img>` 要素があります。


```html
<img id="object-position-1" src="mdn.svg" alt="MDN Logo" />
<img id="object-position-2" src="mdn.svg" alt="MDN Logo" />
```


#### CSS

この CSS には、`<img>` 要素自体の既定のスタイルと、2 つの画像それぞれに個別のスタイルが含まれています。


```css
img {
  width: 300px;
  height: 250px;
  border: 1px solid black;
  background-color: silver;
  margin-right: 1em;
  object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}
```


1 枚目の画像は、その左端が要素のボックスの左端から 10 ピクセルはみ出して配置されています。2 番目の画像は、その右端が要素のボックスの右端と同じ位置にあり、要素のボックスの高さの 10% の位置にあります。

#### 結果

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-position |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* その他の画像関連 CSS プロパティ: `object-fit`, `image-orientation`, `image-rendering`, `image-resolution`
box-flex-group
==============

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**警告:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

**`box-flex-group`** は CSS のプロパティで、フレックスボックスの子要素をフレックスグループに割り当てます。


```css
/\* <integer> 値 \*/
box-flex-group: 1;
box-flex-group: 5;

/\* グローバル値 \*/
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;
```


フレックスグループに割り当てられたフレックス要素について、最初のフレックスグループは 1 であり、より高い値は下位のフレックスグループを示します。初期値は 1 です。ボックスの余白が分割されるとき、ブラウザーは最初にすべての要素が最初のフレックスグループに入ると想定します。そのグループ内のそれぞれの要素は、同じフレックスグループ内の他の要素のフレックス係数と比較した、その余蘊そのフレックス係数に基づいて余白が与えられます。グループ内のすべてのフレックスな子の余白が最大まで増加した場合は、前のフレックスグループから残っている余白を使用して、次のフレックスグループ内の子に対して処理が繰り返されます。フレックスグループがなくなり、まだ余白が残っている場合は、 `box-pack` プロパティに従って、追加の余白が包含ボックス内で配分されます。

推奨される子の余白が計算された後でボックスがあふれた場合は、追加の余白を追加するときに使用されるのと同様の方法で、フレックス要素からスペースが削除されます。各フレックスグループを順番に調べ、各要素のフレックス係数の比率に従ってスペースを削除します。要素は最小幅より小さくはなりません。

構文
--

`box-flex-group` プロパティは、任意の正の `<integer>` で指定します。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `1` |
| 適用対象 | フロー内のボックス要素の子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |

形式文法
----

Error: could not find syntax for this item例
-

### シンプルな使用例

当初のフレックスボックスの仕様書では、 `box-flex-group` を使用してフレックスの子を異なるグループに割り当て、自由な空間を配分できるようになっていました。


```css
article:nth-child(1) {
  -webkit-box-flex-group: 1;
}

article:nth-child(2) {
  -webkit-box-flex-group: 2;
}
```


これは WebKit ベースのブラウザーのみが接頭辞つきで対応しましたが、仕様書のその後の版ではこれとは同等の機能ではありませんでした。代わりに、フレックスコンテナー内の空間の配分は、 `flex-basis`, `flex-grow`, `flex-shrink` を使用して制御するようになっています。

仕様書
---

どの仕様書にも含まれていません。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `box-flex`
* `box-ordinal-group`
* `box-pack`
block-size
==========

**`block-size`** は CSS のプロパティで、書字方向に応じた要素ブロックの水平または垂直方向の寸法を定義します。これは `width` または `height` プロパティに相当し、 `writing-mode` の値によって変わります。

書字方向が垂直方向であった場合、 `block-size` の値は要素の幅に対応し、水平方向であった場合は要素の高さに対応します。関連プロパティの `inline-size` が要素のもう一方の寸法を定義します。

試してみましょう
--------

構文
--


```css
/\* <length> 値 \*/
block-size: 300px;
block-size: 25em;

/\* <percentage> 値 \*/
block-size: 75%;

/\* キーワード値 \*/
block-size: max-content;
block-size: min-content;
block-size: fit-content(20em);
block-size: auto;

/\* グローバル値 \*/
block-size: inherit;
block-size: initial;
block-size: revert;
block-size: unset;
```

### 値

`block-size` プロパティは、`width` や `height` プロパティと同じ値を取ります。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `auto` |
| 適用対象 | `width` および `height` と同じ |
| 継承 | なし |
| パーセント値 | 包含ブロックの block-size |
| 計算値 | `width` および `height` と同じ |
| アニメーションの種類 | length または パーセント値, calc(); |

形式文法
----
```

block-size =   
  <'width'>    
  
```

例
-

### 縦書き時のブロック方向の寸法

#### HTML


```html
<p class="exampleText">Example text</p>
```


#### CSS


```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 対応付けされる物理的プロパティ: `width` および `height`
* `writing-mode`
image-orientation
=================

**`image-orientation`** は CSS のプロパティで、画像の向きのレイアウトに依存しない修正を指定します。


```css
/\* キーワード値 \*/
image-orientation: none;
image-orientation: from-image; /\* 画像の EXIF データを使用 \*/

/\* グローバル値 \*/
image-orientation: inherit;
image-orientation: initial;
image-orientation: revert;
image-orientation: revert-layer;
image-orientation: unset;
```

試してみましょう
--------

構文
--

### 値

`none`

既定の初期値です。追加の画像の回転を適用しません。画像はエンコードされた方向、または他の CSS プロパティの値で決められた方向になります。

`from-image`

画像に含まれている EXIF 情報を使用して、画像の向きを適切にします。

解説
--

このプロパティは、回転したカメラで撮影された画像の方向を修正するため*だけ*を目的としています。自由に回転させるために使用するべきでは*ありません*。撮影やスキャンで回転してしまった画像の向きを修正する以外の用途の場合は、`transform` プロパティに `rotate` キーワードを付けて回転を指定してください。これはユーザーによる画像の向きの変更や、印刷時に縦向きと横向きを変更する必要がある場合も含みます。

`<transform-function>` などの他の CSS プロパティとの組み合わせで使用された場合、 `image-orientation` による回転は、常に他の変形が行われる前に適用されます。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | `from-image` |
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | `0deg` から次の 4 分の 1 回転に丸めて正規化した `angle` を `1turn` で割った余り |
| アニメーションの種類 | 離散値 |

形式文法
----
```

image-orientation =   
  from-image           |  
  none                 |  
  [ <angle> || flip ]    
  
```

例
-

### 画像データから画像の向きを変更

以下の画像は 180 度回転しており、 `image-orientation` プロパティを使用して、画像内の EXIF データに基づいて向きを修正しています。 `image-orientation` を `none` に変更すると、このプロパティの効果を見ることができます。

#### CSS


```css
#image {
  image-orientation: from-image; /\* ライブサンプルの中で変更することができます \*/
}
```


```
img {
  margin: 0.5rem 0;
}

label {
  font-family: monospace;
}
```


```
<img id="image" src="oriole.jpg" alt="Orientation taken from the image" />

<div>
  <input
 type="radio"
 id="from-image"
 name="orientation"
 value="from-image"
 checked />
  <label for="from-image">from-image</label>
</div>

<div>
  <input type="radio" id="none" name="orientation" value="none" />
  <label for="none">none</label>
</div>
```


```
document.addEventListener("change", (evt) => {
  document.getElementById("image").style.imageOrientation = evt.target.value;
});
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Images Module Level 3 # the-image-orientation |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* その他の画像関連 CSS プロパティ: `object-fit`, `object-position`, `image-orientation`, `image-rendering`, `image-resolution`
* `transform` および `rotate`