«
»

CSS3を使って超簡単タイポグラフィ

2010
04.03

typography screenshot top CSS3を使って超簡単タイポグラフィ

ウェブサイトでタイポグラフィデザインのチュートリアルをよく見ますが、ほとんどが PhotoShop を使ったテクニックばかりで難しいので、この記事では How to Create Inset Typography with CSS3 から、CSS3 を使って10行程度のコードで超簡単にタイポグラフィデザインできる方法を紹介します。

Step 1： HTMLファイルの設定

例では、『Inset Typography』 という文字にデザインを施していきます。 

<!-- HTMLファイル -->
<div id="insetBgd">
 <h1 class="insetType">Inset Typography</h1>
</div>

Step 2： CSSファイルの設定

typography screenshot 2 CSS3を使って超簡単タイポグラフィ

幅550px 高さ100px に設定し、CSS3 のグラデーション (gradient) をつかいます。背景色を上から下へ #448CCB から #003471 のグラデーションになるように設定します。 

/* CSSファイル */
#insetBgd {
 width: 550px;
 height: 100px;
 background:
	-moz-linear-gradient(-90deg, #003471, #448CCB);
 background:
	-webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

Step 3： フォントの設定

typography screenshot 3 CSS3を使って超簡単タイポグラフィ

Rockwell という有料フォントを設定しますが、閲覧者の環境で Rockwell がインストールしていない場合を考え、ほとんどのパソコンにインストールしてあるフォントも設定しておきます。フォントサイズは 50px, 文字色は #0D4383 に設定します。この例では、欧文フォント（英数）のみ設定されているので、日本語を表示させるとブラウザで設定されているフォントで表示されます。日本語フォントはメイリオ、ヒラギノ角ゴ Pro W3 を設定すると綺麗です。 

/* CSSファイル */
h1.insetType {
 font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
 font-size: 50px;
 color: #0D4383;
}

Step 4： フォントスタイルの設定

テキストシャドウ (text-shadow) を設定します。text-shadow に複数の色を少しずらして設定することで、立体感を出しています。

/* CSSファイル */
/* rgba(赤, 緑, 青, 透明度) 右へずらす量, 下へずらす量; */
h1.insetType {
 text-shadow:
 rgba(0,0,0,0.5) -1px 0,
 rgba(0,0,0,0.3) 0 -1px,
 rgba(255,255,255,0.5) 0 1px,
 rgba(0,0,0,0.3) -1px -2px;
}

まとめ

typography screenshot 4 CSS3を使って超簡単タイポグラフィ

<!-- HTMLファイル -->
<div id="insetBgd">
<h1 class="insetType">Inset Typography</h1>
</div>

/* CSSファイル */
#insetBgd {
 width: 550px;
 height: 100px;
 background:
	-moz-linear-gradient(-90deg,#003471,#448CCB);
 background:
	-webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
}

h1.insetType {
 padding-left: 50px;
 padding-top: 17px;
 font-family: Rockwell, Georgia, "Times New Roman", Times, serif;
 font-size: 50px;
 color: #0D4383;
 text-shadow:
	rgba(0,0,0,0.5) -1px 0,
	rgba(0,0,0,0.3) 0 -1px,
	rgba(255,255,255,0.5) 0 1px,
	rgba(0,0,0,0.3) -1px -2px;
}

How to Create Inset Typography with CSS3

関連記事

Tags: ,

Comments are closed.