テキストの詳細設定

テキストの読みやすさをもっと調整したいんだけど...

teacher avatar

テキストの詳細設定を使えば、行の高さや文字間隔を細かく調整できるよ!


読みやすさが格段に向上するんだ。

行の高さの設定

行と行の間隔を調整したいんだけど...

teacher avatar

行の高さを調整すれば、読みやすくなるよ!


右パネルの「行間」セクション(赤枠の部分)で設定できるんだ。

行の高さ設定画面

行の高さって、具体的に何を調整するの?

teacher avatar

行の高さは、1行分の高さのことだよ。


テキストの上下の余白を含めた、行全体の高さなんだ。

どんな単位で設定するの?

teacher avatar

行の高さは %(パーセント) で指定するよ。


フォントサイズに対する割合で設定するんだ。

どのくらいの値がいいの?

teacher avatar

一般的な目安を紹介するね:

用途推奨値
見出し120% 〜 130%(少し狭め)
本文150% 〜 180%(読みやすさ重視)
短い文130% 〜 150%
長い文160% 〜 180%

行の高さの例

teacher avatar

行の高さが狭すぎると窮屈で、広すぎるとバラバラに見えるよ。


ちょうどいいバランスを見つけることが大切なんだ。

文字間隔の設定

文字と文字の間隔も調整できるの?

teacher avatar

もちろん!文字間隔を調整することで、テキストの印象が変わるよ。


右パネルの「字間」セクション(赤枠の部分)で設定できるんだ。

文字間隔設定画面

teacher avatar

文字間隔は em で指定するよ。


フォントサイズに対する相対的な値なんだ:

効果
0emデフォルト(標準の間隔)
正の値(0.05em など)文字が広がる
負の値(-0.02em など)文字が詰まる

文字間隔の例

どんな時に使うの?

teacher avatar

用途によって使い分けるといいよ:

用途推奨値効果
見出し0.05em 〜 0.1em高級感を演出
本文0em標準の読みやすさ
ロゴ-0.02emコンパクトに
大文字0.1em 〜 0.2em可読性向上
teacher avatar

ただし、調整しすぎると読みにくくなるから注意してね!


微調整がポイントだよ。

縦書きの設定

日本語を縦書きにすることってできる?

teacher avatar

もちろん!縦書きに切り替えることができるよ。


右パネルの「字向き」(赤枠の部分)で設定するんだ。

縦書き設定画面

teacher avatar

字向きには3つの選択肢があるよ:

モード書き方向
横書き左から右へ(デフォルト)
縦書き上から下へ、右から左へ
縦書き(左から右)上から下へ、左から右へ

縦書きの例

どんな時に使うの?

teacher avatar

縦書きは、日本の伝統的な文化や、


和風のデザインでよく使われるよ:


  • 和食レストランのサイト

  • お寺や神社の案内

  • 書道や茶道の紹介

  • 小説や詩の引用
teacher avatar

ただし、縦書きは欧文(アルファベット)との相性があまり良くないから、


日本語メインのコンテンツで使うのがおすすめだよ。

teacher avatar

詳細設定をマスターすれば、プロレベルの読みやすいテキストが作れるよ!


次は、テキストの色と装飾について学んでいこう。