CSSで東京電力のシンボルマークを描く

いま全国で話題の東京電力のシンボルマークを CSS で描いてみた。
このシンボルマークは1987年にグラフィックデザイナー・永井一正によってデザインされた。円は柔軟な心、環境との調和、未来への広がりを表し、深紅の色は活気、親しみやすさ、明るさを表している。全体として東京電力の総合力やダイナミズムを表現している。
デモはこちら。

http://harapeco.grrr.jp/examples/tepco.html

このシンボルマークは●と○で構成されているので、それを代替テキストのようにマークアップしておく。また、絵文字的に使いたいのでインライン要素とする。こんなふうに。

<span class="tepco-symbol">
	<span>●</span>
	<span>●</span>
	<span>●</span>
	<span>●</span>
	<span>○</span>
	<span>○</span>
</span>

シンボルマークには img 要素のように振る舞ってほしいので、inline-block としてレンダリングさせる。中の span 要素にはそれぞれの●のレンダリングを任せる。これを親要素に対して絶対配置させるため、親に position: relative を指定しておく。

.tepco-symbol {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	position: relative;
}

.tepco-symbol span {
	display: block;
	position: absolute;
}

共通のスタイルを書いていく。

テキストを text-indent と overflow で消す
●の大きさは一つを除き同じ
●の色は二つを除き同じ
●は丸い

.tepco-symbol span {
	text-indent: -9999px;
	overflow: hidden;

	font-size: 32.7%;
	width: 1em;
	height: 1em;

	background: #D70C19;

	border-radius: 1em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
}

それから差分のスタイルを書く。
疑似要素 :nth-of-type(n) は、ここでは :nth-child(n) でもよい。:nth-child は同じ階層にある他の要素も数えるが、:nth-of-type はその要素だけを数える。

.tepco-symbol span:nth-of-type(2) {
	left: 1.014em;
}

...

これで完成。