first-letterで最初の文字を装飾する【CSS】

公開日: 2014/11/05 HTML5×CSS3

first-letterを使ってCSSでテキストの最初の文字を装飾します

『1文字目の文字色を変更する』

css
p.text:first-letter{
	color:#000000;
}
HTML
<p class="text">涙目WEB3.0</p>
表示結果




『1文字目の文字サイズを変更する』

css
p.text:first-letter{
	color:#000000;
	font-size:150%;
}
HTML
<p class="text">涙目WEB3.0</p>
表示結果




『改行させずに反映させる』

first-letterは、displayプロパティがblockの状態になっている事が反映の条件となっています
<div>や<p>、<h1>などはデフォルトでblockに設定されているので問題なく反映されます

しかし、改行せず横並びに続けてfirst-letterを利用・表示したい場合にdisplay:inline;でブロック要素を解除すると反映されなくなるので注意がひつようです
改行せず横並びに続けて使いたい場合はdisplay: inline-blockを指定する事でも利用可能です


p.text{
	display: inline-block;
}
p.text:first-letter{
	color:#000000;
	font-size:150%;
}
HTML
<p class="text">涙目WEB3.0</p>
<p class="text">涙目WEB3.0</p>
表示結果
  • ?±??G???g???[?d????u?b?N?}?[?N???A

0 件のコメント :

コメントを投稿