段落やテーブルセルの内容を、次に述べるプロパティを使用して自由に配置できます。これらのプロパティは、高さや幅が特定されたり計算された要素すべてに適用できます。
最初の行をインデントする
まずはtext-indentプロパティから始めましょう。これにより、段落の最初の行がどのようにインデントされるかを指定できます。左に「アウト」することも可能です。そのためには、負のtext-indent値を使用する必要があります。詳しい情報は後で説明します。数値が必要です。
例：
.absatz { text-indent: 2em; }
ブラウザでは次のように表示されます：
負の値を使用すると、最初のテキスト行が外に押し出されます。
.absatz {
text-indent: -2em;
}
ここでもブラウザでの結果を見てみましょう：
こうしたことも可能です。ただし、外部配置を定義する際に、内容がまだ読めるように注意してください。実際、text-indentはSEOとも関連することがあります。たとえば、グラフィックをテキストの代わりに表示したい場合があります。
ただし、検索エンジンでテキストを利用できるようにする必要がある場合、ジレンマに直面します。このジレンマはtext-indentの使用によって解決できます。なぜなら、このプロパティを使用すると、テキストを移動できるからです。つまり、テキストを訪問者の視野から外形することができます。
text-indentバリエーションの利点：グラフィックで置き換えるテキストはソースコードに変更されません。
<h1>PSD-Tutorials.de</h1>
...
h1 {
background: url(logo.png) 0 0 no-repeat;
text-indent: -99999px;
height:200px;
}
この構文では、h1要素に背景画像が割り当てられます（backgroundプロパティはこの順に紹介されました）。text-indent: -99999pxにより、見出しのテキストが左に99999ピクセル移動します。したがって、テキストは表示されません。実際に表示されるのは画像だけです。
スタイルシートを無効にすると、テキストは通常通りに表示されます。
行の高さを設定する
行の高さについては、以前にfontプロパティを紹介した際にすでに触れています。ここでは、そのトピックについて詳しく説明します。行の高さは、line-heightプロパティで設定できます。数値の指定が可能で、パーセンテージ値も使用できます。パーセンテージ値は、行の高さを指定した要素のフォントサイズに対して適用されます。行の高さを定義する前に、次の点に留意してください：ブラウザ/デバイスによっては、行の高さの指定が他のプロパティよりも優先され、要素が切り取られて表示されることがあります。特にグラフィックの場合に問題が発生します。したがって、ページを公開する前に結果をテストしてください。
次の例は、line-heightの使用方法を示しています。
<p style="line-height:1.4em; font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p> <p style="line-height:2em;font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p> <p style="line-height:1em; font-size:1em;">Manchmal hat man ein tolles Layout erstellt, aber die Fotos fehlen noch, und wenn man nur leere Rahmen verwendet, sieht das Layout dann doch ziemlich nackig aus. Das geht auch besser:<br /> In diesem Video-Training zeige ich euch die besten Webadressen, um schnell an kostenlose passende Bildplatzhalter zu kommen. Eine geniale Liste findet ihr z. B. <a href="http://www.hanselman.com/blog/TheInternetsBestPlaceholderImageSitesForWebDevelopment.aspx" target="_blank" rel="nofollow">hier</a>.</p>
ここで3つのテキストパラグラフが定義され、それぞれ異なる行間が割り当てられました。
行間を変えることで、テキストの読みやすさが大幅に変わることがわかります。そのため、line-heightを慎重に扱ってください。
最終的には、どの行間を選択すべきかという質問が残ります。通常、行間は130%から150%の間で選択されます。
p {
line-height: 150%;
}
読みやすさは、特にフォントのレッテリングに大きく依存します。ここでは、テキスト行が長いほど行間を大きくする必要があります。したがって、読みやすさが確保されていることをテストしなければなりません。
水平テキストの配置
text-alignプロパティを使用することで、テキストパラグラフや他のブロック要素に含まれるテキストやインライン要素の水平配置を指定できます。次の値がtext-alignに設定できます:
• left – 左寄せ
• right – 右寄せ
• center – 中央揃え
• justify – 両端揃え
以下に例を示します:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<h2>PSD-Tutorials.de</h2>
<h3>PSD-Tutorials.de</h3>
</body>
</html>ブラウザでの結果は次のようになります:
text-alignは、テキストコンテンツだけでなく、すべてのインライン要素に適用されることに注意してください。画像を挿入するときも、text-alignの定義はその要素に対して適用されます。
追加情報: 公式CSS仕様によれば、text-alignはブロック要素には影響しないはずです。（ただし、一部のブラウザはブロック要素にも適用します）。ブロック要素を配置したい場合は、すでに紹介したmarginプロパティを使用してください。
