読者です 読者をやめる 読者になる 読者になる

毎日がひとりオフ

ネットの話題とITと音楽。

※マークなどの字下げを、背景画像を使わずに行う

例えば、次のような文章を、※マークのみ字下げして表示させたい場合。

※このページに掲載されている内容は一切確認が取られておりません。
使用した際にトラブルが発生しても、当方では一切責任を負うことができません。

今まではliのリストマークに「※」の画像を使用したり、paddingとって背景画像の位置調整をごにょごにょしたりして回避してたのだけれども、marginとtext-indentでもっとスマートに実現可能なことに気づいたっていうか気づくの遅すぎ。

やり方

marginで段落全体を1文字分下げたあと、text-indentでマイナスインデントを取り、表示位置を調整する。
IE6・IE7・Firefox3にて動作確認。

XHTML
<p class="attention">※このページに掲載されている内容は一切確認が取られておりません。<br />
使用した際にトラブルが発生しても、当方では一切責任を負うことができません。</p>
CSS
.attention{
	margin-left:1em;
	text-indent:-1em;
}
備考

XHTML的なことを考慮して「※」マークを段落に含ませたくないという方は、CSS2の:before擬似要素やcontentプロパティを併用すると良いかも。
ただし:before・contentプロパティはIE6非対応なので臨機応変に。