diff options
Diffstat (limited to 'files/ja/web/css/initial-letter/index.html')
| -rw-r--r-- | files/ja/web/css/initial-letter/index.html | 113 |
1 files changed, 113 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<p><code>initial-letter</code> は CSS のプロパティで、頭文字をドロップキャップにしたり、上げたり、下げたりすることを設定します。</p> + +<pre class="brush: css no-line-numbers notranslate">/* キーワード値 */ +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; +</pre> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p>キーワード値の <code>normal</code>、または <code><number></code> と、その後に任意で <code><integer></code> が付きます。</p> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>頭文字に特別な効果を付与しません。テキストは普通通りに表示されます。</dd> + <dt><code><number></code></dt> + <dd>頭文字の寸法を、何行を占めるかで指定します。負の値は使用できません。</dd> + <dt><code><integer></code></dt> + <dd>寸法が与えられたときに、頭文字が沈み込む行数を定義します。0以上の値でなければなりません。省略された場合は、寸法の値を複製し、最も近い正の整数に切り捨てられます。</dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_initial_letter_size" name="Setting_initial_letter_size">先頭文字の大きさの設定</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><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></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush:css notranslate">.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; +} +</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Setting_initial_letter_size', 250, 180)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Inline', '#sizing-drop-initials', 'initial-letter')}}</td> + <td>{{Spec2('CSS3 Inline')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.properties.initial-letter")}}</p> |