【CSS】CSSで簡単にぶら下げインデントをする方法

自宅用に新しいパソコンを買った sakai です。
スペック重視とお店で伝えたら「ちょっと値が張りますよ～」と店員に言われたのでドキドキしていたのですが、CPU が Core i7、メモリが 6GB、ハードディスクが 1TB、ディスプレイや OS も付属して 13 万円くらいでした。前回パソコンを買ったときの感覚では 30 万円くらいなのかと思ってました。安くなりましたね…

今回は小ネタで失礼します。

Web ページ中の注意書きなどでよく使用される手法で、「※」マークを使って文字をぶら下げる方法をご紹介します。

このように表示されます。

XHTML ソースは以下です。

<p>※ここに注意書き。<br />
改行しても見栄えがいいです。</p>

CSS のソースは以下です。

p {
      margin-left: 1em; /* ブロック全体を 1em 右に */
      text-indent: -1em; /* 先頭の1文字のみ 1em 左に */
}

簡単ですが、意外と使えるテクニックです。