More than 3 years have passed since last update.

【初心者でもわかる】supやsubがあるテキストでも下線を引く方法

Posted at 2021-06-05

#どうも7noteです。supやsubだと下線がずれるので、対策方法を考える

**上付き文字を指定できる<sup>**や、
**下付き文字を指定する<sub>**などがありますが、
これらに下線を指定すると表示がちょっとおかしくなってしまいます。

【崩れてしまう例の画像↓】

index.html

<p>水の化学式はH<sub>2</sub>O<sup>※</sup>である</p>

style.css

p {
  text-decoration: underline;
}

このようにsupやsubでは表示位置が上下にずれてしまうため下線がまっすぐ続きません。

これをまっすぐ線を引くための方法を考えていきます。

解決方法①：テキストをすべて画像にする

画像にすれば万事解決ですね。何の問題もありません。
しかしテキストの修正やSEOの事を考えるとあまり最適な方法とはいえなさそうです。

下線がずれるのは、text-decoration: underline;を使っているからなので、この指定を使わずに下線を引けば問題ないはずです。

style.css

p {
  line-height: 1.2;  /* borderの位置はline-heightを使って微調整が必要 */
  display: inline-block;
  border-bottom: solid 1px #000;
}

subにしか使えない方法ですが、vertical-alignの指定を変えることで下揃えにすることが可能です。

style.css

sub {
  vertical-align: baseline;
}

inline-block要素にすることで、下線をつけないようにすることができます。

style.css

sup,sub {
  display: inline-block;
}

下線がずれたままよりはまだ見栄えがいいですね。指定が簡単なので妥協案の1つとしてはOKかなと思えます。

解決方法3つ+妥協案1つを考えました。もしかしたら他にももっと良い方法があるかもしれませんので、もし「こうすればもっと簡単に下線がきれいになるよ！」という案があればぜひコメントください。

まとめとしては、

このようなところでしょうか？
ぜひ他にもアイデアあればコメントください。