商用利用OK、加工OK、許可不要、ALL無料のホームページ素材集

WEBデザイナーが作った超シンプル素材集

TIPS MENU

MATERIAL MENU

がんばろうニッポン

CSSサンプル

ここでは、ちょっと役立つCSSをメモ程度に置いていきます。
ご自由にお使いいただけますが、設置後の動作を保障するものではありませんのでご注意ください。

先頭の文字だけ大きくする

新聞や雑誌でよく見かける表現方法「先頭の文字だけでっかくしたりする」方法です。
記事にインパクトを与えたい場合やちょっとしたデザイン性を与えるときなんかに使えます。

◎ワンポイントメモ
※IEなどの古いversionでは適用されないかもしれません。(確認してませんが)
※vertical-alignは指定しなくても良いですが、指定したほうがブラウザのずれがないかも?
※hタグに適用しても良いアクセントになるかも。

::::: CSS表記 :::::

.sample006:first-letter {
vertical-align:text-top;
font-size:150%;
font-weight:bold;
}
.sample006_2:first-letter {
float:left;
vertical-align:text-top;
margin:0px 10px 5px 0px;
font-family:"MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
font-size:200%;color:#00CC00;
font-weight:bold;
}

::::: HTML表記 :::::

<p class="sample006">こんな風に、先頭の文字だけ1.5倍。</p>
<p class="sample006_2">floatを使うことで、回り込みさせることも可能ですし、色を付けたりフォントを変えたりなどなど、応用次第で色々なことができますよ。<br />
きちんと回り込みされるかな?</p>

::::: 動作確認 :::::

こんな風に、先頭の文字だけ1.5倍。

floatを使うことで、回り込みさせることも可能ですし、色を付けたりフォントを変えたりなどなど、応用次第で色々なことができますよ。
きちんと回り込みされるかな?

更新日:2011.01.23 Category:CSSサンプル
HOMEへ このページのTOPへ