From 93d4f38d6b7fcc50dfedba18e460774faf191c20 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 3 Oct 2021 01:06:36 +0900 Subject: Web/CSS/widows を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 --- files/ja/web/css/widows/index.md | 125 ++++++++++++++++----------------------- 1 file changed, 52 insertions(+), 73 deletions(-) (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/widows/index.md b/files/ja/web/css/widows/index.md index fca97dbb2e..234be14e05 100644 --- a/files/ja/web/css/widows/index.md +++ b/files/ja/web/css/widows/index.md @@ -3,59 +3,67 @@ title: widows slug: Web/CSS/widows tags: - CSS + - CSS Fragmentation + - CSS Multi-column Layout - CSS プロパティ - - CSS 断片化 - - CSS 段組みレイアウト - - リファレンス + - Reference + - recipe:css-property +browser-compat: css.properties.widows translation_of: Web/CSS/widows --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の widows プロパティは、ページ、領域、段の先頭に表示されるブロックコンテナーの最小行数を設定します。

+**`widows`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[ページ](/ja/docs/Web/CSS/Paged_Media)、領域、[段](/ja/docs/Web/CSS/CSS_Columns)の*先頭*に表示されるブロックコンテナーの最小行数を設定します。

-
/* <integer> 値 */
+```css
+/*  値 */
 widows: 2;
 widows: 3;
 
 /* グローバル値 */
 widows: inherit;
 widows: initial;
+widows: revert;
 widows: unset;
-
+``` -
-

組版において、 widow とは段落の最後の行がページの先頭に単独で現れることです。 (段落は前のページから続きます。)

-
+組版において、ウィドウ (_widow_) とは (段落が前のページから続いている場合に) 段落の最後の行がページの先頭に単独で現れることです。 + +{{cssinfo}} -

{{cssinfo}}

+## 構文 -

構文

+### 値 -

値

+- {{cssxref("<integer>")}} + - : 区切りの後の新しい断片の先頭に残すことができる最小行数です。値は正の数である必要があります。 -
-
{{cssxref("<integer>")}}
-
区切りの後の新しい断片の先頭に残すことができる最小行数です。値は正の数である必要があります。
-
+## 公式定義 -

形式文法

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

例

+{{CSSSyntax}} -

HTML

+## 例 -
<div>
-  <p>これは幾らかのテキストを含む最初の段落です。</p>
-  <p>これは最初の段落よりも多くのテキストを含む第二の段落です。これは widow がどの様に動作するのかを示すために用います。</p>
-  <p>これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。</p>
-</div>
-
+

段の widow の制御

-

CSS

+#### HTML -
div {
+```html
+

+  
これは幾らかのテキストを含む最初の段落です。

+  
これは最初の段落よりも多くのテキストを含む第二の段落です。これはウィドウがどの様に動作するのかを示すために用います。

+  
これは第三の段落です。これは最初の段落よりも少しだけ長いテキストを含んでいます。

+

+```
+
+#### CSS
+
+```css
+div {
   background-color: #8cffa0;
   columns: 3;
   widows: 2;
@@ -68,50 +76,21 @@ p {
 p:first-child {
   margin-top: 0;
 }
-
- -

結果

- -

{{EmbedLiveSample("Example", 400, 160)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'widows')}}{{Spec2('CSS3 Fragmentation')}}widows をページ、領域、段など、断片の種類によらず適用するように拡張
{{SpecName('CSS3 Multicol', '#filling-columns', 'widows')}}{{Spec2('CSS3 Multicol')}}段組みに関する widows の考慮の勧告
{{SpecName('CSS2.1', 'page.html#break-inside', 'widows')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの対応

+``` -
-

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

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

関連情報

+## 関連情報 - +- {{cssxref("orphans")}} +- [ページ付きメディア](/ja/docs/Web/CSS/Paged_Media) -- cgit v1.2.3-54-g00ecf