CSSにできること―文章編

CSSにできること第二弾。今回は文章レイアウト編です。
前作：CSSにできること―文字（フォント）編

文章レイアウトに関することは、フォント系に比べてCSSにしかできない事が多いと思います。

１．文字同士の間隔を変更

word-spacingというプロパティでは、word、つまり単語同士の間隔を調整できる。英文では単語同士を（半角）スペースで区切るため、この半角スペースの幅を調整する機能と言ってもいいと思う。日本語では単語同士をスペースで区切ることがないので、効果はない。が、日本語でも、単語同士をスペースで区切ればword-spacingが機能する。

また、文字間を調整するletter-spacingというものもある。これは、英単語1文字、漢字1文字など、文字間を調整できる。

さらにフォント編でも述べたline-heightプロパティでは、行間の調整をすることができます。

２．文章のインデント（字下げ）

書籍では、段落の一番最初に1文字分マスが空き、そのあとに文章が続いていきます。この文章のように字下げを行うには、text-indentというプロパティを使用します。text-indentで指定した分だけ字下げされて文章が表示されます。

３．文章の配置

HTMLでは、align属性あたりで指定をしていた、文章の右寄せ、左寄せ、中央寄せの指定は、CSSではtext-alignで指定できる。値もHTMLとほぼ同じで、left、right、centerが指定できます。

 

４．文章の装飾

text-decorationというプロパティでは、テキストに関する装飾を指定できる。HTMLではuタグで指定していたアンダーライン、sタグで指定していた取り消し線などが指定できるようになっています。
ちなみに、この取り消し線を装飾ではなく、文章構造的な意味として「訂正前のもの」といったことを示したい場合は、CSSではなく、HTMLのdelタグを使ってください。

デフォルトスタイルシートでは、aタグに下線が表示されていますが、test-decorationの値にnoneを指定すると、下線を消すこともできます。

文章編は以上です。
次回は背景編です。