３　テキスト

文字列の表現に関するスタイルシートについて説明します。

３．１　　フォント

フォントについて説明します。

属性	説明
font-family	使用するフォントの指定
font-style	フォントスタイルの指定
font-weight	フォントの太さの指定
font-size	フォントサイズの指定
font-stretch	フォントの幅広・幅狭の指定
font-variant	フォントの形状をスモールキャップにする
font	フォントスタイル、変換、太さ、サイズ、表示高さ、ファミリをまとめて指定
font-size-adjust	サイズアジャスト
font-synthesis	太字や斜体文字の生成
font-kerning	カーニング
font-variant-numeric	数字の表記
font-variant-caps	大文字・小文字などの表示
font-variant-ligatures	合字の制御
font-variant-position	上付き文字、下付き文字の制御
font-variant-east-asian	漢字の違いの制御
font-language-override	言語の制御
font-optical-sizing	テキスト描画の最適化
font-variation-settings	バリアブルフォントの設定
font-palette	カラーパレットの設定

３．１．１種類　(font-family)

システムにインストールされているフォント、または、@font-face で定義したフォント、もしくは以下のフォントの種類を表すキーワードを指定します。ただし、キーワードの場合は、ブラウザによって使用されるフォントが異なることがあります。

font-family:属性値

使用するフォントを指定する。

属性値	説明
フォント名	システムにインストールされているフォント、または、@font-face で定義したフォントの名前（フォント名に空白が含まれているときには ' や " で囲む方が良いでしょう。）
serif	明朝系のフォント（明朝体や Times など）
sans-serif	ゴシック系のフォント（ゴシック体や Helvetica など）
cursive	筆記体、草書体のフォント（効果のないブラウザが多い）
fantasy	装飾的なフォント（Western など）（効果のないブラウザが多い）
monospace	等幅フォント（Courier など）

フォントは、コンマ区切りで複数指定でき、先に記述した順にユーザー環境で利用可能なものが選択されます。もし指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示されます。

記述例

<span style="font-family: 'ＭＳ Ｐゴシック'">謹賀新年 / おめでとう / A Happy New Year</span><br>
<span style="font-family: 'ＭＳ Ｐ明朝'">謹賀新年 / おめでとう / A Happy New Year</span><br>
<span style="font-family: serif">謹賀新年 / おめでとう / A Happy New Year</span><br>
<span style="font-family: sans-serif">謹賀新年 / おめでとう / A Happy New Year</span><br>
<span style="font-family: cursive">謹賀新年 / おめでとう / A Happy New Year</span><br>
<span style="font-family: fantasy">謹賀新年 / おめでとう / A Happy New Year</span><br>
<span style="font-family: monospace">謹賀新年 / おめでとう / A Happy New Year</span>

表示例

３．１．２スタイル　(font-style)

フォントのスタイルを指定する際に使用します。

font-style:属性値

フォントスタイルを指定する。

属性値	説明
normal	標準（規定値）
italic	イタリック体（専用フォントがあればそのフォントで表示する。なければ oblique と同じ）
oblique [角度]	斜体（標準フォントを指定された角度に傾けて表示する）（規定値：14deg)

ほとんどのブラウザで、oblique が指定した角度の斜体文字として表示されることはありません。

記述例

<span style="font-family: 'Times New Roman'; font-style:normal;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-family: 'Times New Roman'; font-style:italic;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-family: 'Times New Roman'; font-style:oblique;">The quick brown fox jumps over the lazy dog.</span>
<span style="font-family: 'Times New Roman'; font-style:oblique 10deg;">The quick brown fox jumps over the lazy dog.</span>

<!-- 以下略 -->

Times New Roman は、イタリック体のフォントファイルがありますので、italic を指定した場合はその専用フォントが使用されます。しかし、oblique を指定した場合は、ブラウザにもよりますが、角度が italic に近い場合は italic で、そうでなければ標準フォントを傾けて表示します。

ＭＳＰ明朝はイタリック体のフォントファイルがないので、標準フォントを傾けて表示します。

なお、イタリック体のフォントかそうでないかは、下の例では f のフォントを見ればよくわかります。

表示例

３．１．３太さ　(font-weight)

フォントの太さを指定する際に使用します。

font-weight:属性値

フォントの太さを指定する。

属性値	説明
normal	標準（数値で400を指定した場合と同じ）（規定値）
bold	太字（数値で700を指定した場合と同じ）
lighter	相対的に一段階細くする
bolder	相対的に一段階太くする
100～900	100刻みの数字（数値が小さくなるほど細く、大きくなるほど太くなる）

記述例

<span style="font-weight:normal;">標準の太さ　　　　　normal</span><br>
<span style="font-weight:bold;">一般的な太字　　　　bold</span><br>
<span style="font-weight:lighter;">相対的に一段階細く　lighter</span><br>
<span style="font-weight:bolder;">相対的に一段階太く　bolder</span><br>
<span style="font-weight:100;">太さ　Bold 100</span><br>
<span style="font-weight:200;">太さ　Bold 200</span><br>
<span style="font-weight:300;">太さ　Bold 300</span><br>
<span style="font-weight:400;">太さ　Bold 400</span><br>
<span style="font-weight:500;">太さ　Bold 500</span><br>
<span style="font-weight:600;">太さ　Bold 600</span><br>
<span style="font-weight:700;">太さ　Bold 700</span><br>
<span style="font-weight:800;">太さ　Bold 800</span><br>
<span style="font-weight:900;">太さ　Bold 900</span>

9種類の太さが用意されているフォントでは、太さが表現されています。

ただし、日本語フォントなど一般的なフォントでは9種類の太さが用意されていることはあまりないため、どのブラウザでも標準と太字しか区別がないようです。

表示例

３．１．４サイズ　(font-size)

フォントサイズを指定する際に使用します。

font-size:属性値

フォントサイズを指定する。

属性値	説明
xx-small	とても小さなフォント（60%、h6）
x-small	小さなフォント（75%）
small	少しだけ小さなフォント（88.8%、h5）
medium	通常の大きさのフォント（100%、h4）
large	少しだけ大きなフォント（120%、h3）
x-large	大きなフォント（150%、h2）
xx-large	とても大きなフォント（200%、h1）
larger	現状よりも少し大きなフォント
smaller	現状よりも少し小さなフォント
数値	フォントサイズ、もしくは現状のフォントサイズに対する割合　　　　　（規定値：12）（単位や割合（%）については「１．２．２単位」を参照）

記述例

<span style="font-size:xx-small;">とても小さなフォント</span><br>
<span style="font-size:x-small;">小さなフォント</span><br>
<span style="font-size:small;">少しだけ小さなフォント</span><br>
<span style="font-size:medium;">通常の大きさのフォント</span><br>
<span style="font-size:large;">少しだけ大きなフォント</span><br>
<span style="font-size:x-large;">大きなフォント</span><br>
<span style="font-size:xx-large;">とても大きなフォント</span><br>
<span style="font-size:larger;">現状よりも少し大きなフォント</span><br>
<span style="font-size:smaller;">現状よりも少し小さなフォント</span><br>
<span style="font-size:16pt;">16pt</span><br>
<span style="font-size:24px;">24px</span><br>
<span style="font-size:50%;">50%</span><br>
<span style="font-size:200%;">200%</span>

xx-small～xx-largeの絶対的なキーワードに関して、実際にどのような大きさで表示されるかはブラウザの種類とバージョンによります。

表示例

３．１．５幅広・幅狭　(font-stretch)

フォントの形状を幅広・幅狭にする際に使用します。

font-stretch:属性値

フォントの幅広・幅狭を指定する。

属性値	説明
ultra-condensed	normal より4段階幅狭、この指定が最も幅狭となる
extra-condensed	normal より3段階幅狭
condensed	normal より2段階幅狭
semi-condensed	normal より1段階幅狭
normal	標準の形状（規定値）
semi-expanded	normal より1段階幅広
expanded	normal より2段階幅広
extra-expanded	normal より3段階幅広
ultra-expanded	normal より4段階幅広、この指定が最も幅広となる

