ホームページ作成講座[CSS編]段落のスタイル設定

作成日:2019.08.29
  1. HOME
  2. ホームページ作成講座
  3. 段落のスタイル設定

このページでは主に段落に関連したスタイル設定について見ていきます。

  1. 文字揃えの設定
  2. 字下げの設定
  3. 文字間の幅の設定
  4. 行の高さの設定
  5. 折り返しの設定

文字揃えの設定

文字揃えを指定するには、プロパティと値を以下のように記述します。

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>
<表示結果>
data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,3" data-matched-content-ui-type="image_stacked,image_card_sidebyside">