global menu
search this site
sponsored links
REX CARD
楽天カード
漢方スタイルクラブカード
DMM mobile
OCN モバイル ONE
IIJmio

撮影機材
store
category archive
monthly archive
powered by

エントリーアーカイブ

スタイルシートで記号付注釈文を作る

Web

2007/02/26 18:03

概要

先頭に※等の記号付き注釈文が1行で表示しきれず2行以上になってしまった場合、先頭の記号の下にも文字がきてしまい不恰好になる。

不恰好な注釈文
※注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。
注釈文の内容。注釈文の内容。
意図する注釈文
※注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。
 注釈文の内容。注釈文の内容。

ソース

(X)HTML
<p class="note">※注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。注釈文の内容。</p>
CSS
p.note {
	padding-left: 1em;
	text-indent: -1em;
}

padding-leftでp要素全体に対して1文字分余白を取り、text-indentでp要素の先頭行のみを1文字分左に戻す。

※ただし、表示フォントに等幅フォントが指定されている必要があるはず。(未検証)