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

イメージ



目次




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 P明朝", "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 P明朝", "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;
}

表示



文字のサイズによってアンチエイリアスの効果がでるものとあまり効果が出ないもの、さらにはちょっと微妙なものになってきます。 今回の場合、14~18までぐらいが理想でしょうか。

参考

http://dtp.jdash.info/archives/51924296.html

その他リンク

別の方法も紹介します。

  1. CSSでフォントをちょっとした工夫をして見やすくするver1
  2. CSSでフォントをちょっとした工夫をして見やすくするver3

    以上
最終更新:2015年07月30日 16:53