記述例

<span style="font-family:'Arial';font-stretch:ultra-condensed;">日本語フォントと Font for the alphabets</span><br>
<span style="font-family:'Arial';font-stretch:extra-condensed;">日本語フォントと Font for the alphabets</span><br>
<span style="font-family:'Arial';font-stretch:condensed;">日本語フォントと Font for the alphabets</span><br>
<span style="font-family:'Arial';font-stretch:semi-condensed;">日本語フォントと Font for the alphabets</span><br>
<span style="font-family:'Arial';font-stretch:normal;">日本語フォントと Font for the alphabets</span><br>
<span style="font-family:'Arial';font-stretch:semi-expanded;">日本語フォントと Font for the alphabets</span><br>
<span style="font-family:'Arial';font-stretch:expanded;">日本語フォントと Font for the alphabets</span><br>
<span style="font-family:'Arial';font-stretch:extra-expanded;">日本語フォントと Font for the alphabets</span><br>
<span style="font-family:'Arial';font-stretch:ultra-expanded;">日本語フォントと Font for the alphabets</span>

一般的なフォントでは9種類の幅が用意されていることはあまりない（ほとんどのフォントは1種類しかない）ため、どのブラウザでも標準と幅狭しか区別がないようです。

表示例

３．１．６スモールキャップ　(font-variant)

フォントの形状をスモールキャップ（小文字を少し小さい大文字）にする際に使用します。

font-variant:属性値

フォントの形状をスモールキャップにする。

属性値	説明
normal	標準の形状（規定値）
small-caps	小文字の表示形式が小文字サイズの大文字となる

記述例

<span style="font-variant:normal;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-variant:small-caps;">The quick brown fox jumps over the lazy dog.</span>

表示例

３．１．７フォント　(font)

font-style、font-variant、font-weight、font-size/line-height、font-family をまとめて指定します。

font:属性値

フォントスタイル、変換、太さ、サイズ、表示高さ、ファミリをまとめて変更する。

属性値	説明	個別の属性	必須
bold	太く	font-weight	×
bolder	より太く（現状は bold と同じ）
lighter	より細く（現状は normal と同じ）
italic	イタリック体（専用フォントがあればそのフォントで表示する。なければ oblique と同じ）	font-style	×
oblique	斜体（標準フォントを傾けて表示する）	font-style	×
small-caps	スモールキャプス体（小文字ではなく大文字を小さく表示する）	font-variant	×
サイズサイズ/行高	フォントサイズと行の高さ（ともに単位付きの数値か % 付きの割合）行高を指定しない場合は、サイズのみ	font-size/line-height	○
文字列	フォント名	font-family	○

属性値の順番は以下の通り

○ font-style、font-variant、font-weight の定義は、font-size の値よりも前

○ line-height の値は、font-size の直後で / に続けて記述

○ font-family は必須で、最後に記述

上記以外にシステムフォントを示すキーワードを記述することもできる（他の属性値と組み合わせることはできない）。

属性値	説明
caption	ボタンなどのラベルに使われるフォント
small-caption	小さなコントロールのラベルに使われるフォント
icon	アイコンのラベルに使われるフォント
menu	ドロップダウンメニューやメニューリストに使われるフォント
message-box	ダイアログボックス内で使われるフォント
status-bar	ステータスバーで使われるフォント

記述例

<span style="font:bold 20pt 'ＭＳ Ｐ明朝';">いろいろ修飾された文字列</span><br>
<span style="font:italic 20pt/20pt 'ＭＳ Ｐ明朝';">いろいろ修飾された文字列</span>
<span style="font:bold 20pt/300% 'ＭＳ Ｐゴシック';">いろいろ修飾された文字列</span>
<span style="font:caption;">いろいろ修飾された文字列</span>
<span style="font:small-caption;">いろいろ修飾された文字列</span>
<span style="font:icon;">いろいろ修飾された文字列</span>
<span style="font:menu;">いろいろ修飾された文字列</span>
<span style="font:message-box;">いろいろ修飾された文字列</span>
<span style="font:status-bar;">いろいろ修飾された文字列</span>

システムフォントは、どのブラウザでも２種類しかないようです。

表示例

３．１．８サイズアジャスト　(font-size-adjust)

フォントの種類の違いによる見た目のサイズの調整をします。

同じフォントサイズを指定しても、英文フォントによって見た目のサイズが異なることがあります。いずれのフォントでも同じような見た目になるように調整します。

font-size-adjust:属性値

フォントの種類の違いによる見た目のサイズを調整する。

属性値	説明
none	標準の形状（規定値）
アスペクト値	フォントサイズに対する小文字 x の割合（0～）

記述例

スタイルシート
div > span { font-size: 24pt; }
div > span:nth-of-type(2n+1) { font-family: 'Times New Roman'; }
div > span:nth-of-type(2n+2) { font-family: Verdana; }

ボディ
<div>
 <span>M</span><span>M</span><span>x</span><span>x</span>
 <span>h</span><span>h</span><span>y</span><span>y</span>
</div>
<div>
 <span>M</span><span style="font-size-adjust:0.43;">M</span><span>x</span><span style="font-size-adjust:0.43;">x</span>
 <span>h</span><span style="font-size-adjust:0.43;">h</span><span>y</span><span style="font-size-adjust:0.43;">y</span>
</div>
<div>
 <span style="font-size-adjust:0.54;">M</span><span>M</span><span style="font-size-adjust:0.54;">x</span><span>x</span>
 <span style="font-size-adjust:0.54;">h</span><span>h</span><span style="font-size-adjust:0.54;">y</span><span>y</span>
</div>

奇数番目の文字は 'Times New Roman'、偶数番目の文字は Verdana フォントで表示しています。何も指定しない場合や font-size-adjust:none が指定されている場合は、１行目のように同じフォントサイズでも文字の大きさが異なります。

２行目は Verdana フォントに font-size-adjust:0.43、３行目は Times New Roman フォントに font-size-adjust:0.54 を指定して同じ大きさに見えるようにしています。

表示例

大文字や漢字の大きさも変わるようです。

３．１．９太字や斜体文字の生成　(font-synthesis)

フォントに太字や斜体文字がない場合に、ブラウザーが生成してよいかどうかを制御します。

font-synthesis:属性値

太字や斜体文字を生成してよいかどうかを制御する。

属性値	説明
none	太字およびイタリックの字体を生成しない（規定値）
weight	太字を生成してよい
style	斜体文字を生成してよい
small-caps	小文字サイズの大文字を生成してよい

記述例

スタイルシート
div.f {
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
}
div > span { font-size: 18pt; }
div > span:nth-of-type(1) { font-family: 'Times New Roman'; }
div > span:nth-of-type(2) { font-family: 'ＭＳ Ｐゴシック'; }

ボディ
<div>
  <span>Abcあいう</span>　　<span>Abcあいう</span>
</div>
<div class="f" style="font-synthesis:none;">
  <span>Abcあいう</span>　　<span>Abcあいう</span>
</div>
<div class="f" style="font-synthesis:weight;">
  <span>Abcあいう</span>　　<span>Abcあいう</span>
</div>
<div class="f" style="font-synthesis:style;">
  <span>Abcあいう</span>　　<span>Abcあいう</span>
</div>
<div class="f" style="font-synthesis:weight style;">
  <span>Abcあいう</span>　　<span>Abcあいう</span>
</div>
<div class="f" style="font-synthesis:small-caps;">
  <span>Abcあいう</span>　　<span>Abcあいう</span>
</div>

最初の１行目を除いた下の５行には、太字、斜体文字、スモールキャップが指定されています。

'ＭＳＰゴシック' フォントには太字や斜体文字が含まれていませんので、標準の文字から生成しています。font-synthesis を指定することによって、それらの文字の生成を制御します。

'Times New Roman' フォントには太字や斜体文字が含まれていますので、font-synthesis の影響を受けません。

表示例

３．１．１０カーニング　(font-kerning)

プロポーショナルフォントの文字間隔を、隣り合う文字の組み合わせによって文字詰めします。

font-kerning:属性値

