1. トップページ >
  2. コーディング関連情報 >
  3. コーディングコラム >
  4. 「※(米印)」が付く注意書きをきれいにインデントさせる

コーディングコラム

「※(米印)」が付く注意書きをきれいにインデントさせる

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

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

CSS

HTML

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

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

CSS

HTML

表示サンプル

注意書きテキスト
注意書きテキスト
(改行されても文頭がそろいます)

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

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

是非、お試しください。