【CSS】折り返しのある文章で2行目以降のインデントを揃える方法

おはようございます！　社員Tです。

私の記事では、主にコーディング初学者に向けた使えるテクニックやweb業界の最新ニュースなどをお伝えしていこうと思いますので、今後の更新を楽しみにしていてください！

今回は、WEB サイト内の注釈でよくある下記のような※マークだけ左に浮き出ているタイプのデザインにしたい場合に、使える方法をご紹介します！

改善前の状態

改善の前の状態をまず確認！

改行すると※マーク部分も食い込んで表示されています。（下記のような表示）

こうならないように、今回は冒頭の ※マークだけ浮き出るデザインにする方法を紹介していきます。

前提となるコード

まず、前提となるコードは以下の通り。 liタグに擬似要素beforeで※マークをつけています。

 <ul>
    <li>
      テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
      テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
    </li>
 </ul>

ul {
  list-style: none;
}
li:before {
  content: "※";
}

ただ、擬似要素before でコンテンツを入れてつくっても、改行すると2行目以降のインデントが揃っていない状態で文章がはじまってしまいます。

こんな感じに。。。。

方法その１

結論、positionとpaddingを使って調整します。

<ul>
  <li>
    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
  </li>
</ul>

ul {
  list-style: none;
}
li {
  position: relative;
  padding-left: 24px;
}
li:before {
  content: "※";
  left: 0;
  position: absolute;
}

liタグを親要素、liの擬似要素beforeを子要素としてpositionプロパティを指定します。※マーク分の余白はliタグのpadding-leftで調整すると2行目以降のインデントを揃えることができます。

方法その２

また、li要素にmargin-leftを指定して、最初のテキストインデントだけをマイナスに調整するやり方もあります。

<ul>
  <li>
    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
    テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
  </li>
</ul>

ul {
  list-style: none;
}
li {
  margin-left: 2rem;
  text-indent: -1.2rem;
}
li:before {
  content: "※";
}

仕組みとしては、※マーク分だけコンテンツ全体を左側に余白を取って、余白を取った分、最初の行を text-indent をマイナスにして左に寄せるという仕組み。

ただ、このやり方はbefore属性のコンテンツの幅によってtext-indentの値も変動する分、難しいです。解決策1のやり方が無難ですね。

ということで、※マークだけ浮き出した改行時の空白ができるコーディングでした。

個人的に実務でサッと使えるという点で、最初にご紹介した方法その1の方がより現実的です。ですが、CSSは奥が深いのでご紹介した内容以外の方法も、ご自身でインプットしておくといいかなと思います。

勉強中の方や現場で実務をバリバリこなされてる方も、今回ご紹介した内容はすぐ使えるテクニックだと思いますので、ぜひ参考にしてみてください！