太字や斜体文字を生成してよいかどうかを制御する。

属性値	説明
none	文字詰めしない
auto	文字詰めの制御をブラウザに依存（規定値）
normal	文字詰めする

記述例

スタイルシート
span { font-size: 16pt; font-family: 'Times New Roman'; }

ボディ
<span style="font-kerning:none;">AVAV YaYuYo</span><br>
<span style="font-kerning:auto;">AVAV YaYuYo</span><br>
<span style="font-kerning:normal;">AVAV YaYuYo</span><br>

表示例

３．１．１１数字の表記　(font-variant-numeric)

数字、分数、序数記号の表記を制御します。

font-variant-numeric:属性値

数字、分数、序数記号の表記を制御する。

属性値を空白区切りで複数指定して、表記を組み合わせて表示できる。

属性値		説明
normal		通常表示（規定値）
ordinal		1st 2nd 3rd の st nd rd などを上付き小文字で表示
slashed-zero		ゼロ(0)をスラッシュ付きのフォントで表示
数字の位置（どちらか）	lining-nums	全ての数字をベースライン上に並べる（規定値）
数字の位置（どちらか）	oldstyle-nums	3, 4, 5, 7, 9 を下げて表示する
数字の間隔（どちらか）	proportional-nums	数字をプロポーショナルで表示する
数字の間隔（どちらか）	tabular-nums	数字を等幅で表示する（規定値）
分数の表示（どちらか）	diagonal-fractions	スラッシュで区切られる表記で表示する（規定値）
分数の表示（どちらか）	stacked-fractions	積み重ねられて水平線で区切られた表記で表示する

記述例

スタイルシート
span { font-size: 12pt; }

ボディ
<span style="font-family:'Source Sans Pro'; font-variant-numeric:normal;">1st, 2nd, 3rd, 10th</span> 
<span style="font-family:'Helvetica'; font-variant-numeric:normal;">1st, 2nd, 3rd, 10th</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:normal;">1st, 2nd, 3rd, 10th</span><br>
<span style="font-family:'Source Sans Pro'; font-variant-numeric:ordinal;">1st, 2nd, 3rd, 10th</span>  
<span style="font-family:'Helvetica'; font-variant-numeric:ordinal;">1st, 2nd, 3rd, 10th</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:ordinal;">1st, 2nd, 3rd, 10th</span><br>
<span style="font-family:'Source Sans Pro'; font-variant-numeric:slashed-zero;">00000</span>  
<span style="font-family:'Helvetica'; font-variant-numeric:slashed-zero;">00000</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:slashed-zero;">00000</span><br>
<span style="font-family:'Source Sans Pro'; font-variant-numeric:lining-nums;">0123456789</span>  
<span style="font-family:'Helvetica'; font-variant-numeric:lining-nums;">0123456789</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:lining-nums;">0123456789</span><br>
<span style="font-family:'Source Sans Pro'; font-variant-numeric:oldstyle-nums;">0123456789</span>  
<span style="font-family:'Helvetica'; font-variant-numeric:oldstyle-nums;">0123456789</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:oldstyle-nums;">0123456789</span><br>
<span style="font-family:'Source Sans Pro'; font-variant-numeric:proportional-nums;">11111</span>  
<span style="font-family:'Helvetica'; font-variant-numeric:proportional-nums;">11111</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:proportional-nums;">11111</span><br>
<span style="font-family:'Source Sans Pro'; font-variant-numeric:tabular-nums;">11111</span>  
<span style="font-family:'Helvetica'; font-variant-numeric:tabular-nums;">11111</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:tabular-nums;">11111</span><br>
<span style="font-family:'Source Sans Pro'; font-variant-numeric:diagonal-fractions;">5 2/3</span>  
<span style="font-family:'Helvetica'; font-variant-numeric:diagonal-fractions;">5 2/3</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:diagonal-fractions;">5 2/3</span><br>
<span style="font-family:'Source Sans Pro'; font-variant-numeric:stacked-fractions;">5 2/3</span>  
<span style="font-family:'Helvetica'; font-variant-numeric:stacked-fractions;">5 2/3</span>  
<span style="font-family:'Meiryo UI'; font-variant-numeric:stacked-fractions;">5 2/3</span><br>

フォントによって、どのように表示されるかが変わるようです。

表示例

分数を表示できるブラウザやフォントの組み合わせでも、分数によっては表示が変わるようです。

記述例

スタイルシート
span {
  font-family:'Meiryo UI';
  font-size: 12pt;
  font-variant-numeric:stacked-fractions;
}

ボディ
<span>1/4 2/4 3/4 4/4 5/4</span><br>
<span>1/11 1/12 1/13 1/14</span><br>

表示例

３．１．１２大文字・小文字などの表示　(font-variant-caps)

文字の大文字・小文字などの表示を制御します。

font-variant-caps:属性値

文字の大文字・小文字などの表示を制御する。

属性値	説明
normal	通常表示（規定値）
small-caps	小文字を小さな大文字で表示
all-small-caps	すべての文字を小さな大文字で表示
small-caps	小文字を超小型大文字で表示
all-small-caps	すべての文字を超小型大文字で表示
unicase	すべての文字を大文字と大きな小文字を組み合わせて表示
titling-caps	タイトル向けの表記で表示

記述例

スタイルシート
span { font-size: 12pt; font-family: 'Helvetica'; }

ボディ
<span style="font-variant-caps:normal;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-variant-caps:small-caps;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-variant-caps:all-small-caps;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-variant-caps:petite-caps;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-variant-caps:all-petite-caps;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-variant-caps:unicase;">The quick brown fox jumps over the lazy dog.</span><br>
<span style="font-variant-caps:titling-caps;">The quick brown fox jumps over the lazy dog.</span><br>

表示例

３．１．１３合字の制御　(font-variant-ligatures)

隣り合った文字の合字を制御します。

font-variant-ligatures:属性値

隣り合った文字の合字を制御する。

属性値		説明
normal（注）		合字を行う（規定値）
none		合字を行わない
通常の合字（どちらか）	common-ligatures（注）	行う
通常の合字（どちらか）	no-common-ligatures	行わない
デザイナー定義合字（どちらか）	discretionary-ligatures	行う
デザイナー定義合字（どちらか）	no-discretionary-ligatures	行わない
歴史的合字（どちらか）	historical-ligatures	行う
歴史的合字（どちらか）	no-historical-ligatures	行わない
文脈的合字（どちらか）	contextual	行う
文脈的合字（どちらか）	no-contextual	行わない

（注）letter-spacing 属性で 0 以外が指定されていると合字は行われない。

記述例

スタイルシート
span { font-size: 18pt; font-family: 'Corbel'; }

ボディ
<span style="font-variant-ligatures:normal;">fi fj ff ft ffi</span><br>
<span style="font-variant-ligatures:none;">fi fj ff ft ffi</span><br>
<span style="font-variant-ligatures:common-ligatures;">fi fj ff ft ffi</span>
  <span style="font-variant-ligatures:no-common-ligatures;">fi fj ff ft ffi</span><br>
<span style="font-variant-ligatures:discretionary-ligatures;">fi fj ff ft ffi</span>
  <span style="font-variant-ligatures:no-discretionary-ligatures;">fi fj ff ft ffi</span><br>
<span style="font-variant-ligatures:historical-ligatures;">fi fj ff ft ffi</span>
  <span style="font-variant-ligatures:no-historical-ligatures;">fi fj ff ft ffi</span><br>
<span style="font-variant-ligatures:contextual;">fi fj ff ft ffi</span>
  <span style="font-variant-ligatures:no-contextual;">fi fj ff ft ffi</span><br>

３行目の左側が common-ligatures、右側が no-common-ligatures です。

discretionary-ligatures、historical-ligatures、contextual の確認は取れていません。

表示例

３．１．１４上付き文字、下付き文字の制御　(font-variant-position)

上付き文字、下付き文字を制御します。

font-variant-position:属性値

隣り合った文字の合字を制御する。

属性値	説明
normal	通常表示を行う（規定値）
sub	上付き文字で表示する
super	下付き文字で表示する

