文字装飾について フォントのデザイン「応用編」

前回のエントリーでフォントのデザインについての基本を解説をさせて貰ったので、今回は少し応用したフォントのデザインについての解説をさせて貰います。

…ここからが続き

文字の背景に色をつけたりしての装飾

xhtml

<h2><span>最新</span>新商品一覧</h2>

CSS

h2	{
	width: 490px;
	background: #EEE;
	border: solid 1px #CCC;
	color: #333;
	padding: 10px;
}
h2 span	{
	border: dotted 1px #F00;
	padding: 3px;
	color: #F00;
	margin-right: 10px;
}

文字の背景に画像をつけての装飾

xhtml

<h2>CSS Lecture</h2>

CSS

h2	{
	width: 480px;
	background: url(../../images/bg/column.jpg) repeat-x;
	border-bottom: solid 1px #D1D1D1;
	padding: 10px;
}

文字行揃えの指定方法

text-alignプロパティを使います。

body	{
	text-align: center;
}

上記の指定でbody内のものをセンタリングにします。

行間を調整して読みやすい文章のデザイン

line-heightプロパティを使います。

body	{
	line-height: 150%;
}

読みやすい行間は130%~150%(1.3em~1.5em)なので、bodyにかけておくといいと思いますよ。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article