snippet html css

CSSによる注釈のインデント

本ページにはプロモーションが含まれる場合があります

注釈のインデント

文章量が多いサイトでよく見かけます。

DEMO

※1 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

HTML

<p class="note">※1 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>

CSS

.note {
  padding-left: 2em;
  text-indent: -2em;
}

余白を作るpadding-leftで全体を少し右に寄せて、text-indentで文頭のみ左に戻します。
今回は「※1 」と全角2文字分なので2emを指定しています。

-snippet, html, css