記述例

スタイルシート
span { font-family: 'Helvetica'; font-size: 16pt; line-height: 150%;}
span:nth-of-type(1) { color: lightgrey; }

ボディ
<div><span>normal</span><span style="font-variant-position:normal;">normal</span></div>
<div><span>normal</span><span style="font-variant-position:sub;">sub</span></div>
<div><span>normal</span><span style="font-variant-position:super;">super</span></div>

表示例

３．１．１５漢字の違いの制御　(font-variant-east-asian)

日本語や中国語での漢字の字形の違いを制御します。

font-variant-east-asian:属性値

日本語や中国語での漢字の字形の違いを制御する。

属性値	説明
normal	通常表示を行う（規定値）
jis78	JIS78 の字形で表示
jis83	JIS83 の字形で表示
jis90	JIS90 の字形で表示
jis04	JIS04 の字形で表示
simplified	新字体で表示
traditional	旧字体で表示
full-width	等幅全角字形で表示
proportional-width	プロポーショナル字体で表示
ruby	ルビ用文字で表示

記述例

スタイルシート
span { font-family: system-ui; font-size: 16pt; }
div:nth-of-type(4) > span { font-family: serif; }

ボディ
<div>
 <span style="font-variant-east-asian:normal;">鯵鴬 偉沿 辻飴</span>
 <span style="font-variant-east-asian:jis78;">鯵鴬 偉沿 辻飴</span>
 <span style="font-variant-east-asian:jis83;">鯵鴬 偉沿 辻飴</span>
 <span style="font-variant-east-asian:jis90;">鯵鴬 偉沿 辻飴</span>
 <span style="font-variant-east-asian:jis04;">鯵鴬 偉沿 辻飴</span>
</div>
<br>
<div>
 <span style="font-variant-east-asian:simplified;">学 気 台 楽 万 体</span>
 <span style="font-variant-east-asian:traditional;">学 気 台 楽 万 体</span>
</div>
<br>
<div>
 <span style="font-variant-east-asian:normal;">ﾊﾝｶｸ､ﾓｼﾞ｡</span>
 <span style="font-variant-east-asian:full-width;">ﾊﾝｶｸ､ﾓｼﾞ｡</span>
</div>
<br>
<div>
 <span style="font-variant-east-asian:normal;">チャット</span>
 <span style="font-variant-east-asian:proportional-width;">チャット</span>
</div>
<br>
<div>
 <span style="font-variant-east-asian:normal;">あいうえお</span>
 <span style="font-variant-east-asian:ruby;">あいうえお</span>
</div>

属性値を proportional-width としている（「チャット」を表示している）部分は、フォントを serif にしています。

表示例

３．１．１６言語の制御　(font-language-override)

表示する言語を一時的に変更し、言語に固有の字形の使用を制御します。

font-language-override:属性値

表示する言語を一時的に変更し、言語に固有の字形の使用を制御する。

属性値	説明
none	通常表示を行わない
normal	通常表示を行う（規定値）
文字列	変更する言語のシステムタグ

記述例

スタイルシート
span { font-family: 'Corbel'; font-size: 24pt; }

ボディ
<div>
 <span style="font-variant-ligatures:none;">ffi</span>
 <span style="font-language-override:normal;">ffi</span>
 <span style="font-language-override:'TRK';">ffi</span>

表示例

３．１．１７テキスト描画の最適化　(font-optical-sizing)

テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。

光学的サイズ変化軸を持つフォントに対して既定で有効になります。

font-optical-sizing:属性値

テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定する。

属性値	説明
none	書体の形を変更しない
auto	書体の形を変更する（規定値）

記述例

スタイルシート
span {
  font-family: 'AmstelvarAlpha'; width: 230px;
  display: inline-block;
  vertical-align: top;
}

ボディ
<span style="font-size:24pt;font-optical-sizing:none;">It always seems impossible until it's done.</span>
<span style="font-size:19pt;font-optical-sizing:none;">It always seems impossible until it's done.</span><br>
<span style="font-size:24pt;font-optical-sizing:auto;">It always seems impossible until it's done.</span>
<span style="font-size:19pt;font-optical-sizing:auto;">It always seems impossible until it's done.</span><br>

表示例

３．１．１８バリアブルフォントの設定　(font-variation-settings)

バリアブルフォントに対して太さ(weight)、幅(width)などのパラメータを設定します。

通常のフォントは、字幅やウェイト、斜体などのスタイルごとでファイルが分かれていますが、バリアブルフォントの場合はフォントファミリー全体を1つのファイルで管理することができます。

font-variation-settings:属性値

バリアブルフォントに対して太さ、幅などのパラメータを設定する。

数値の範囲や規定値はフォントによる。

属性値		説明
normal		既定の設定を使用する（規定値）
'wdth'	数値	横幅を変更する
'wght'	数値	太さを変更する
'slnt'	数値	傾きを変更する
'ital'	数値	イタリックにする
'opsz'	数値	オプティカルサイズを変更する

記述例

スタイルシート
@font-face { 
  font-family: "Roboto VF";
  src: url("../../fonts/Roboto-VF.woff2") format("woff2-variations");   
}
span {
  font-family: 'Roboto VF';
  font-style: normal;
  font-size: 18pt;
}

ボディ
<span style="font-variation-settings:normal;">Font for the alphabets</span><br>
<span style="font-variation-settings:'wdth' 70;">Font for the alphabets</span><br>
<span style="font-variation-settings:'wght' 500;">Font for the alphabets</span><br>
<span style="font-variation-settings:'slnt' 10;">Font for the alphabets</span><br>
<span style="font-variation-settings:'ital' 0.3;">Font for the alphabets</span><br>
<span style="font-variation-settings:'opsz' 48;">Font for the alphabets</span><br>

ita や opsz は機能していないように見えますが、使用しているフォントによるのかもしれません。

表示例

３．１．１９カラーパレットの設定　(font-palette)

複数の色情報を持つカラーフォントのカラーパレットを設定します。

通常のフォントは、モノクロで CSS でも１色でしか着色できませんが、カラーフォントは、その名のとおり複数のカラーや陰、テクスチャーや透明度を設定することができます。

font-palette:属性値

複数の色情報を持つカラーフォントのカラーパレットを設定する。

light や dark は、カラーフォントがサポートしているかどうかによる。

属性値	説明
normal	標準のカラーパレットを使用する（規定値）
light	ライトモードに適したカラーパレットを使用する
dark	ダークモードに適したカラーパレットを使用する
CSS 変数	CSS 変数で定義したカラーパレットを使用する

記述例

スタイルシート
@font-face {
  font-family: Nabla;
  src: url(/fonts/Nabla-Regular.ttf);
}
@font-palette-values --Nabla-1 { font-family: Nabla; base-palette: 1; }
@font-palette-values --Nabla-5 { font-family: Nabla; base-palette: 5; }
@font-palette-values --Nabla-5x { font-family: Nabla; base-palette: 5;
  override-colors: 1 red, 3 yellow, 5 green, 6 orange;
}
span {
  font-family: Nabla;
  font-size: 18pt;
}

ボディ
<span style="font-palette:normal;">Font for the alphabets</span><br>
<span style="font-palette:light;">Font for the alphabets</span><br>
<span style="font-palette:dark;">Font for the alphabets</span><br>
<span style="font-palette: --Nabla-1;">Font for the alphabets</span><br>
<span style="font-palette: --Nabla-5;">Font for the alphabets</span><br>
<span style="font-palette: --Nabla-5x;">Font for the alphabets</span><br>

light や dark は機能していないように見えますが、使用しているフォントによるのかもしれません。

CSS 変数や @font-palette-values も参照してください。

表示例

３．２　　テキスト

テキストの表示について説明します。

属性	説明
text-indent	一行目のインデント（字下げ）幅の指定
text-align	行揃えの位置や、均等割付の指定
text-justify	単語間や文字間のスペースの調整
vertical-align	縦方向の揃え位置の指定
text-transform	大文字・小文字・全角で表示
white-space	改行・空白の扱いの指定
line-height	行の高さの指定
word-break	単語途中での折り返しの指定
word-spacing	単語の間隔の指定
letter-spacing	文字の間隔の指定

