【コピペで瞬殺】ブログ記事に使えるキーボードボタン風のデザインをCSSで作ってみた【サンプル】

投稿日： 2018年12月12日
最終更新日： 2018年12月17日

1 キーボードボタンを表現したい
2 手順
- 2.1 前提
- 2.2 CSSの準備
3 おすすめの参考書
- 3.1 HTML&CSSとWebデザインが 1冊できちんと身につく本
4 終わりに

キーボードボタンを表現したい

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

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

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

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

手順

前提

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

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

1	<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;
}

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

【コピペで瞬殺】ブログ記事に使えるキーボードボタン風のデザインをCSSで作ってみた【サンプル】

キーボードボタンを表現したい

手順

前提

CSSの準備

おすすめの参考書

HTML&CSSとWebデザインが 1冊できちんと身につく本

終わりに

CATEGORIES & TAGS