Categories
HTML+CSS

※印のある注釈で2行目以降を右にずらしたい

「※印」を含めた注釈でよくみられる記述は以下の通り。

<p>※ここに注釈の内容を書く</p>

注釈の内容が1行で済むような短い文章の場合は問題ないですが、複数行に至る場合、2行目以降の1文字目と1行目にある※印の縦位置が同じになってしまう。
例えば、以下。

※注釈1行目
注釈2行目
注釈3行目

上記の場合では「※印」が目立たなくなってしまうので、「※印」だけを左にだしたい!

※注釈1行目
注釈2行目
注釈3行目

こんな感じ。上記は何をしているかと申しますと CSS で以下のような指定をしています。

.kome{
	text-indent: -1em;
	padding-left: 1em;
}

text-indent: -1em; で文章の1文字目を1文字分だけ左にずらし、padding-left: 1em; で文章全体を1文字分右にずらしています。

昔、雑誌で目にし、それ以来使っている方法です。たまに「どうやるの?」と聞かれることがあるので。