３．２．１インデント　(text-indent)

文章の段落などの一行目のインデント（字下げ）幅を指定する際に使用します。インデントには負の値を指定することもできます。

text-indent:属性値

一行目のインデント（字下げ）幅を指定する。

属性値	説明
数値	インデント量、もしくは行幅に対するインデント量の割合　　　　　（規定値：0）（単位や割合（%）については「１．２．２単位」を参照）

記述例

<p style="text-indent:2em;">春は、あけぼの。やうやう白くなりゆく山ぎは　少し明りて紫だちたる雲の細くたなびきたる。</p>
<p style="text-indent:50%;">夏は、夜。月の頃はさらなり。闇もなほ。螢の多く飛び違ひたる。また、ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。</p>
<p style="margin-left:50px;text-indent:-50px;">秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねてたるが、いと小さく見ゆるはいとをかし。日いりはてて、風の音、虫の音などいとあわれなり。</p>

表示例

３．２．２行揃え　(text-align)

行揃えの位置や、均等割付を指定する際に使用します。

text-align:属性値

行揃えの位置や、均等割付を指定する。

属性値	説明
left	左寄せ（規定値）
right	右寄せ
center	中央揃え
justify	均等割付

記述例

<div style="width:14em;text-align:left;">It always seems impossible until it’s done.</div>　　　　　左寄せ
<div style="width:14em;text-align:right;">It always seems impossible until it’s done.</div>　　　　 右寄せ
<div style="width:14em;text-align:center;">It always seems impossible until it’s done.</div>　　　　中央揃え
<div style="width:14em;text-align:justify;">It always seems impossible until it’s done.</div>　　　 均等割付

黄色い背景色は理解の助けになるように別途表示しています。

表示例

３．２．３均等割付　(text-justify)

文章の右端に空白が空かないように、単語間や文字間のスペースを調整します。

ただし、 text-align を justify に設定しておく必要があります。

text-justify:属性値

text-align 属性が justify のときに、単語間や文字間のスペースを調整して、文章の右端に空白が空かないようにする。

属性値	説明
none	調整しない
auto	自動調整（規定値）
inter-word	単語間のみで調整
inter-character	文字間のみで調整

記述例

<div style="text-align:justify;text-justify:none;">It always seems impossible until it's done.</div>
<div style="text-align:justify;text-justify:none;">何事も成功するまでは不可能に思えるものである。</div>
<div style="text-align:justify;text-justify:auto;">It always seems impossible until it's done.</div>
<div style="text-align:justify;text-justify:auto;">何事も成功するまでは不可能に思えるものである。</div>
<div style="text-align:justify;text-justify:inter-word;">It always seems impossible until it's done.</div>
<div style="text-align:justify;text-justify:inter-word;">何事も成功するまでは不可能に思えるものである。</div>
<div style="text-align:justify;text-justify:inter-character;">It always seems impossible until it's done.</div>
<div style="text-align:justify;text-justify:inter-character;">何事も成功するまでは不可能に思えるものである。</div>

黄色い背景色は理解の助けになるように別途表示しています。

表示例

３．２．４縦位置　(vertical-align)

行の中でのテキストや画像などの縦方向の揃え位置を指定する際に使用します。

vertical-align:属性値

行の中でのテキストや画像などの縦方向の揃え位置を指定する。

属性値	説明
auto	自動算出。通常は baseline
baseline	親要素のベースライン揃え
top	上端揃え
middle	中央揃え
bottom	下端揃え
text-top	テキストの上端揃え（テーブルセルへの指定は無効）
text-bottom	テキストの下端揃え（テーブルセルへの指定は無効）
super	上付き文字（テーブルセルへの指定は無効）
sub	下付き文字（テーブルセルへの指定は無効）
パーセント（%）	その要素のline-heightプロパティの値に対する割合を%で指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら下へ移動）
数値（単位）	その要素の数値に em や ex や px などの単位をつけて指定（ベースラインが揃った状態を0として、正の値なら上、負の値なら下へ移動）

属性値はおおよそ次のような位置になります。

記述例

<span style="vertical-align:top;">top</span>
<span style="vertical-align:bottom;">bottom</span>
<span style="vertical-align:text-top;">text-top</span>
<span style="vertical-align:super;">super</span>
<span style="vertical-align:sub;">sub</span>
<span style="vertical-align:middle;">middle</span>
<span style="vertical-align:baseline;">baseline</span>
<span style="vertical-align:text-bottom;">text-bottom</span>
<span style="vertical-align:auto;">auto</span>
<span style="vertical-align:50%;">50%</span>
<span style="vertical-align:-0.5em;">-0.5em</span>

文字色を変えています。また、左右の位置も重ならないようにずらしてあります。

表示例

super や middle、sub などはブラウザによって位置が異なっているようです。

３．２．５大文字・小文字　(text-transform)

テキストを大文字・小文字・全角で表示します。

text-transform:属性値

テキストを大文字・小文字・全角で表示する。

属性値	説明
none	そのまま表示（規定値）
capitalize	単語の先頭の文字のみ大文字で表示
uppercase	すべての文字を大文字で表示
lowercase	すべての文字を小文字で表示
full-width	すべての文字を全角で表示

記述例

<div style="text-transform:none;">I have a dream.</div>
<div style="text-transform:capitalize;">I have a dream.</div>
<div style="text-transform:uppercase;">I have a dream.</div>
<div style="text-transform:lowercase;">I have a dream.</div>
<div style="text-transform:full-width;">I have a dream.</div>

説明のためのオレンジ色の文字列を表示しています。

表示例

３．２．６改行・空白　(white-space)

要素の中のテキストを、自動改行するか、複数の空白をひとつの空白に置換するか、改行を空白に置換するかを指定します。

white-space:属性値

改行・空白の扱いを指定する。

属性値	説明
normal	自動改行する。複数の空白・タブ・改行をひとつの空白に置換（規定値）
pre	自動改行しない。空白・タブ・改行はそのまま表示
nowrap	自動改行しない。複数の空白・タブ・改行をひとつの空白に置換
pre-wrap	自動改行する。空白・タブ・改行はそのまま表示
pre-line	自動改行する。空白・タブをひとつの空白に置換。改行はそのまま表示

記述例

<div style="text-transform:normal;">And as we walk,
we must make the pledge       that we shall always march ahead.</div>
<div style="text-transform:pre;">And as we walk,
we must make the pledge       that we shall always march ahead.</div>
<div style="text-transform:nowrap;">And as we walk,
we must make the pledge       that we shall always march ahead.</div>
<div style="text-transform:pre-wrap;">And as we walk,
we must make the pledge       that we shall always march ahead.</div>
<div style="text-transform:pre-line;">And as we walk,
we must make the pledge       that we shall always march ahead.</div>

説明のためのオレンジ色の文字列を表示しています。また、背景に色も付けています。

表示例

３．２．７行の高さ　(line-height)

行の高さを指定します。

line-height:属性値

行の高さを指定する。

属性値	説明
normal	通常の行の高さ（規定値）
倍数	フォントサイズの倍数が行の高さ
高さ	数値＋単位
none	親ブロックのフォントサイズ

記述例

<div style="line-height:normal;">And as we walk, we must make the pledge that we shall always march ahead.</div>
<div style="line-height:1.2;">And as we walk, we must make the pledge that we shall always march ahead.</div>
<div style="line-height:1.5em;">And as we walk, we must make the pledge that we shall always march ahead.</div>
<div style="line-height:200%;">And as we walk, we must make the pledge that we shall always march ahead.</div>

説明のためのオレンジ色の文字列を表示しています。また、背景に色も付けています。

表示例

３．２．８折り返し　(word-break)

単語途中での折り返しを指定します。

word-break:属性値

単語途中での折り返しを指定する。

属性値	説明
normal	アルファベットの単語の途中では折り返さない（規定値）
break-all	単語の途中でもハイフンを入れずに折り返す
keep-all	スペースや改行があるときのみ折り返す

