CSSの小技Tips：注釈

• 文字サイズを縮小
• 文字サイズを拡大
• 元の文字サイズに戻す

1. スタッフブログ
2. 業界ブログ
3. 業界ポッド？

え～、小技といえるかどうかも怪しいですが、
よくWEBサイトを作っていると、あれこれ説明した後に注釈入れるときがありますよね？

例えば、こんな感じで。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
※遠足のおやつは300円までとする。ただし、バナナはおやつに含めない。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

一行ですむときはそれでいいんですが、やたらと文章が長かったり、複数の注釈を入れると文字が折り返すので、“※”の下にも文字が入っちゃってカッコ悪いのです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
※遠足のおやつは300円までとする。
ただし、バナナはおやつに含めない。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

これをHTML側できれいに揃えようとすると、<dl>タグとか、余計な<div>とか使ってゴニョゴニョするか、
昔風に<table>で“※”と注釈文を別々の<td>に入れるとか、まぁまぁ面倒な感じなのです。
(SEO的にも良くないしね。)


そんなわけで、CSSを使って簡単に解決しましょうということで、

// HTMLソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<p class="note">※遠足のおやつは300円までとする。ただし、バナナはおやつに含めない。</p>

// CSSソース //＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

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

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

これで、“※”の下に注釈文が回り込まずにきれいに表示することができます。
見たままなので、解説は必要ないかと思いますが、何をやっているかというと、
 

1. ブロック要素(ここでは<p>タグ)の左に1文字(1em)分の余白(padding)を作り、
2. テキスト文をマイナス方向に1文字分インデントしてずらす

という、至極簡単な作りなのです。
注釈分の途中で改行(<br />タグ)を入れても、1文字分の余白が生きていますので、“※”の下に文字が回り込むことはありません。

なんかね、ちょっと考えれば誰でも思いつきそうな技なんです。
が、これほどシンプルにCSSを指定できるのは、なかなか簡単にはいかないですよ。
最初に考えた人、えらいなぁと思います。

CSSを使えるようになると、とかく難しげなCSSを組んでしまいがちですが、
HTMLもCSSもシンプルが一番ということで、良いお手本にしたいと思います。