CSSでdiv内の行間を一か所だけ個別に設定する方法。pタグ前後の改行は意外と悩む?

CSS行間の個別設定_001

前回の記事でサイト内の改行や段落幅を一括設定する方法を書きました。

箇条書きする時など、div内で行間を一か所だけ調整したい場合があります。
では、行間を個別に設定する場合はどうすれば良いのか?

pタグにmargin-bottomを設定すればできそうですが、設定した箇所もpタグで段落扱いとなるためうまくいきません。

WordPressの場合はエディターの改行も影響して意外と詰まったのでまとめ。

NG例と成功例の両方を書いています。
特定のdiv内の行間だけを調整する方法もご紹介!

CSSで1か所だけ行間を調整する方法

CSS行間の個別設定_001記事内で要点をまとめる時、divタグを使って箇条書きする場合があります。
箇条書きされた文章の行間は広めの方が見やすいと思います。

しかし改行を入れると広すぎ、改行が無いと文字が詰まって見える。
特定のdivタグ内の行間を調整したい!こんな時につかえる方法です。

styleタグとmargin-bottomを使う

CSSを個別に設定する場合はstyleタグを直接埋め込むのが手っ取り速いです。

クラスを用意してスタイルシートを使っても良いですが、一か所だけの変更に使うのはコードが増えすぎるので良くないです。

失敗例1:pタグとmargin-bottomを使う

一番初めに試した方法です。
改行幅を調整したいpタグにmargin-bottomを指定しました。
CSS行間の個別設定_002

<p style="margin-bottom:3.5em;">・ココだけ行間を空ける。</p>

こんな感じに書くと...

CSS行間の個別設定_003

上部にも余白が出来てしまう

見事にダメでした…

1つ目の文章
<p>2つ目の文章</p>
3つ目の文章

という風にWordpressのクラシックエディターで記述したところ、pタグを指定したところが一つの段落として認識されるため、行間を調整したい文章の上側にも余白が出来てしまいます。

失敗例2:spanタグをそのまま使う

pタグが段落として扱われ、上部に余白が出来てしまうならspanタグでOK!
と思いspanタグにmargin-bottomを指定しました。
CSS行間の個別設定_004

<span style="margin-bottom:3.5em;">・ココだけ行間を空ける。</span>

こんな感じ。

CSS行間の個別設定_005

margin-bottomが効いていない

これでOK!と思っていましたがダメでした。
margin-bottomがspanタグに効いていないようです。

spanタグにmargin-bottomが効かない原因

調べてみるとspanタグはインライン要素なので上下のmarginが効かないようです。
(左右のmarginは効く)

spanタグのようなインライン要素で上下のmargin、つまり高さを変更したい場合には「display:inline-block」を使用するとのこと。

1か所の行間調整に成功した方法

CSSで行間を個別に設定したい場合は、

spanタグ + margin-bottom + display:inline-block

を使用する。

CSS行間の個別設定_006

<span style="margin-bottom:3.5em;display:inline-block;">・ココだけ行間を空ける。</span>

改行調整したい文章を<span></span>で囲み、styleタグを使用してmargin-bottom;とdisplay:inline-blockを指定しました。
CSS行間の個別設定_007やっとうまくいきました!

divタグ上部の改行を削除する方法

まだ少し気になるところがあったので調整してみます。
CSS行間の個別設定_008WordPressの場合、pタグの下にdivタグが入っていると改行されて余白が出来ます。
divボックスのタイトルになるような感じの文章を書きたい場合、この余白に違和感があります。
CSS行間の個別設定_009先ほどと同じく、文章下のマージンを0にすればOKです。

<p style="margin-bottom:0;">こちらを見てください↓</p>

pタグの前に段落(改行)が入っている場合はpタグでもうまくいきます。

文章の末端の場合はspanタグを使用します。

<span style="margin-bottom:0;display:inline-block;">こちらを見てください↓</span>

CSS行間の個別設定_010ボックスに文章が近くなったことでdiv内の内容に誘導しやすくなったと思います。

特定のdiv内の行間を調整する

更にもう一つ特定のdiv内の行間を調整する方法をご紹介。
div内に文章を箇条書きする場合、一つ一つの文章が長いと改行していても文字が詰まりすぎて圧迫感があり、文字が読みにくくなります。

CSS行間の個別設定_011

・がない場合は更に読みにくい

・がない場合、文字の折り返しの場所によってはdivボックスいっぱいに文字が敷き詰められて更に見えにくくなりますね。

そこでdivタグにstyleタグを使用して行間を調整してみます。

divタグにline-heightを使う

CSS行間の個別設定_012

<div class="graybox" style="line-height: 2.5em;">ほげほげ</div>

CSS行間の個別設定_013divボックス内の行間が広くなります。
ただしline-heightを使用するこの方法は注意点があります。

CSS行間の個別設定_014画面が小さいスマホなどで文章が折り返されて2行以上になった場合、
1行目と2行目にも行間が空いてしまうので、かえって見にくくなります。

段落ごとに区切って行間を調整する

line-heightを使うと文章が折り返された時に段落が分かりづらくなります。

段落ごとに行間を個別に調整したい場合は、段落(pタグ)ごとにそれぞれ手動でスタイルを当てるしかないです。
(他の方法があったらゴメンなさい...)
CSS行間の個別設定_015行間調整を行いたいところをタグで区切ります。

<p style="margin-bottom:1.2em;">文章1</p>
<p style="margin-bottom:1.2em;">文章2</p>
<p style="margin-bottom:1.2em;">文章3</p>
<p style="margin-bottom:1.2em;">文章4</p>
文章5

pタグを使う場合、最後の段落にstyleの指定は不要ですね。

CSS行間の個別設定_016スマホ閲覧時でも箇条書きが見やすくなりました。

Gutenbergではdiv内の行間調整は不可能?

WordPress5.0からの新エディターGutenberg(グーテンベルク)なら簡単に出来る?
と思って色々試してみたのですが、スペーサーを使ってもdiv内に空のボックスを挿入することが出来ませんでした。

僕は旧エディターに慣れすぎてどうもブロックエディターの使い方が分かりません。
今回のようにHTMLで文章にHTMLを手書きしたい時、もはやどこから編集してよいのか分かりません。

今まで改行で対応していた段落間の余白を簡単に作れるように導入されたスペーサーですが、あまり使い勝手が良くありません。
CSS行間の個別設定_017スペーサーを使うとstyle属性が直書きされたdivクラスが挿入されます。
また行間や改行幅の調整に使用したい場合、px指定しかできません。

端末の種類が増えた今、px指定しかできないのは結構痛いです。
(PC画面に合わせるとスマホでは広すぎたりするので...)

まとめ

CSSで一か所だけpタグ(段落)やdivボックス内の行間を調整する方法でした。

一括設定はWordpressのテーマについていたり、CSSで一発で設定出来ますが、自分の好きなところを1か所だけ行間調整するのはなかなかややこしいですね。

特にWordpressについてはGutenbergが実装されてから連続改行が出来なくなったり、無視されていた連続改行が復活したりと堂々巡りで段落間の調整は難儀です。

-サイト構築
-

© 2021 ソロ学