記述例

<div style="word-break:normal;">It always seems impossible until it's done.</div>
<div style="word-break:normal;">何事も成功するまでは 不可能に思えるものである。</div>
<div style="word-break:break-all;">It always seems impossible until it's done.</div>
<div style="word-break:break-all;">何事も成功するまでは 不可能に思えるものである。</div>
<div style="word-break:keep-all;">It always seems impossible until it's done.</div>
<div style="word-break:keep-all;">何事も成功するまでは 不可能に思えるものである。</div>

説明のためのオレンジ色の文字列を表示しています。また、背景に色も付けています。

表示例

３．２．９単語の間隔　(word-spacing)

単語の間隔を指定します。

word-spacing:属性値

単語の間隔を指定する。

属性値	説明
normal	標準の間隔（規定値）
間隔	数値＋単位
パーセント	標準の間隔のパーセンテージ

記述例

<div style="word-spacing:normal;">It always seems impossible until it's done.</div>
<div style="word-spacing:normal;">何事も成功するまでは 不可能に思えるものである。</div>
<div style="word-spacing:0.5em;">It always seems impossible until it's done.</div>
<div style="word-spacing:0.5em;">何事も成功するまでは 不可能に思えるものである。</div>
<div style="word-spacing:200%;">It always seems impossible until it's done.</div>
<div style="word-spacing:200%;">何事も成功するまでは 不可能に思えるものである。</div>

説明のためのオレンジ色の文字列を表示しています。また、背景に色も付けています。

表示例

３．２．１０文字の間隔　(letter-spacing)

文字の間隔を指定します。

letter-spacing:属性値

文字の間隔を指定する。

属性値	説明
normal	標準の間隔（規定値）
間隔	数値＋単位

記述例

<div style="letter-spacing:normal;">It always seems impossible until it's done.</div>
<div style="letter-spacing:normal;">何事も成功するまでは 不可能に思えるものである。</div>
<div style="letter-spacing:0.5em;">It always seems impossible until it's done.</div>
<div style="letter-spacing:0.5em;">何事も成功するまでは 不可能に思えるものである。</div>
<div style="letter-spacing:200%;">It always seems impossible until it's done.</div>
<div style="letter-spacing:200%;">何事も成功するまでは 不可能に思えるものである。</div>

説明のためのオレンジ色の文字列を表示しています。また、背景に色も付けています。

表示例

３．３　　テキスト修飾

テキストの修飾について説明します。

属性	説明
text-decoration	下線の表示位置や線種、色の指定
text-underline-position	下線の表示位置の指定
text-shadow	テキストの影の調整

３．３．１装飾　(text-decoration)

下線の表示位置や線種、色を指定します。

text-decoration:線の位置線種色

下線の表示位置や線種、色を指定する。

線の位置

属性値	説明
none	下線などを表示しない（規定値）
underline	下線
overline	上線
line-through	打ち消し線

none 以外のときは、次の線種と色を指定できる

線種

属性値	説明
solid	実線（規定値）
double	二重線
dotted	点線
dashed	破線
wavy	波線

記述例

<span style="text-decoration:none;">漢Mxhy</span><br>
<span style="text-decoration:underline;">漢Mxhy</span><br>
<span style="text-decoration:overline;">漢Mxhy</span><br>
<span style="text-decoration:line-through;">漢Mxhy</span><br>
<span style="text-decoration:underline solid;">漢Mxhy</span><br>
<span style="text-decoration:underline double;">漢Mxhy</span><br>
<span style="text-decoration:underline dotted;">漢Mxhy</span><br>
<span style="text-decoration:underline dashed;">漢Mxhy</span><br>
<span style="text-decoration:underline wavy;">漢Mxhy</span><br>
<span style="text-decoration:underline red;">漢Mxhy</span><br>

理解の助けになるように配置位置を変更、説明のためのオレンジ色の文字列を表示しています。

表示例

３．３．２下線の表示位置　(text-underline-position)

下線の表示位置を指定します。

text-underline-position:属性値

下線の表示位置を指定する。

属性値	説明
auto	自動算出（規定値）
alphabetic	アルファベットのベースライン
below	下側
left	縦書きの場合左側
right	縦書きの場合右側

記述例

<span style="text-decoration:underline;text-decoration:auto;">漢Mxhy</span><br>
<span style="text-decoration:underline;text-underline-position:alphabetic;">漢Mxhy</span><br>
<span style="text-decoration:underline;text-underline-position:below;">漢Mxhy</span><br>
<span style="text-decoration:underline;writing-mode:vertical-rl;text-underline-position:left;">漢Mxhy</span><br>
<span style="text-decoration:underline;writing-mode:vertical-rl;text-underline-position:right;">漢Mxhy</span><br>

理解の助けになるように配置位置を変更、説明のためのオレンジ色の文字列を表示しています。

表示例

３．３．３テキストの影　(text-shadow)

テキストの影を指定します。

text-shadow:属性値

テキストの影を指定する。

属性値	説明
none	影を表示しない（規定値）
影種	横方向のずれ縦方向のずれぼかし強度影の色（カンマで区切って複数の影をつけることも可能）

影種

属性値	説明	必須
数値	横方向のずれ	○
数値	縦方向のずれ	○
数値	ぼかし範囲（規定値：0）	×
色	影の色（規定値：文字と同色）	×

記述例

<div style="text-shadow:none;">漢Mxhy</div>

<div style="text-shadow:3px 0px 0px blue;">漢Mxhy</div>
<div style="text-shadow:0px 3px 0px blue;">漢Mxhy</div>
<div style="text-shadow:3px 3px 0px blue;">漢Mxhy</div>

<div style="text-shadow:3px 3px 0px blue;">漢Mxhy</div>
<div style="text-shadow:3px 3px 1px blue;">漢Mxhy</div>
<div style="text-shadow:3px 3px 2px blue;">漢Mxhy</div>

<div style="font-size:24pt;text-shadow:1px 1px 0px white, 3px 3px 5px blue;">漢Mxhy</div>
<div style="color:yellow;font-size:24pt;text-shadow:1px 1px 0px #555, 3px 3px 5px black;">漢Mxhy</div>

理解の助けになるように配置位置を変更、説明のためのオレンジ色の文字列を表示しています。

表示例

３．４　　文書方向

文書方向について説明します。

属性	説明
writing-mode	縦書きの指定
direction	文章の方向の指定
unicode-bidi	Unicode の文字表記の方向を上書き

３．４．１縦書き　(writing-mode)

縦書きを指定します。

writing-mode:属性値

縦書きを指定する。

属性値	説明
horizontal-tb	横書きで上→下に改行
vertical-rl	縦書きで右→左に改行
vertical-lr	縦書きで左→右に改行

記述例

<div style="writing-mode:horizontal-tb;">春はあけぼの。やうやうしろくなりゆく山ぎは、すこしあかりて、
                                                              紫だちたる雲のほそくたなびきたる。</div>
<div style="writing-mode:vertical-rl;">春はあけぼの。やうやうしろくなりゆく山ぎは、すこしあかりて、
                                                              紫だちたる雲のほそくたなびきたる。</div>
<div style="writing-mode:vertical-lr;">春はあけぼの。やうやうしろくなりゆく山ぎは、すこしあかりて、
                                                              紫だちたる雲のほそくたなびきたる。</div>

説明のための文字列を表示しています。また、背景に色も付けています。

表示例

３．４．２文章の方向　(direction)

文章の方向を指定します。

日本語に direction:rtl; のみを設定しても、右から左の表記にはならず、日本語の標準的な表記方向が優先されるようです。日本語を右から左に表記させたい場合には、unicode-bidi と組み合わせて使用します。

また、通常のテキストの方向だけでなく、テーブルのセルの方向などにも影響します。

direction:属性値

文章の方向を指定する。

属性値	説明
ltr	左から右（規定値）
rtl	右から左

記述例

<div style="direction:ltr;">春はあけぼの。やうやうしろくなりゆく山ぎは、すこしあかりて、
                                                              紫だちたる雲のほそくたなびきたる。</div>
