9.1 プロパティtext-indent
CSSにおける段落のプロパティはテキストのフォーマットを管理する上で重要な役割を果たし、読みやすさと美しさを提供します。その中で、text-indentとtext-align-lastは、段落内のテキストの先頭行のインデントや最後の行の整列を設定するための重要なツールです。
text-indentプロパティは、ブロック要素内のテキストの先頭行のインデントを管理します。これは、段落の冒頭にインデントを作成して、テキストの読みやすさや構造を向上させるためによく使用されます。
値:
- 絶対値: ピクセル(
px)、ポイント(pt)、センチメートル(cm)などの固定単位での値。例えば、text-indent: 20px; - パーセンテージ値: 親ブロックの幅に対するパーセンテージ値。例えば、
text-indent: 5%; - 負の値: インデントを負の値にすることができ、テキストはコンテナの左側に配置されます。例えば、
text-indent: -20px;
使用例:
CSS
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
HTML
<body>
<p class="indent-20px">これは先頭行が20ピクセルのインデントです。</p>
<p class="indent-5percent">これは先頭行がブロック幅の5％のインデントです。</p>
<p class="indent-negative">これは先頭行が負の20ピクセルのインデントです。</p>
</body>
9.2 プロパティtext-align-last
text-align-lastプロパティは、ブロック要素内のテキストの最後の行の整列を管理します。これは、特にテキストが幅に合わせて揃えられているとき(justify)に、段落内で一貫した整列を達成するのに役立ちます。
値:
auto: 最後の行は通常のテキストとして整列されます（デフォルト値）left: 最後の行が左に揃えられますright: 最後の行が右に揃えられますcenter: 最後の行が中央に揃えられますjustify: 最後の行が幅に合わせて他の行と同様に整列されます
使用例:
CSS
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
HTML
<body>
<p class="justify-left">これはテキストが幅に合わせて整列され、最後の行は左に揃えられた段落です。</p>
<p class="justify-right">これはテキストが幅に合わせて整列され、最後の行は右に揃えられた段落です。</p>
<p class="justify-center">これはテキストが幅に合わせて整列され、最後の行は中央に揃えられた段落です。</p>
<p class="justify-justify">これはテキストと最後の行が幅に合わせて整列された段落です。</p>
</body>
9.3 プロパティの共同使用
text-indentとtext-align-lastプロパティは、段落のより複雑なフォーマットを作成し、テキストの読みやすさと視覚的な構造を向上させるために一緒に使用することができます。
HTMLとCSSの例:
CSS
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
HTML
<body>
<p class="styled-paragraph">
この段落は、先頭行が30ピクセルのインデントで、テキストが幅に合わせて整列され、最後の行が右に揃えられています。
これは、text-indentとtext-align-lastを使用して所望のフォーマット効果を達成するデモです。
</p>
</body>
コードの説明:
text-indent: 30px;: テキストの先頭行を30ピクセルにインデントするtext-align: justify;: テキストをコンテナの幅に合わせて整列するtext-align-last: right;: テキストの最後の行を右に揃えるwidth: 300px;: テキストコンテナの幅を設定するborder: 1px solid #000;: テキストコンテナの周囲に境界線を追加するpadding: 10px;: コンテナ内部にパディングを設定する
GO TO FULL VERSION