- HOME
- ホームページ作成講座
- 段落のスタイル設定
このページでは主に段落に関連したスタイル設定について見ていきます。
文字揃えの設定
文字揃えを指定するには、プロパティと値を以下のように記述します。
- text-align : left/center/right/justify
- 値にleftを指定すると、左寄せになります。
- 値にcenterを指定すると、中央揃えになります。
- 値にrightを指定すると、右寄せになります。
- 値にjustifyを指定すると両端揃えになります。
（サンプル）
<style>
h1{
text-align : center; //中央揃えにする
}
p#date{
text-align : right; //右寄せにする
}
</style>
<h1>文字揃え</h1>
<p id="date">更新日：○○年△△月◇◇日</p>
＜表示結果＞
字下げの設定
段落の字下げの幅を指定するには、プロパティと値を以下のように記述します。
- text-indent : 数値
- 値には字下げする幅を指定します。1emを指定すると1文字分字下げになります。
- 値にはマイナス数値も指定できます。
（サンプル）
<style>
p{
text-indent : 1em; //1文字分字下げする
}
</style>
<p>段落の頭を字下げするにはtext-indentを用います。
値には字下げする幅を指定します。
マイナス数値を指定することもできます。</p>
＜表示結果＞
文字間の幅の設定
文字の間隔を指定するには、プロパティと値を以下のように記述します。
- letter-spacing : 数値
- 値には文字間の幅を指定します。
- 値にnormalを指定すると、通常の幅になります。
（サンプル）
<style>
p{
letter-spacing : 0.2em; //文字間隔を0.2文字分空ける
}
p.nml{
letter-spacing : normal; // 文字間隔を通常に戻す
}
</style>
<p>文字と文字の間隔を指定するにはletter-spacingを用います。</p>
<p class="nml">値にnormalを指定すると、通常の幅になります。</p>
＜表示結果＞
行の高さの設定
行の高さを指定するには、プロパティと値を以下のように記述します。
- line-height : 数値
- 値には行間の幅を指定します。
- 1.5のように単位を付けないと、フォントサイズに掛け算した行間になります。
（サンプル）
<style>
p{
line-height : 150%; //行間を1.5倍にする（単位有り）
}
p.nounit{
line-height : 1.5; //行間を1.5倍にする（単位無し）
}
span{
font-size:300%; //文字サイズを300%にする
}
</style>
<p>行の高さを指定するには、line-heightを用います。値には行間の幅を指定します。
単位を付けた場合、一部大きな<span>フォント</span>を使うと重なってしまうことがあります。</p>
<hr>
<p class="nounit">単位を付けないと、フォントサイズに掛け算した数値が行間になります。
こちらは大きな<span>フォント</span>を使っても重なりません。</p>
＜表示結果＞
折り返しの設定
文字の折り返し方を指定するには、プロパティと値を以下のように記述します。
- white-space : normal/nowrap/pre
- 値にnormalを指定すると、はみ出した時に折り返します。
- 値にnowrapを指定すると、はみ出しても折り返しません。
- 値にpreを指定すると、改行文字があった場合に改行されます。
（サンプル）
<style>
p.nwp{
white-space : nowrap; //文字を折り返さない
}
p.nml{
white-space : normal; //文字を折り返す
}
p{
width : 200px; //幅を200pxに限定する
border : 1px solid red; //1pxの赤い枠線を付ける
}
</style>
<p class="nwp">文字を折り返さないようにするにはwhite-spaceの値にnowrapを指定します。</p>
<p class="nml">文字を折り返すようにするにはwhite-spaceの値にnomalを指定します。</p>
＜表示結果＞