<div style="direction:rtl;unicode-bidi:bidi-override;">春はあけぼの。やうやうしろくなりゆく山ぎは、すこしあかりて、
                                                              紫だちたる雲のほそくたなびきたる。</div>
<table style="direction:rtl;">
  <tr><td style="unicode-bidi:bidi-override;">春はあけぼの。</td><td>やうやうしろくなりゆく山ぎは、すこしあかりて、</td>
                                                              <td>紫だちたる雲のほそくたなびきたる。</td></tr>
</table>

table 要素に direction:rtl; を指定しているため、セルの右側から左側へと文字列が設定されます。また、「春はあけぼの。」の td 要素に unicode-bidi:bidi-override を指定しているため、そこだけが右から左に表記されています。

説明のための文字列を表示しています。また、背景色や枠も付けています。

表示例

３．４．３文字表記の方向　(unicode-bidi)

Unicode の文字表記の方向を上書きします。

文字表記の方向は direction で値を指定します。

unicode-bidi:属性値

Unicode の文字表記の方向を上書きする。

属性値	説明
normal	標準のままが適用される。（規定値）
embed	単語の並びを direction の方向に並び替える。ただし、単語中の文字は並び替えない。
bidi-override	単語の並び、単語中の文字の並びを direction の方向に並び替える。

記述例

<div style="direction:rtl;unicode-bidi:normal;">In spring it is the dawn that is most beautiful.</div>
<div style="direction:rtl;unicode-bidi:embed;">In spring it is the dawn that is most beautiful.</div>
<div style="direction:rtl;unicode-bidi:bidi-override;">In spring it is the dawn that is most beautiful.</div>

説明のための文字列を表示しています。また、背景色も付けています。

表示例

３．５　　ルビ

ルビについて説明します。

属性	説明
ruby-align	ルビの右寄せ、左寄せ等の指定
ruby-overhang	ルビがルビ対照の文字の前後の文字に覆いかぶさるか否かの指定
ruby-position	ルビを配置する場所の指定

３．５．１行揃え　(ruby-align)

ルビの右寄せ、左寄せ等の値を指定します。

ruby-align:属性値

ルビの右寄せ、左寄せ等の値を指定する。

属性値	説明
auto	自動配置（規定値）
left	左寄せ
center	中央寄せ
right	右寄せ
distribute-letter	両端揃え
distribute-space	均等割り
line-edge	ルビが長い場合に、行の左端では左寄せ、行の右端では右寄せ

記述例

<div><ruby style="ruby-align:auto;">百舌鳥<rt>もず</rt></ruby></div>
<div><ruby style="ruby-align:left;">百舌鳥<rt>もず</rt></ruby></div>
<div><ruby style="ruby-align:center;">百舌鳥<rt>もず</rt></ruby></div>
<div><ruby style="ruby-align:right;">百舌鳥<rt>もず</rt></ruby></div>
<div><ruby style="ruby-align:distributed-letter;">百舌鳥<rt>もず</rt></ruby></div>
<div><ruby style="ruby-align:distributed-space;">百舌鳥<rt>もず</rt></ruby></div>
<div><ruby style="ruby-align:line-edge;">志<rt>こころざし</rt></ruby>
　　　<ruby style="ruby-align:line-edge;">志<rt>こころざし</rt></ruby></div>

説明のための文字列を表示しています。

表示例

３．５．２表示領域　(ruby-overhang)

ルビが長い時に、ルビと関係ない前後の文字の配置方法を指定します。

ruby-overhang:属性値

ルビが長い時に、ルビと関係ない前後の文字の配置方法を指定する。

属性値	説明
none	前後の文字はルビの下に入らない（規定値）
auto	前後の文字に覆いかぶさる
start	開始部分のみ、前方のテキストに覆いかぶさる
end	終了部分のみ、後方のテキストに覆いかぶさる
whitespace	前後のテキストが空白の部分だけ覆いかぶさる

記述例

<div>事、<ruby style="ruby-overhang:none;">志<rt>こころざし</rt></ruby>と異なる</div>
<div>事、<ruby style="ruby-overhang:auto;">志<rt>こころざし</rt></ruby>と異なる</div>
<div>事、<ruby style="ruby-overhang:start;">志<rt>こころざし</rt></ruby>と異なる</div>
<div>事、<ruby style="ruby-overhang:end;">志<rt>こころざし</rt></ruby>と異なる</div>
<div>事、  <ruby style="ruby-overhang:whitespace;">志<rt>こころざし</rt></ruby>  と異なる</div>

説明のための文字列を表示しています。

表示例

３．５．３表示位置　(ruby-position)

ルビを配置する場所を指定します。

ruby-position属性値

ルビを配置する場所を指定する。

属性値	説明
before	横書きの場合は上側に、縦書きの場合は右側に表示する（規定値）
after	横書きの場合は下側に、縦書きの場合は左側に表示する
inter-character	1文字ずつ、文字の右側に表示する
inline	ルビを適用しないのと同じように、テキストの右側にルビを表示する

記述例

<div><ruby style="ruby-position:before;">振り仮名<rt>ふりがな</rt></ruby></div>
<div><ruby style="ruby-position:after;">振り仮名<rt>ふりがな</rt></ruby></div>
<div><ruby style="ruby-position:inter-character;">振り仮名<rt>ふりがな</rt></ruby></div>
<div><ruby style="ruby-position:inline;">振り仮名<rt>ふりがな</rt></ruby>  </div>

説明のための文字列を表示しています。

表示例

３．６　　コンテント作成

ルビについて説明します。

属性	説明
quotes	q 要素の前後に挿入される引用符の指定
content	疑似要素 :before や :after と共に用いて、要素の前後に文字や画像などを挿入
counter-reset	content の count(...) で挿入するカウンタをリセット
counter-increment	content の count(...) で挿入するカウンタをカウントアップ

３．６．１引用符　(quotes)

q 要素の前後に挿入される引用符を指定します。ここで指定された開始引用符、終了引用符は、open-quote、close-quote で参照されます。

quotes:属性値

q 要素の前後に挿入される引用符を指定する。

属性値	説明
none	引用符を生成しない
"引用符"	開始引用符と終了引用符の二つをペアにしてスペースで区切って指定。さらにそれらを空白で区切って複数指定

記述例

<p>聖書には<q style="quotes:'「' '」';">神は言われた<q style="quotes:'『' '』';">光あれ</q>こうして光があった</q>と書いてある。</p>

表示例

スタイルシートでは次のように指定できます。

スタイルシート
q { quotes: "「" "」" "『" "』"; }

ボディ
<p>聖書には<q>神は言われた<q>光あれ</q>こうして光があった</q>と書いてある。</p>

外側の q 要素では「」が表示され、その内側の q 要素では『』が表示されます。

表示例

３．６．２コンテンツ　(content)

要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。

content:属性値

要素の前後に文字列や画像などを挿入する。

値	説明
"文字列"	文字列を " や ' で囲んで指定する
URL(URL)	画像や音声等のファイルの URL を指定する
counter(カウンタ名) counters(カウンタ名, 区切り文字)	counter-increment で指定したカウンタ名を記述する階層が深い場合には counters を使用する
attr(属性名)	指定した属性の値が表示される
open-quote、close-quote	開始引用符と終了引用符（quotes で指定されている引用符が階層に応じて挿入される）
no-open-quote、no-close-quote	表示されない開始引用符と終了引用符（階層は深くなるので、quotes で指定されている引用符は変わる）

要素の前後に表示する文字列や画像を指定します。

記述例

スタイルシート
  div.star::before {content:"★ "; color:orange;}
  div.istar::before {content:url("star.png");}
  
ボディ
<div class="star">丸い星が ○ じゃないのは光の回析でこう見えるから</div>
<div class="istar">こちらはちょっと太めの星のイラスト</div>

表示例

カウンターの例です。

記述例

