Posted at

CSS3のフォントやテキストに関するプロパティ、こんなのあったんだ

More than 1 year has passed since last update.

html5の試験勉強をしつつ、自分の知らなかったプロパティを忘備録としてまとめていきます。


日本語にあんまり関係なさそう系


スモール・キャピタル

そもそもスモール・キャピタルというものを知らなかった。

アルファベット系の言語を選んだ時に、全部の文字を大文字にして、サイズだけ本文の中で小さくするものだとか。

プロパティ
設定

font-variant
同フォントファミリーのスモール・キャピタルを選択
normal(初期値)
small-caps

例 文頭のYだけ大文字。

image.png


アルファベットの大文字・小文字変換

これは知りませんでした。

文章全体を大文字にするか、小文字にするか、頭文字のみ大文字にするかを指定できます。初期値はnoneで入力された状態のまま表示します。

プロパティ
設定

text-transform
半角アルファベットの大文字・小文字を変換する
uppercase
lowercase
capitalize
none(初期値)

none(初期値)

image.png

uppercase

image.png

lowercase

image.png

capitalize

image.png


英単語折り返し・ハイフネーション

行の折り返しに関するプロパティ。

英語系など単語ごとに区切りがあるものに関わってくるもの。

プロパティ
設定

word-break
行の折り返しをどこでするか
break-all
keep-all
normal(初期値)

hyphens
ハイフネーションの設定
manual(初期値)
none
auto


spacing系

letter-spacingは知っていましたが、word-spacingは知らなかった。

単語ごとの間隔も設定できるんですね。

プロパティ
設定

letter-spacing
文字間隔を設定
normal(初期値)
数値+単位

word-spacing
単語単位の間隔を設定
normal(初期値)
数値+単位


文字表記方向系

文字をどちら側から表示するか、unicodeに準ずるのか設定します。

left to right(左から右へ)もしくはright to leftを設定できます。

プロパティ
設定

direction
文字表記の方向を指定
ltr(初期値)
rtl

unicode-bidi
文字表記の方向をUNICODEから組み込むかどうか
normal(初期値)
embed
bidi-override


所感とか

日本語に関係ないアルファベット制御系が割と漏れている感じがありますね。

表示方向や大文字小文字に関しては忘れないようにしておきたいところです。


参考書籍

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集(マイナビ)』