面白いCSS

【元記事：面白いCSS：d:id:manpukuya:20030318:p1

】

id:wireselfさんの日記では、押すべきキーを指し示す部分が「いかにもキー」な見栄えで表示されている。面白いと思いCSSを覗かせてもらったところ、下の通りであった。

kbd {
	color: #333333;
	background-color: #EFEFEF;
	font-weight: normal;
	font-size: 95%;
	text-align: center;
	border-top: 1px double #CFCFCF;
	border-left: 2px solid #BABABA;
	border-right: 3px solid #AAAAAA;
	border-bottom: 4px solid #909090;
	padding: 0em 0.2em 0em 0.2em;
	line-height: 1.6em;
	vertical-align: top;
	white-space: nowrap;
}

ナルホド、枠線の太さや濃さを上下左右で変えることによって、キーらしさを表現しているのか。

このスタイルシートを自分の日記で設定しておき、たとえば「Aキーを押す」と書く時に「<kbd>A</kbd>キーを押す」とすると、「A」の部分がキーのような見栄えとなる寸法。なかなかいい感じだ。

上のスタイルシートを少しアレンジして、自分の日記には次のスタイルを追加させてもらうことにした。

span.key {
	color: #000;
	background-color: #eee;
	font-weight: normal;
	font-style:normal;
	font-size: 90%;
	border-top:solid 1px #ccc;
	border-right:solid 2px #888;
	border-bottom:solid 4px #444;
	border-left:solid 2px #aaa;
	margin:0 2px;
	padding: 0 2px;
	vertical-align: top;
	white-space: nowrap;
}