備忘録的プログラミングリファレンス

テキストの体裁

 テキストの色、大きさ、行間、文字間隔、テキストの配置、縦書き、欧文といった体裁についての CSS には以下があります。

 CSS では、テキストとフォントは別に扱われます。文字についてがフォント、複数の文字列でテキストです。
 テキストとフォントは概念に明確な違いがありますが、CSS において、その扱いは混じり合っているので複雑に感じるかもしれません。

テキストの色、大きさ、太さ、形

 テキストの色や大きさ、太さ、形といった CSS はフォントに分類されます。

 テキストの色は color プロパティを使用します。

 フォントの大きさ、形、太さは font-sizefont-weightfont-style によって指定することもできます。
 これらは font プロパティで一括して指定することもできます。

テキストの色 color

 テキストの色は color プロパティを使用します。初期の CSS からの慣習でテキストの色だけは color プロパティを使用します。

テキストの色

テキストの色は color プロパティを使用します。

 任意の範囲のテキストの色を指定するには <span> タグなどを使用します。以下は上記の HTML テキストです。

<p style="color: darkgreen;">テキストの色は <span style="color: red;">color プロパティ</span>を使用します。</p>

 テキストの色について詳しくは color プロパティを参照してください。

テキストの大きさ font-size

 テキストの大きさは font-size プロパティまたは font プロパティを使用します。

 大きさは相対的なサイズ( medium、xx-small、x-small、small、large、x-large、xx-large、smaller、larger )、絶対的なサイズ( px, em )という指定ができます。

テキストの大きさ

テキストの大きさは font-size プロパティを使用します。

 上記の例はフォントサイズを 26px に指定してあります。任意の範囲のテキストの大きさを指定するには <span> タグなどを使用します。

 テキストの大きさについて詳しくは font-size プロパティを参照してください。

テキストの太さ、形 font-weight、font-style

 テキストの太さは font-weight プロパティを使用します。形は font-style プロパティを使用します。
 ただし、font-style プロパティによるフォントの形は標準、イタリック、斜体といった簡易な形しか選択できません。別の書体を使用するには font-family を使用します。

font-weight

テキストの太さ font-weight

テキストの太さは font-weight プロパティを使用します。

 テキストの太さについて font-weight プロパティを参照してください。

font-style

テキストの形 font-style

テキストの形は font-style プロパティを使用します。ただし、選択できるのは標準、イタリック、斜体のみです。

 テキストの形について font-style プロパティを参照してください。
 他のテキストの形についてはテキストの書体 font-family プロパティを参照してください。

 font-sizefont-weightfont-stylefont プロパティで一括で指定することができます。

書体 font-family

 テキストの書体は font-family プロパティによって指定します。
 書体とは、独自の様式をもった字体(字の形)で表現されたものです。ここでの書体は同じような特徴をもった字体の集合のことも指します。

font-family による明朝体の指定

このテキストは明朝体に指定してあります。

 上記の例は分かりやすいように文字を大きくしています。

 以下は等幅フォントに指定しています。金額といった数値にはこのフォントが有用でしょう。

等幅フォント

このテキストは等幅フォントに指定してあります。

 テキストの書体について詳しくは font-family プロパティページを参照してください。

テキストの体裁

 行間や文字間隔、字下げ、タブのサイズ、領域からテキストがはみ出る場合の処理といったテキストの体裁について解説します。

行間(間隔)

 行間(間隔)を指定するには line-height を使用します。

line-height

この段落は line-height プロパティによって行ごとの間隔を指定しています。
このプロパティは行ごとの間隔を指定できます。

 上記の例はline-height: 3;に指定してあります。

 行間について詳しくは line-height プロパティページを参照してください。

文字間隔

 文字間隔、文字ごとの間隔を指定するには letter-spacing を使用します。

letter-spacing

このテキストは letter-spacing プロパティによって文字ごとの間隔を指定しています。

 上記の例の文字間隔はletter-spacing: 6px;に指定してあります。

 文字間隔について詳しくは letter-spacing プロパティページを参照してください。

文字詰め、自動カーニング機能

 文字詰め、自動カーニング機能は文章が自然な手書きに見えるようにします。
 ただし、文字詰め、自動カーニングを調整することができる OpenType フォントでなければなりません。

 また、文字詰め、自動カーニングを調整するには font-feature-settings を使用します。

font-feature-settings

このテキストは OpenType フォントに指定してあり、font-feature-settings プロパティによって文字詰め、自動カーニングを調整しています。

 上記の例はプロポーショナル字形、font-feature-settings: 'pwid' 1;に指定してあります。

 詳しくは font-feature-settings プロパティページを参照してください。

