前回の記事でサイト内の改行や段落幅を一括設定する方法を書きました。
箇条書きする時など、div内で行間を一か所だけ調整したい場合があります。
では、行間を個別に設定する場合はどうすれば良いのか？
pタグにmargin-bottomを設定すればできそうですが、設定した箇所もpタグで段落扱いとなるためうまくいきません。
Wordpressの場合はエディターの改行も影響して意外と詰まったのでまとめ。
NG例と成功例の両方を書いています。
特定のdiv内の行間だけを調整する方法もご紹介！
この記事の目次
CSSで1か所だけ行間を調整する方法
任意の箇所だけ行間を空けたい...
記事内で要点をまとめる時、divタグを使って箇条書きする場合があります。
箇条書きされた文章の行間は広めの方が見やすいと思います。
ポイント
箇条書きする場合はliなどのリストタグを使う方が良いですが、今回は分かりやすくdivにしました。
しかし改行を入れると広すぎ、改行が無いと文字が詰まって見える。
特定のdivタグ内の行間を調整したい！こんな時につかえる方法です。
styleタグとmargin-bottomを使う
CSSを個別に設定する場合はstyleタグを直接埋め込むのが手っ取り速いです。
クラスを用意してスタイルシートを使っても良いですが、一か所だけの変更に使うのはコードが増えすぎるので良くないです。
失敗例１：pタグとmargin-bottomを使う
pタグにmargin-bottomを指定
一番初めに試した方法です。
改行幅を調整したいpタグにmargin-bottomを指定しました。
<p style="margin-bottom:3.5em;">・ココだけ行間を空ける。</p>
こんな感じに書くと...
上部にも余白が出来てしまう
見事にダメでした…
1つ目の文章
<p>2つ目の文章</p>
3つ目の文章
という風にWordpressのクラシックエディターで記述したところ、pタグを指定したところが一つの段落として認識されるため、行間を調整したい文章の上側にも余白が出来てしまいます。
失敗例２：spanタグをそのまま使う
spanタグにmargin-bottomを指定
pタグが段落として扱われ、上部に余白が出来てしまうならspanタグでOK！
と思いspanタグにmargin-bottomを指定しました。
<span style="margin-bottom:3.5em;">・ココだけ行間を空ける。</span>
こんな感じ。
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
を使用する。
<span style="margin-bottom:3.5em;display:inline-block;">・ココだけ行間を空ける。</span>
１か所だけ行間を空けられた！
改行調整したい文章を<span></span>で囲み、styleタグを使用してmargin-bottom;とdisplay:inline-blockを指定しました。
やっとうまくいきました！
divタグ上部の改行を削除する方法
pタグとdivタグに出来た余白を調整する
pタグにmargin-bottom:0を指定すればOK！
まだ少し気になるところがあったので調整してみます。
Wordpressの場合、pタグの下にdivタグが入っていると改行されて余白が出来ます。
divボックスのタイトルになるような感じの文章を書きたい場合、この余白に違和感があります。
先ほどと同じく、文章下のマージンを0にすればOKです。
<p style="margin-bottom:0;">こちらを見てください↓</p>
pタグの前に段落（改行）が入っている場合はpタグでもうまくいきます。
文章の末端の場合はspanタグを使用します。
<span style="margin-bottom:0;display:inline-block;">こちらを見てください↓</span>
div上の余白を0にしてみた
ボックスに文章が近くなったことでdiv内の内容に誘導しやすくなったと思います。
特定のdiv内の行間を調整する
更にもう一つ特定のdiv内の行間を調整する方法をご紹介。
div内に文章を箇条書きする場合、一つ一つの文章が長いと改行していても文字が詰まりすぎて圧迫感があり、文字が読みにくくなります。
・がない場合は更に読みにくい
・がない場合、文字の折り返しの場所によってはdivボックスいっぱいに文字が敷き詰められて更に見えにくくなりますね。
そこでdivタグにstyleタグを使用して行間を調整してみます。
divタグにline-heightを使う
line-heightを使用した例
<div class="graybox" style="line-height: 2.5em;">ほげほげ</div>
line-height設定時の表示例（PC）
divボックス内の行間が広くなります。
ただしline-heightを使用するこの方法は注意点があります。
line-height設定時の表示例（モバイル）
画面が小さいスマホなどで文章が折り返されて2行以上になった場合、
1行目と2行目にも行間が空いてしまうので、かえって見にくくなります。
段落ごとに区切って行間を調整する
line-heightを使うと文章が折り返された時に段落が分かりづらくなります。
pタグ（段落）ごとに個別でスタイルを設定する
段落ごとに行間を個別に調整したい場合は、段落（pタグ）ごとにそれぞれ手動でスタイルを当てるしかないです。
（他の方法があったらゴメンなさい...）
行間調整を行いたいところをタグで区切ります。
<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の指定は不要ですね。
スマホでの表示例
スマホ閲覧時でも箇条書きが見やすくなりました。
注意ポイント
最後になりましたが、このように箇条書きする場合はolやliタグなどのリストタグを使って適宜調整するのが定石です。この内容はあくまでCSSの使い方ということで...とはいえリストタグ内でも使えます。
Gutenbergではdiv内の行間調整は不可能？
Wordpress5.0からの新エディターGutenberg（グーテンベルク）なら簡単に出来る？
と思って色々試してみたのですが、スペーサーを使ってもdiv内に空のボックスを挿入することが出来ませんでした。
僕は旧エディターに慣れすぎてどうもブロックエディターの使い方が分かりません。
今回のようにHTMLで文章にHTMLを手書きしたい時、もはやどこから編集してよいのか分かりません。
スペーサーで挿入されたコード
今まで改行で対応していた段落間の余白を簡単に作れるように導入されたスペーサーですが、あまり使い勝手が良くありません。
スペーサーを使うとstyle属性が直書きされたdivクラスが挿入されます。
また行間や改行幅の調整に使用したい場合、px指定しかできません。
端末の種類が増えた今、px指定しかできないのは結構痛いです。
（PC画面に合わせるとスマホでは広すぎたりするので...）
まとめ
CSSで一か所だけpタグ（段落）やdivボックス内の行間を調整する方法でした。
一括設定はWordpressのテーマについていたり、CSSで一発で設定出来ますが、自分の好きなところを1か所だけ行間調整するのはなかなかややこしいですね。
特にWordpressについてはGutenbergが実装されてから連続改行が出来なくなったり、無視されていた連続改行が復活したりと堂々巡りで段落間の調整は難儀です。
