こんなスタイルは、おかしいかな?

こんなスタイルは、おかしいかな?

と思いましたが、やってみました。

発端

見出しヘッダの背景を文字より小さくして、軽い印象にしてみることを思いついた。
Firefox3.5 ie8で試してみましたが、他の環境でも大丈夫かな？

どうやって、htmlのデザインを変えることが出来るか

ホームページでは、cssというファイルと、htmlファイルを結合して、レイアウトやデザインといった視覚的な表現を行うのが、今では一般的になりました。

スタイルシート(css)を使わなくても、簡単な表現なら出来ますが、現在は大抵スタイルを利用しているといっても言い過ぎではないんじゃないかと思います。

スタイルの指定を宣言といいますが、どんなスタイルがあればいいか、などということについて、W3CというWEBの標準化団体が、勧告に向けていろいろ研究しているみたいです。

ただ、残念なことに、ブラウザは、それぞれ使える宣言、使えない宣言があり、ばらばらなところがあります。

思いつきで作った以下のスタイルも、たとえば、IEのfilter等を使うと、文字が半分消えてしまうなどの問題もあります。

スタイルの説明

このスタイルは、fontのスタイル font-weight　font-size/line-height というショートハンド表現で、line-heightを0に指定して、padding-bottom 部分に背景画像と配色を設定しています。
(背景画像は、ブラウザにより表現できないので、文字は読みにくいかもしれません。
line-heightが0なので、タイトルが、2行に及ぶ場合は、文字が重なり合います。)

ソース

実際には、テキストファイルに、以下のように書いて、拡張子htmlで保存するとhtmlファイルの出来上がり。

透過pngは、自前で用意してください。

普通に背景画像入れるよりずっと、めんどくさいことを、わざわざやって後悔してしまう事にならないように、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta http-equiv="content-script-type" content="text/javascript">
	<meta http-equiv="content-style-type" content="text/css">
	<title>css trick</title>
<style type="text/css">
	h3{
		font-family:sans-serif;
		font-weight:900;
		font-size:240%;
		text-indent:10px;
		background:#ccf;		
	}
	h3.trick {
		font: 900 240%/0 sans-serif;
		background:#369 url(alpha.png);
		text-indent:10px;
		padding-bottom:24px;
                margin-top:24px;
		color: #333;

	}
</style>
</head>

<body>
<h3>日本語</h3>

スタイルの指定を変更して

<h3 class="trick">日本語</h3>


</body>

</html>