Web標準HTMLコーディングのHomeWeb-coding｜「※（米印）」が付く注意書きをきれいにインデントさせる

コーディングコラム

注意書きなどでは、文頭に「※（米印）」が付くことが多いですが、改行されて複数行になる場合はインデントさせて文頭をそろえるときれいに見えます。
そのためには「※（米印）」を画像化して背景処理をするという手もありますが、フォントサイズや色の変更などを考慮すると、やはりテキスト処理したいところです。

そんな「※（米印）」のテキスト処理で簡単な方法としては以下のようなコーディングがあります。

CSS

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

HTML

<p class="note">※注意書きテキスト（改行されても文頭がそろいます）</p>

こんな簡単なことで注意書きの見栄えがグッとよくなります。ただ、Macの標準ブラウザSafariでみると、2行目の文頭がずれてしまいます。さすがに標準ブラウザは無視することはできないですよね・・・。

そこで以下のような方法が有効になります。

CSS

.note dt {
  position: relative;
}
.note dt span {
  position: absolute;
}
.note dd {
  padding-left: 1em;
}

HTML

<dl class="note">
  <dt><span>※</span></dt>
  <dd>注意書きテキスト（改行されても文頭がそろいます）</dd>
</dl>

表示サンプル

こうすることで文頭が綺麗にそろうようになります。

対象ブラウザが明確であるならシンプルなコーディングの前者をお勧めしますが、幅広いブラザウに対応したい場合は後者を使用するのがよいでしょう。また、後者の場合は「※（米印）」だけではなく、CSSの余白設定によって「（答え）」のように文字を入れるなど、応用も利くので利用価値は高いでしょう。

是非、お試しください。