行頭の字下げ幅

 行頭を1字下げるといったことを text-indent 自動で行うことができます。ただし <br> による改行には対応していないことに注意が必要です。

text-indent

行頭の字下げを自動で行うことができます。

ただし、<br> による改行には対応していていません。例えば以下は <br> によって改行していますが字下げが行われません。
この行は <br> によって改行されています。

<p> といった改行のあるエレメントでは有効です。

 詳しくは text-indent プロパティページを参照してください。

タブのサイズ

 タブとは、HTML テキストでは&#009;TABキーによって作成される空白です。ただし、HTML では <pre> または <code> 中、もしくは white-space:pre; または white-space:pre-wrap; の指定でないとタブとしては表示されません。

 そのようなタブのサイズを tab-size プロパティによって調整することができます。

tab-size
	HTML では、タブは&#009;TABキーによって表示されます。
	ただし、<pre> または <code> エレメント内でないとタブとして表示されません。
	それ以外のタグエレメントではタブとしてではなく、空白として表示されます。
	HTML ソースのデータ中に\tがあるとタブとして認識しています。

 上記の例ではタブのサイズをtab-size:3;と指定してあります。

 HTML ではタブを&#009;という特殊文字を使用します。テキスト中では\tですが編集画面に表示されることがないので分かり難いです。\tと検索すると認識されていることがわかります。

 詳しくは tab-size プロパティページを参照してください。

領域からはみ出る場合の表記

 領域にテキストが収まらない場合表示方法を text-overflow プロパティによって非表示省略文字の表示に指定することができます。
 ただし、text-overflow プロパティが機能するには、折り返しさせない、はみ出る部分は省略するといった、white-space:nowrap;overflow:hidden;の設定が必要です。

text-overflow

text-overflowの例です。はみ出る部分を非表示、省略記号"…"に代替、文字列"-"に置き換えが指定できます。

 詳しくは text-overflow プロパティページを参照してください。

改行処理(禁則処理)

 日本語や中国語、韓国語においては句読点や記号の改行処理(禁則処理)があります。

 日本語や中国語、韓国語の改行処理(禁則処理)とは、句読点(。、)やカッコ("")、小文字(しゃ、しゅ、しょなどの小文字)が行頭や行末にならないようにする処理のことです。

 改行処理(禁則処理)を調整するには line-break プロパティを使用します。

line-break プロパティ
<p style="line-break:strict;">日本語や中国語、韓国語の改行処理(禁則処理)とは、句読点(。、)やカッコ()、小文字(しゃ、しゅ、しょなどの小文字)が行頭や行末にならないようにする処理のことです。
<br /> line-break プロパティによって、文章の読み易さや美観を調整することができます。</p>
表示例

日本語や中国語、韓国語の改行処理(禁則処理)とは、句読点(。、)やカッコ("")、小文字(しゃ、しゅ、しょなどの小文字)が行頭や行末にならないようにする処理のことです。
 line-break プロパティによって、文章の読み易さや美観を調整することができます。

 詳しくはline-break プロパティを参照してください。

テキストの配置

 領域内のテキストの位置、左寄せ、中央寄せ、右寄せ、上付き、下付きは text-alignvertical-align によって指定します。

 テキストの左寄せ、中央寄せ、右寄せは text-align によって指定します。
 テキストの上付き、下付きは vertical-align によって指定します。

text-align プロパティ

text-align

このテキストはtext-align:right;によって右寄せにしています。

 上記の例はtext-align:right;に指定してあります。

 詳しくは text-align プロパティページを参照してください。

vertical-align プロパティ

 vertical-align は、テキストの上付き、下付きが指定できます。ただしインラインエレメントである必要があります。

vertical-align

このテキストはvertical-align:50%;によって上付きにしています。

 上記の例はvertical-align:50%;に指定してあります。

 詳しくは vertical-align プロパティページを参照してください。

text-align-last プロパティ

 text-align-last はテキストの最終行の位置が指定することができるプロパティです。

 このプロパティが機能するためには text-align: justify; に指定する必要があります。

text-align-last

text-align-lastの例です。最後として表示される行のテキストが指定値に表示されます。

このプロパティは継承されるために、すべての子エレメントの最後の行に適用されます。 もし、段落に関係なくエレメント中の最後の行だけに適用したい場合は、擬似クラス:last-childを使って最後のエレメントに text-align-last プロパティを指定します。

 上記の例はtext-align-last:right;に指定してあります。そのために最後の行が右寄せになっています。

 詳しくは text-align-last プロパティページを参照してください。

white-space プロパティ

 white-space はホワイトスペース(複数の半角スペース、タブ)や改行の表示方法を指定するプロパティです。

 デフォルトの HTML では複数の空白文字やタブは1つの空白文字として表示されます。この white-space によって HTML テキストで編集されている複数の空白文字やタブをそのままの形で表示することができます。

