CSS基礎　テキストの文字間や行間、均等割左寄せ右寄せなどを指定する方法

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きく変えるひとつの要素です。そんな気遣いができるかできないかで（使うか使わないかの選択含む）良い制作者かそうでないかが決まってくるような気もします。ちょっと前置きが長くなってしまいましたが以下実装方法です。

行間の設定


.demo{line-height:2em;}

この場合行間は2文字分の長さに相当します。この他にもemを除いた指定やpxによる指定等が可能です。

行間の例

【2em】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

【4em】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

【20px】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

文字間の設定


.demo{letter-spacing: 1em;}

この場合文字間は1文字分の長さに相当します。この他にもemを除いた指定やpxによる指定等が可能です。

文字間の例

【1em】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

【1px】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

【2px】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

行揃え

左寄せ

.demo{text-align:left;}

【2px】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

右寄せ

.demo{text-align:right;}

【2px】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

左寄せ

.demo{text-align:center;}

【2px】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

均等

.demo{text-align:justify;}

【2px】サンプル:どうもこんにちは。今回のtipsは【CSS基礎　テキストの文字間や行間を変更する方法】です。ライト内容ですが、テキスト周りの細かい気遣いがデザインの印象を大きくかえる要素では有ります。

以上になります。