From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/initial-letter/index.html | 113 +++++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 files/ja/web/css/initial-letter/index.html (limited to 'files/ja/web/css/initial-letter') diff --git a/files/ja/web/css/initial-letter/index.html b/files/ja/web/css/initial-letter/index.html new file mode 100644 index 0000000000..935057530c --- /dev/null +++ b/files/ja/web/css/initial-letter/index.html @@ -0,0 +1,113 @@ +--- +title: initial-letter +slug: Web/CSS/initial-letter +tags: + - CSS + - CSS Inline + - CSS Property + - Experimental + - Graphics + - Layout + - Reference + - Web + - 'recipe:css-property' +translation_of: Web/CSS/initial-letter +--- +
{{CSSRef}}
+ +

initial-letter は CSS のプロパティで、頭文字をドロップキャップにしたり、上げたり、下げたりすることを設定します。

+ +
/* キーワード値 */
+initial-letter: normal;
+
+/* 数値 */
+initial-letter: 1.5;    /* 頭文字が1.5行分を占める */
+initial-letter: 3.0;    /* 頭文字が3行分を占める */
+initial-letter: 3.0 2;  /* 頭文字が3行分を占め、
+                           2行分下がる */
+
+/* グローバル値 */
+initial-letter: inherit;
+initial-letter: initial;
+initial-letter: unset;
+
+ +

構文

+ +

キーワード値の normal、または <number> と、その後に任意で <integer> が付きます。

+ +

値

+ +
+
normal
+
頭文字に特別な効果を付与しません。テキストは普通通りに表示されます。
+
<number>
+
頭文字の寸法を、何行を占めるかで指定します。負の値は使用できません。
+
<integer>
+
寸法が与えられたときに、頭文字が沈み込む行数を定義します。0以上の値でなければなりません。省略された場合は、寸法の値を複製し、最も近い正の整数に切り捨てられます。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

先頭文字の大きさの設定

+ +

HTML

+ +
<p class="normal">Initial letter is normal</p>
+<p class="onefive">Initial letter occupies 1.5 lines</p>
+<p class="three">Initial letter occupies 3 lines</p>
+ +

CSS

+ +
.normal {
+  -webkit-initial-letter: normal;
+  initial-letter: normal;
+}
+
+.onefive {
+  -webkit-initial-letter: 1.5;
+  initial-letter: 1.5;
+}
+
+.three {
+  -webkit-initial-letter: 3.0;
+  initial-letter: 3.0;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Setting_initial_letter_size', 250, 180)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}}{{Spec2('CSS3 Inline')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.initial-letter")}}

-- cgit v1.2.3-54-g00ecf