ITやブログ、プログラミング関連の記事を書いている際に、どうしてもキーボードボタンやショートカットについて説明する事があるのですが、その際に文字だけだと直感的にわかりにくい文面になってしまいますよね。orz

例えば、Ctrl + Sを押して・・・、よりもCtrl+Sを押して・・・、の方が断然見やすい記事になります。

このキーボードボタン風の表現は、CSSで簡単に作る事が出来ます。

今回はコピペで使えるキーボード風ボタンのCSSをご紹介致します♪

前提

今回は以下のようなclass属性が振られたspan要素に対するCSSを書いていきます。

<span class="keyboardBtn">{文字列}</span>

CSSの準備

今回はとても簡単です。
以下のCSSをstyle.cssにコピペしてください。

span.keyboardBtn {
	padding: 0 10px;
	margin: 5px 10px;
	background: #EDEDED;
	border-radius: 5px;
	box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
	color: #808080;
	text-align: center;
}

たったこれだけでボタンの表現が可能になります。

fnCtrloptioncommand

もちろん、上記のCSSをベースにカスタマイズする事で、背景色を変えたり文字のサイズや幅も変更する事が出来ますので、自分のブログのデザインにあったキーボード風ボタンを作ってみてください♪