CSSでフォントをちょっとした工夫をして見やすくするver2 - nicepaper @ ウィキ

前回記事CSSでフォントをちょっとした工夫をして見やすくするver1の別versionを作ってみます。今度はtext-shadow使っていきます。7月30日記事

イメージ

text-shadowを使う
コード
表示
参考
その他リンク

text-shadowを使う

構造を説明していきます。text-shadowにて文字に徐々にテキストshadowをかけてひろげていきます。0 0を最初の引数に指定することで、文字から左右上下等間隔にひろがっていきます。

HTML

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>アンチエイリアス処理</title>
</head>
<body>
<div id="wrapper">
	<p class="size200 antialias1">基本</p>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */ 
#wrapper{
	width:500px;
	min-height: 500px;
	padding: 20px;
	margin: 10px auto;
	border: 1px solid #000;
}
p{
	margin-bottom: 20px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
.size200{
     font-size:200px;
}
.antialias1 {
	text-shadow: 0 0 5px #F00, 0 0 15px #0F0, 0 0 25px #00F;
}

※赤、緑、青（緑と青はちょっと見にくいけど）ひろがっているのが確認できると思います。

コード

HTML

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>アンチエイリアス処理</title>
</head>
<body>
<div id="wrapper">
	<p class="size10">デザインの基本はフォントの見やすさから10px</p>
	<p class="size10 antialias">デザインの基本はフォントの見やすさから10px</p>
	<p class="size12">デザインの基本はフォントの見やすさから12px</p>
	<p class="size12 antialias">デザインの基本はフォントの見やすさから12px</p>
	<p class="size14">デザインの基本はフォントの見やすさから14px</p>
	<p class="size14 antialias">デザインの基本はフォントの見やすさから14px</p>
	<p class="size16">デザインの基本はフォントの見やすさから16px</p>
	<p class="size16 antialias">デザインの基本はフォントの見やすさから16px</p>
	<p class="size18">デザインの基本はフォントの見やすさから18px</p>
	<p class="size18 antialias">デザインの基本はフォントの見やすさから18px</p>
	<p class="size20">デザインの基本はフォントの見やすさから20px</p>
	<p class="size20 antialias">デザインの基本はフォントの見やすさから20px</p>
	<p class="size22">デザインの基本はフォントの見やすさから22px</p>
	<p class="size22 antialias">デザインの基本はフォントの見やすさから22px</p>
	<p class="size24">デザインの基本はフォントの見やすさから24px</p>
	<p class="size24 antialias">デザインの基本はフォントの見やすさから24px</p>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

#wrapper{
	width:500px;
	min-height: 500px;
	padding: 20px;
	margin: 10px auto;
	border: 1px solid #000;
}

p{
	margin-bottom: 20px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}
.size200{
	font-size:200px;
}
.size10{
	font-size:10px;
}
.size12{
	font-size:12px;
}
.size14{
	font-size:14px;
}
.size16{
	font-size:16px;
}
.size18{
	font-size:18px;
}
.size20{
	font-size:20px;
}
.size22{
	font-size:22px;
}
.size24{
	font-size:24px;
}
.antialias {
	text-shadow: 0 0 1px #aaa, 0 0 2px #ccc, 0 0 3px #eee;
}