white-space

nowrap値
自動での折り返しなし、 改行を半角スペースに置き換え、 連続スペースも1つのスペースに置き換え

 上記の例はwhite-space: pre-wrap;に指定してあります。そのために複数の空白文字やタブはそのままに表示され、改行されます。

 詳しくは white-space プロパティページを参照してください。

縦書き

 縦書きに表示するには writing-mode プロパティを vertical-rl または vertical-lr に指定します。
 英数字の向きも縦書きにするには text-orientation プロパティをuprightに指定します。 併せて text-combine-upright プロパティで2桁以上の数値を詰めて表示するようにもできます。

縦書き

縦書きの表示例です。writing-mode:vertical-rl;に指定することで右から縦書きを指定します。英数値は text-orientation によって縦書きにします。
 数値を text-combine-upright プロパティによって詰めて表示することができます。

数値例 : 20221129

 縦書きのテキストの領域内の位置を指定するには direction プロパティを使用します。

 上記の例からも欧文の縦書きは上手く表示できない場合があるようです。

 詳しくは、writing-modetext-orientationtext-combine-upright 及び direction プロパティを参照してください。

横書きの記述方向

 横書きの記述方法を変更するには、directionunicode-bidi プロパティを使用します。

 direction プロパティは言語に合わせて右寄せ、左寄せを行います。記述の向きも変更するには unicode-bidi プロパティを使用します。
 右寄せで右から読む言語の場合はこの2つのプロパティを指定しないと正しく表示されません。

unicode-bidi プロパティ(右寄せ)
direction: rtl;
unicode-bidi: bidi-override;
表示例

この文章は右寄せで、単語の記述方向も右からに指定しています。

 アラビア語を表示したい場合や日本語の旧字での表示には便利な機能です。

 記述方向に関してはエレメントの dir 属性で指定する方法もあります。この属性の機能は direction プロパティと同じです。

 詳しくは、directionunicode-bidi プロパティを参照してください。

欧文

 欧文でのみ機能するword-spacingtext-justifyword-breakoverflow-wrapword-wrap プロパティについて解説します。

word-spacing、text-justify

 欧文において文字間隔や単語間を調整するプロパティに、 word-spacingtext-justify があります。word-spacing は単語間の幅を調整します。
 text-justifytext-align:justify; が設定されている場合に機能します。

 例えば、word-spacing による単語間の調整は以下のようになります

word-spacing なし

Mr. Phileas Fogg lived, in 1872, at No. 7, Saville Row, Burlington Gardens, the house in which Sheridan died in 1814. He was one of the most noticeable members of the Reform Club, though he seemed always to avoid attracting attention; an enigmatical personage, about whom little was known, except that he was a polished man of the world. People said that he resembled Byron—at least that his head was Byronic; but he was a bearded, tranquil Byron, who might live on a thousand years without growing old.

word-spacing:0.3em; に指定

Mr. Phileas Fogg lived, in 1872, at No. 7, Saville Row, Burlington Gardens, the house in which Sheridan died in 1814. He was one of the most noticeable members of the Reform Club, though he seemed always to avoid attracting attention; an enigmatical personage, about whom little was known, except that he was a polished man of the world. People said that he resembled Byron—at least that his head was Byronic; but he was a bearded, tranquil Byron, who might live on a thousand years without growing old.

 詳しくは、word-spacingtext-justify プロパティを参照してください。

word-break

 デフォルトでは、英単語は領域の幅に収まりきらない英単語があれば改行され、英単語を途中で折り返さないように表示されます。 英単語を途中で折り返して幅いっぱいに表示するには、word-break プロパティを使用します。

word-break:break-all;

Mr. Phileas Fogg lived, in 1872, at No. 7, Saville Row, Burlington Gardens, the house in which Sheridan died in 1814. He was one of the most noticeable members of the Reform Club, though he seemed always to avoid attracting attention; an enigmatical personage, about whom little was known, except that he was a polished man of the world. People said that he resembled Byron—at least that his head was Byronic; but he was a bearded, tranquil Byron, who might live on a thousand years without growing old.

 詳しくは、word-break プロパティを参照してください。

overflow-wrap、word-wrap

 overflow-wrap プロパティは領域の幅に単語が入り切らない場合の表示方法を選択することができます。選択には、そのまま表示、折り返すといったものがあります。
 領域幅が単語幅より狭いときに機能します。
 word-wrapoverflow-wrap の別名で、 overflow-wrap が公式になっています。

overflow-wrap:break-word;

Mr. Phileas Fogg lived..

 表示領域の幅に入り切らない単語が折り返されていることが分かります。

 詳しくは、overflow-wrapword-wrap プロパティを参照してください。