テキストの体裁
テキストの色、大きさ、行間、文字間隔、テキストの配置、縦書き、欧文といった体裁についての CSS には以下があります。
CSS では、テキストとフォントは別に扱われます。文字についてがフォント、複数の文字列でテキストです。
テキストとフォントは概念に明確な違いがありますが、CSS において、その扱いは混じり合っているので複雑に感じるかもしれません。
テキストの色、大きさ、太さ、形
テキストの色や大きさ、太さ、形といった CSS はフォントに分類されます。
テキストの色は color プロパティを使用します。
フォントの大きさ、形、太さは font-size、font-weight、font-style によって指定することもできます。
これらは font プロパティで一括して指定することもできます。
テキストの色 color
テキストの色は color プロパティを使用します。初期の CSS からの慣習でテキストの色だけは color プロパティを使用します。
任意の範囲のテキストの色を指定するには <span> タグなどを使用します。以下は上記の HTML テキストです。
テキストの色について詳しくは color プロパティを参照してください。
テキストの大きさ font-size
テキストの大きさは font-size プロパティまたは font プロパティを使用します。
大きさは相対的なサイズ( medium、xx-small、x-small、small、large、x-large、xx-large、smaller、larger )、絶対的なサイズ( px, em )という指定ができます。
上記の例はフォントサイズを 26px に指定してあります。任意の範囲のテキストの大きさを指定するには <span> タグなどを使用します。
テキストの大きさについて詳しくは font-size プロパティを参照してください。
テキストの太さ、形 font-weight、font-style
テキストの太さは font-weight プロパティを使用します。形は font-style プロパティを使用します。
ただし、font-style プロパティによるフォントの形は標準、イタリック、斜体
といった簡易な形しか選択できません。別の書体を使用するには font-family を使用します。
font-weight
テキストの太さについて font-weight プロパティを参照してください。
font-style
テキストの形について font-style プロパティを参照してください。
他のテキストの形についてはテキストの書体 font-family プロパティを参照してください。
font-size、font-weight、font-style は font プロパティで一括で指定することができます。
書体 font-family
テキストの書体は font-family プロパティによって指定します。
書体とは、独自の様式をもった字体(字の形)で表現されたものです。ここでの書体は同じような特徴をもった字体の集合のことも指します。
上記の例は分かりやすいように文字を大きくしています。
以下は等幅フォント
に指定しています。金額といった数値にはこのフォントが有用でしょう。
テキストの書体について詳しくは font-family プロパティページを参照してください。
テキストの体裁
行間や文字間隔、字下げ、タブのサイズ、領域からテキストがはみ出る場合の処理といったテキストの体裁について解説します。
行間(間隔)
行間(間隔)を指定するには line-height を使用します。
上記の例はline-height: 3;
に指定してあります。
行間について詳しくは line-height プロパティページを参照してください。
文字間隔
文字間隔、文字ごとの間隔を指定するには letter-spacing を使用します。
上記の例の文字間隔はletter-spacing: 6px;
に指定してあります。
文字間隔について詳しくは letter-spacing プロパティページを参照してください。
文字詰め、自動カーニング機能
文字詰め、自動カーニング機能は文章が自然な手書きに見えるようにします。
ただし、文字詰め、自動カーニングを調整することができる OpenType フォントでなければなりません。
また、文字詰め、自動カーニングを調整するには font-feature-settings を使用します。
上記の例はプロポーショナル字形、font-feature-settings: 'pwid' 1;
に指定してあります。
詳しくは font-feature-settings プロパティページを参照してください。
行頭の字下げ幅
行頭を1字下げるといったことを text-indent 自動で行うことができます。ただし <br> による改行には対応していないことに注意が必要です。
詳しくは text-indent プロパティページを参照してください。
タブのサイズ
タブとは、HTML テキストでは	
やTAB
キーによって作成される空白です。ただし、HTML では <pre> または <code> 中、もしくは white-space:pre; または white-space:pre-wrap; の指定でないとタブとしては表示されません。
そのようなタブのサイズを tab-size プロパティによって調整することができます。
上記の例ではタブのサイズをtab-size:3;
と指定してあります。
HTML ではタブを	
という特殊文字を使用します。テキスト中では\t
ですが編集画面に表示されることがないので分かり難いです。\t
と検索すると認識されていることがわかります。
詳しくは tab-size プロパティページを参照してください。
領域からはみ出る場合の表記
領域にテキストが収まらない場合表示方法を text-overflow プロパティによって非表示
、省略文字の表示
に指定することができます。
ただし、text-overflow プロパティが機能するには、折り返しさせない、はみ出る部分は省略するといった、white-space:nowrap;、overflow:hidden;の設定が必要です。
詳しくは text-overflow プロパティページを参照してください。
改行処理(禁則処理)
日本語や中国語、韓国語においては句読点や記号の改行処理(禁則処理)があります。
日本語や中国語、韓国語の改行処理(禁則処理)とは、句読点(。、)やカッコ("")、小文字(しゃ、しゅ、しょなどの小文字)が行頭や行末にならないようにする処理のことです。
改行処理(禁則処理)を調整するには line-break プロパティを使用します。
詳しくはline-break プロパティ
を参照してください。
テキストの配置
領域内のテキストの位置、左寄せ、中央寄せ、右寄せ、上付き、下付きは text-align や vertical-align によって指定します。
テキストの左寄せ、中央寄せ、右寄せは text-align によって指定します。
テキストの上付き、下付きは vertical-align によって指定します。
vertical-align プロパティ
vertical-align は、テキストの上付き、下付きが指定できます。ただしインラインエレメントである必要があります。
上記の例はvertical-align:50%;
に指定してあります。
詳しくは vertical-align プロパティページを参照してください。
text-align-last プロパティ
text-align-last はテキストの最終行の位置が指定することができるプロパティです。
このプロパティが機能するためには text-align: justify; に指定する必要があります。
上記の例はtext-align-last:right;
に指定してあります。そのために最後の行が右寄せになっています。
詳しくは text-align-last プロパティページを参照してください。
white-space プロパティ
white-space はホワイトスペース(複数の半角スペース、タブ)や改行の表示方法を指定するプロパティです。
デフォルトの HTML では複数の空白文字やタブは1つの空白文字として表示されます。この white-space によって HTML テキストで編集されている複数の空白文字やタブをそのままの形で表示することができます。
上記の例はwhite-space: pre-wrap;
に指定してあります。そのために複数の空白文字やタブはそのままに表示され、改行されます。
詳しくは white-space プロパティページを参照してください。
縦書き
縦書きに表示するには writing-mode プロパティを vertical-rl
または vertical-lr
に指定します。
英数字の向きも縦書きにするには text-orientation プロパティをupright
に指定します。
併せて text-combine-upright プロパティで2桁以上の数値を詰めて表示するようにもできます。
縦書きのテキストの領域内の位置を指定するには direction プロパティを使用します。
上記の例からも欧文の縦書きは上手く表示できない場合があるようです。
詳しくは、writing-mode、text-orientation、text-combine-upright 及び direction プロパティを参照してください。
横書きの記述方向
横書きの記述方法を変更するには、direction と unicode-bidi プロパティを使用します。
direction プロパティは言語に合わせて右寄せ、左寄せを行います。記述の向きも変更するには unicode-bidi プロパティを使用します。
右寄せで右から読む言語の場合はこの2つのプロパティを指定しないと正しく表示されません。
アラビア語を表示したい場合や日本語の旧字での表示には便利な機能です。
記述方向に関してはエレメントの dir 属性で指定する方法もあります。この属性の機能は direction プロパティと同じです。
詳しくは、direction と unicode-bidi プロパティを参照してください。
欧文
欧文でのみ機能するword-spacing、 text-justify、word-break、overflow-wrap、 word-wrap プロパティについて解説します。
word-spacing、text-justify
欧文において文字間隔や単語間を調整するプロパティに、
word-spacing、
text-justify があります。word-spacing は単語間の幅を調整します。
text-justify は text-align:justify; が設定されている場合に機能します。
例えば、word-spacing による単語間の調整は以下のようになります
詳しくは、word-spacing、text-justify プロパティを参照してください。
word-break
デフォルトでは、英単語は領域の幅に収まりきらない英単語があれば改行され、英単語を途中で折り返さないように表示されます。 英単語を途中で折り返して幅いっぱいに表示するには、word-break プロパティを使用します。
詳しくは、word-break プロパティを参照してください。
overflow-wrap、word-wrap
overflow-wrap プロパティは領域の幅に単語が入り切らない場合の表示方法を選択することができます。選択には、そのまま表示、折り返すといったものがあります。
領域幅が単語幅より狭いときに機能します。
word-wrap は overflow-wrap の別名で、 overflow-wrap が公式になっています。
表示領域の幅に入り切らない単語が折り返されていることが分かります。
詳しくは、overflow-wrap、word-wrap プロパティを参照してください。