2005年6月30日
行間を広げるには
今回は、「行間の指定方法」について説明します。
行間を広げることによって、非常に読みやすくなりますので、是非、適切な行間を空けるようにカスタマイズしましょう。
行間(行の高さ)を指定するには、line-height というプロパティを使用します。
<スタイルシートの記述例>
上記の場合、行間は「line-height: 150%;」と指定されています。この「150%」という記述を変更することで、行間を変更することができます。
行間の指定方法には、「15pt」のように絶対サイズで指定する方法、 「150%」のように相対サイズで指定する方法、「1.5」のように数値のみで指定する方法があります。
■ 絶対サイズで指定
文字サイズが 10pt のときに、行の高さを 15pt に指定すると、行間は 5pt になります。
(行間 = 行の高さ - 文字サイズ)
■ 相対サイズで指定
文字サイズが 10pt のときに、行の高さを 150% (文字サイズ×1.5倍)に指定すると、行間は 5pt になります。
(行間 = 行の高さ - 文字サイズ)
■ 数値のみ(単位なし)で指定
文字サイズが 10pt のときに、行の高さを 1.5 (文字サイズ×1.5倍)に指定すると、行間は 5pt になります。
(行間 = 行の高さ - 文字サイズ)
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
では、行間のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。
以上、「行間の指定方法」について説明しました。
是非、参考にして、読みやすい行間にカスタマイズしてください。
[次の講義へ] → スペースで文字間隔を調節してはいけない理由
参考になりましたら、1クリックの応援お願いします。
行間を広げることによって、非常に読みやすくなりますので、是非、適切な行間を空けるようにカスタマイズしましょう。
行間(行の高さ)の指定:line-height
行間(行の高さ)を指定するには、line-height というプロパティを使用します。
<スタイルシートの記述例>
| .content p { line-height: 150%; } |
上記の場合、行間は「line-height: 150%;」と指定されています。この「150%」という記述を変更することで、行間を変更することができます。
行間(行の高さ)の指定方法
行間の指定方法には、「15pt」のように絶対サイズで指定する方法、 「150%」のように相対サイズで指定する方法、「1.5」のように数値のみで指定する方法があります。
■ 絶対サイズで指定
| line-height: 15pt; |
文字サイズが 10pt のときに、行の高さを 15pt に指定すると、行間は 5pt になります。
(行間 = 行の高さ - 文字サイズ)
■ 相対サイズで指定
| line-height: 150%; |
文字サイズが 10pt のときに、行の高さを 150% (文字サイズ×1.5倍)に指定すると、行間は 5pt になります。
(行間 = 行の高さ - 文字サイズ)
■ 数値のみ(単位なし)で指定
| line-height: 1.5; |
文字サイズが 10pt のときに、行の高さを 1.5 (文字サイズ×1.5倍)に指定すると、行間は 5pt になります。
(行間 = 行の高さ - 文字サイズ)
絶対サイズ・相対サイズの単位
絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。
| 絶対サイズ | 意味 |
| in | インチ。1in = 25.4mm |
| cm | センチメートル |
| mm | ミリメートル |
| pt | ポイント。1pt = 1/72in |
| pc | パイカ。1pc = 12pt |
| px | ピクセル。表示上の1ドット幅 (※正確にはデバイス依存の相対サイズ) |
| 相対サイズ | 意味 |
| em | 基準書体の文字の高さ (英字の「M」の高さを基準とした大きさ) |
| ex | 基準書体の文字の高さ (英字の「x」の高さを基準とした大きさ) |
| % | 基準書体のサイズに対する百分率 |
ブログ別!カスタマイズ方法
では、行間のカスタマイズ方法について、ブログ別に説明します。カスタマイズをする場合は、利用しているブログを選択してくださいね。
| [MovableType] | → 行間の変更 |
| [livdoor Blog] | → 行間の変更(livedoorBlog編) |
| [FC2 ブログ] | → 行間の変更(FC2ブログ編) |
以上、「行間の指定方法」について説明しました。
是非、参考にして、読みやすい行間にカスタマイズしてください。
[次の講義へ] → スペースで文字間隔を調節してはいけない理由
参考になりましたら、1クリックの応援お願いします。
パーマリンク | 投稿者 りっち | 2005年6月30日 20:04
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
関連記事
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
