見出し画像CSS3ですけど、ぜんぜん違いますw

注釈などが入った際に※印があって、2行目以降はインデントされていることなどが多く、そんな時に便利。

よく使うのでメモ

サンプル
注釈などが入った際に※印があって、2行目以降はインデントされていることなどが多く、そんな時に便利。
サンプルエリア内はテーブルで書いてあります。
手間なテーブル使わなくてもCSSで作れます。

↑こんなデザインよくあります。

html
<p class="notes">※注釈などが入った際に※印があって、2行目以降はインデントされていることなどが多く、そんな時に便利。<br>こちらはpタグでそのまま書いてあります<br>手間なテーブル使わなくてもCSSで作れます。</p>

<p class="notes">1 注釈などが入った際に※印があって、2行目以降はインデントされていることなどが多く、そんな時に便利。<br>こちらはpタグでそのまま書いてあります<br>手間なテーブル使わなくてもCSSで作れます。</p>
</p>
<p class="notes">2 注釈などが入った際に※印があって、2行目以降はインデントされていることなどが多く、そんな時に便利。<br>こちらはpタグでそのまま書いてあります<br>手間なテーブル使わなくてもCSSで作れます。</p>
</p>
css
	.notes{
		padding-left: 1em;
		text-indent: -1em;
	}
サンプル

※注釈などが入った際に※印があって、2行目以降はインデントされていることなどが多く、そんな時に便利。
こちらはpタグでそのまま書いてあります
手間なテーブル使わなくてもCSSで作れます。

1 注釈などが入った際に※印があって、2行目以降はインデントされていることなどが多く、そんな時に便利。
こちらはpタグでそのまま書いてあります
手間なテーブル使わなくてもCSSで作れます。

2 注釈などが入った際に※印があって、2行目以降はインデントされていることなどが多く、そんな時に便利。
こちらはpタグでそのまま書いてあります
手間なテーブル使わなくてもCSSで作れます。

何をやっているかというと、padding-leftで1em(1文字分)全体に余白を空けて、text-indentをマイナスで設定し最初の一文字だけ、元の位置に戻しています。

LIvedoorブログはSPが調整できません。
お手数ですが
こちらよりPCサイトへ移動してください