スタイルシート
  div.counter {counter-increment:number;}
  div.counter::before {content:"(" counter(number) ") ";}

  ol {counter-reset: s; list-style-type: none;}
  li {counter-increment: s;}
  li::before {content: counters(s, ".") " ";}

ボディ
<div class="counter">最初の行</div>
<div class="counter">次の行</div>

<ol>
  <li>item</li>
  <li>group
    <ol>
      <li>item</li>
      <li>group
        <ol>
          <li>item</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

説明のための文字列を表示しています

表示例

指定した属性を表示します。

記述例

スタイルシート
  a:hover::after {content: " (" attr(href) ")";}

ボディ
<div>マウスを乗せると URL が表示される　<a href="h203.htm">このページ</a></div>

表示例

ネストするかっこを指定します。かっこを表示しない設定にしてもネストは深まりますので、次のかっこの文字になります。

記述例

スタイルシート
  span.p { quotes: "[" "]" "{" "}" "(" ")"; }
  span.p::before {content:open-quote;}
  span.p::after {content:close-quote;}
  span.np::before {content:no-open-quote;}
  span.np::after {content:no-close-quote;}

ボディ
<span class="p">x * <span class="p">y * <span class="p">z + 1</span> + 1</span> + 1</span>
<span class="p">x * <span class="np">y * <span class="p">z + 1</span> + 1</span> + 1</span>

説明のための文字列を表示しています

表示例

３．６．３カウンタのリセット　(counter-reset)

要素のカウンタの値をリセットする際に使用します。

counter-reset:属性値

要素のカウンタの値をリセットする。

値	説明
none	カウンタの値をリセットしない（規定値）
カウンタ名	指定した名前のカウンタの値を 0 にリセットする
カウンタ名整数値	指定した名前のカウンタの値を整数値にする

記述例

スタイルシート
  h4 {counter-reset:number;}
  h5 {counter-reset:number 10;}
  div {counter-increment:number;}
  div::before {content:"(" counter(number) ") ";}

ボディ
  <div>最初の行</div>
  <div>次の行</div>
  <h4>大見出し</h4>
  <div>また最初の行</div>
  <h5>小見出し</h5>
  <div>またまた最初の行</div>

説明のための文字列を表示しています

表示例

３．６．４カウンタの進行　(counter-increment)

要素のカウンタの値を進める際に使用します。

counter-increment:属性値

要素のカウンタの値を進める。

値	説明
none	カウンタの値を進めない（規定値）
カウンタ名	指定した名前のカウンタの値に 1 を加算する
カウンタ名整数値	指定した名前のカウンタの値に整数値を加算する

記述例

スタイルシート
  body { counter-reset: chapter; }
  h1 {
      counter-increment: chapter;
      counter-reset: section;
  }
  h1:before { content: counter(chapter) " "; }
  h2 {
      counter-increment: section;
      counter-reset: subsection;
      text-indent: 1em;
  }
  h2:before { content: counter(chapter) "-" counter(section) " "; }
  h3 {
      counter-increment: subsection;
      text-indent: 2em;
  }
  h3:before { content: counter(chapter) "-" counter(section) "-" counter(subsection) " "; }

ボディ
  <h1>大見出し</h1>
  <h2>中見出し</h2>
  <h3>小見出し</h3>
  <h3>小見出し</h3>
  <h2>中見出し</h2>
  <h3>小見出し</h3>

表示例


△	△	○	△	△	△


△	△	○	△	△	△


△	△	○	△	△	△


△	△	△	△	△	△


△	△	△	△	△	△

３ テキスト

３．１ フォント

３．１．１ 種類 (font-family)

font-family:属性値

記述例

３．１．２ スタイル (font-style)

font-style:属性値

記述例

３．１．３ 太さ (font-weight)

font-weight:属性値

記述例

３．１．４ サイズ (font-size)

font-size:属性値

記述例

３．１．５ 幅広・幅狭 (font-stretch)

font-stretch:属性値

記述例

３．１．６ スモールキャップ (font-variant)

font-variant:属性値

記述例

３．１．７ フォント (font)

font:属性値

記述例

３．１．８ サイズアジャスト (font-size-adjust)

font-size-adjust:属性値

記述例

３．１．９ 太字や斜体文字の生成 (font-synthesis)

font-synthesis:属性値

記述例

３．１．１０ カーニング (font-kerning)

font-kerning:属性値

記述例

３．１．１１ 数字の表記 (font-variant-numeric)

font-variant-numeric:属性値

記述例

記述例

３．１．１２ 大文字・小文字などの表示 (font-variant-caps)

font-variant-caps:属性値

記述例

３．１．１３ 合字の制御 (font-variant-ligatures)

font-variant-ligatures:属性値

記述例

３．１．１４ 上付き文字、下付き文字の制御 (font-variant-position)

font-variant-position:属性値

記述例

３．１．１５ 漢字の違いの制御 (font-variant-east-asian)

font-variant-east-asian:属性値

記述例

３．１．１６ 言語の制御 (font-language-override)

font-language-override:属性値

記述例

３．１．１７ テキスト描画の最適化 (font-optical-sizing)

font-optical-sizing:属性値

記述例

３．１．１８ バリアブルフォントの設定 (font-variation-settings)

font-variation-settings:属性値

記述例

３．１．１９ カラーパレットの設定 (font-palette)

font-palette:属性値

記述例

３．２ テキスト

３．２．１ インデント (text-indent)

text-indent:属性値

記述例

３．２．２ 行揃え (text-align)

text-align:属性値

記述例

３．２．３ 均等割付 (text-justify)

text-justify:属性値

記述例

３．２．４ 縦位置 (vertical-align)

vertical-align:属性値

記述例

３．２．５ 大文字・小文字 (text-transform)

text-transform:属性値

記述例

３．２．６ 改行・空白 (white-space)

white-space:属性値

記述例

３．２．７ 行の高さ (line-height)

３　テキスト

３．１　　フォント

３．１．１種類　(font-family)

３．１．２スタイル　(font-style)

３．１．３太さ　(font-weight)

３．１．４サイズ　(font-size)

３．１．５幅広・幅狭　(font-stretch)

３．１．６スモールキャップ　(font-variant)

３．１．７フォント　(font)

３．１．８サイズアジャスト　(font-size-adjust)

３．１．９太字や斜体文字の生成　(font-synthesis)

３．１．１０カーニング　(font-kerning)

３．１．１１数字の表記　(font-variant-numeric)

３．１．１２大文字・小文字などの表示　(font-variant-caps)

３．１．１３合字の制御　(font-variant-ligatures)

３．１．１４上付き文字、下付き文字の制御　(font-variant-position)

３．１．１５漢字の違いの制御　(font-variant-east-asian)

３．１．１６言語の制御　(font-language-override)

３．１．１７テキスト描画の最適化　(font-optical-sizing)

３．１．１８バリアブルフォントの設定　(font-variation-settings)

３．１．１９カラーパレットの設定　(font-palette)

３．２　　テキスト

３．２．１インデント　(text-indent)

３．２．２行揃え　(text-align)

３．２．３均等割付　(text-justify)

３．２．４縦位置　(vertical-align)

３．２．５大文字・小文字　(text-transform)

３．２．６改行・空白　(white-space)

３．２．７行の高さ　(line-height)

３．２．８折り返し　(word-break)

３．２．９単語の間隔　(word-spacing)

３．２．１０文字の間隔　(letter-spacing)

３．３　　テキスト修飾

３．３．１装飾　(text-decoration)

text-decoration:線の位置線種色

３．３．２下線の表示位置　(text-underline-position)

３．３．３テキストの影　(text-shadow)

３．４　　文書方向

３．４．１縦書き　(writing-mode)

３．４．２文章の方向　(direction)

３．４．３文字表記の方向　(unicode-bidi)

３．５　　ルビ

３．５．１行揃え　(ruby-align)

３．５．２表示領域　(ruby-overhang)

３．５．３表示位置　(ruby-position)

３．６　　コンテント作成

３．６．１引用符　(quotes)

３．６．２コンテンツ　(content)

３．６．３カウンタのリセット　(counter-reset)

３．６．４カウンタの進行　(counter-increment)