やさしいホームページ入門
カラーコード / サイトについて / リンク集 / お問い合わせ
ホーム > CSS入門 > テキスト関係の指定方法
文章の一行目をインデントする
text-indentプロパティで文章の一行目のインデントを指定することができます。値には単位の付いた数値を指定します。
<p style="text-indent : 1em">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</p>
-表示結果-

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん

テキストの位置を指定する
text-alignプロパティでテキストの位置を指定することができます。値にはleft  center  right  justifyのどれかを指定することができます。値をjustifyにした場合、均等に割り付けて表示します。
<div style="text-align : left">left</div>
<div style="text-align : center">center</div>
<div style="text-align : right">right</div>
<div style="text-align : justify">justify</div>
-表示結果-
left
center
right
justify
文字間隔を指定する
letter-spacingプロパティで文字の間隔を指定することができます。このプロパティを使うことによって、文章を読みやすくすることができます。値には単位の付いた数値を指定します。
<p style="letter-spacing : 30px;">あいうえおかきくけこ</p>
-表示結果-

あいうえおかきくけこ

単語間隔を指定する
word-spacingプロパティで単語(英語の)の間隔を指定することができます。日本語の場合は、指定しても適応されません。値には文字間隔と同じで、単位の付いた数値を指定します。
<p style="word-spacing : 30px">I am ten years old.</p>
-表示結果-

I am ten years old.

行間を指定する
line-heightプロパティで文章の行間のサイズを指定することができます。値には、数値つきの単位や割合指定(%)などを指定します。
<p style="line-height : 4em">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</p>
-表示結果-

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほま
みむめもやゆよらりるれろわをん

テキストの空白を指定する
white-spaceプロパティでテキストの空白をどのようにするかを指定できます。値にはnormal  nowrap  preのどれかを指定します。
normalは何も指定しないことと同じで、nowrapは自動で改行を行わない、preはHTMLタグのpre要素と同じようになります。