From 4ace0769da3bc823dd8a3d86211cefa850ce3007 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 5 Oct 2021 01:44:43 +0900 Subject: CSS Text モジュールの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 - Web/CSS/CSS_Text/Wrapping_Text を新規翻訳 --- files/ja/web/css/hanging-punctuation/index.md | 132 ++++++++++++-------------- 1 file changed, 61 insertions(+), 71 deletions(-) (limited to 'files/ja/web/css/hanging-punctuation') diff --git a/files/ja/web/css/hanging-punctuation/index.md b/files/ja/web/css/hanging-punctuation/index.md index 858ebb6b1c..5a23b7c2bc 100644 --- a/files/ja/web/css/hanging-punctuation/index.md +++ b/files/ja/web/css/hanging-punctuation/index.md @@ -4,7 +4,7 @@ slug: Web/CSS/hanging-punctuation tags: - CSS - CSS Property - - CSS Text + - CSS テキスト - CSS テキスト - CSS プロパティ - Experimental @@ -12,11 +12,12 @@ tags: - リファレンス translation_of: Web/CSS/hanging-punctuation --- -
{{CSSRef}}
+{{CSSRef}} -

hanging-punctuation は CSS のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。

+**`hanging-punctuation`** は [CSS](/ja/docs/Web/CSS) のプロパティで、区切り記号をテキストの行頭や行末にぶら下げるべきかどうかを指定します。ぶら下げられる区切り記号は行ボックスの外側に配置されれることがあります。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 hanging-punctuation: none;
 hanging-punctuation: first;
 hanging-punctuation: last;
@@ -37,86 +38,75 @@ hanging-punctuation: first allow-end last;
 /* グローバル値 */
 hanging-punctuation: inherit;
 hanging-punctuation: initial;
+hanging-punctuation: revert;
 hanging-punctuation: unset;
-
+``` + +## 構文 + +`hanging-punctuation` プロパティは 1 つ、2 つ、3 つの値で指定することができます。 + +- **値 1 つ**の構文は、下記の値リストのキーワード値のいずれか 1 つを使用します。 +- **値 2 つ**の構文は、次のうち 1 つを使用します。 -

{{CSSInfo}}

+ - `first` と併せて、`last`, `allow-end`, `force-end` のいずれか + - `last` と併せて、`first`, `allow-end`, `force-end` のいずれか -

構文

+- **値 3 つ**の構文は、次のうち 1 つを使用します。 -

hanging-punctuation プロパティは 1 つ、2 つ、 3 つの値で指定することができます。

+ - `first`, `allow-end`, `last` + - `first`, `force-end`, `last` - +### 値 -

値

+- `none` + - : 文字のぶら下げを行いません。 +- `first` + - : 要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。 +- `last` + - : 要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。 +- `force-end` + - : 行末の句読点をぶら下げます。 +- `allow-end` + - : 句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。 -
-
none
-
文字のぶら下げを行いません。
-
first
-
要素の最初の書式設定された行頭にある、開き括弧または引用符をぶら下げます。
-
last
-
要素の最後の書式設定された行末にある、閉じ括弧または引用符をぶら下げます。
-
force-end
-
行末の句読点をぶら下げます。
-
allow-end
-
句読点をぶら下げないと行末が揃わない場合に、句読点をぶら下げます。
-
+## 公式定義 -

形式文法

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

例

+{{csssyntax}} -

HTML

+## 例 -
<p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p>
+

開始と終了の引用符をぶら下げるよう設定

-

CSS

+#### HTML -
p {
+```html
+
“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”

+```
+
+#### CSS
+
+```css
+p {
   hanging-punctuation: first last;
   margin: .5rem;
-}
- -

結果

- -

{{EmbedLiveSample("Example")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Text", "#hanging-punctuation-property", "hanging-punctuation")}}{{Spec2("CSS3 Text")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.hanging-punctuation")}}

+} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_opening_and_closing_quotes_to_hang")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +- [CSS Tricks: Hanging punctuation](https://css-tricks.com/almanac/properties/h/hanging-punctuation/) -- cgit v1.2.3-54-g00ecf