【HTML・CSS】文章の最初の行だけ見た目を変更するにはどうやれば良いか

はじめに

この記事では、HTML内に記述したテキストの1行目だけスタイルを変更したいときに、CSSでどうすれば実現できるかの例を紹介します。

疑似要素の::first-lineを使用する方法

divタグやpタグ等で囲んだテキストにCSSのクラスを設定し、そのクラス名と疑似要素の::first-lineを使用すると、最初の行にスタイルを適用することができます。

See the Pen
疑似要素の::first-lineを使用する方法 by aiiro (@aiiro29)
on CodePen.

この例では、pタグにcontentというクラスを設定しているので、 .content::first-line というCSSでスタイルを変更しています。

HTML

<p class="content">
  これは1行目です。<br />
  これは2行目です。<br />
  これは3行目です。<br />
<p/>

CSS

.content::first-line {
  font-weight: bold;
  color: blue;
}

最初の行をspanタグで囲む方法

2つ目の方法では、最初の行をspanタグで囲み、spanタグのCSSで見た目を変更します。

See the Pen
最初の行をspanタグで囲む方法 by aiiro (@aiiro29)
on CodePen.

この例では、spanタグにfirstというクラスを設定します。そして、firstのCSSを設定して、1行目の見た目を変更しています。

HTML

<p class="content">
  <span class="first">これは1行目です。</span><br />
  これは2行目です。<br />
  これは3行目です。<br />
<p/>

CSS

.first {
  font-weight: bold;
  color: orange;
}