2018年08月01日
Docker for Mac を使って WordPress の...
2018年07月29日
Docker for Mac のインストール
2018年07月08日
Docker 便利コマンドあれこれ
2018年07月08日
オライリーの Docker 本(Docker Up &...
2018年07月05日
iPad mini 2 を購入しました
2018年07月04日
Docker で Jenkins するときのあれこれ

HOME > カテゴリ(HTML/CSS)の記事

CSS で Mac キーボード風の装飾



久しぶりに CSS をさわってみました。今更ながら Mac 風なキーボード装飾。ちょっとは記事が見やすくなるでしょうか。

ブログ記事で操作説明とかを書く場合に、「f」キーを押して、とか押下するキーを「」で囲って書いていましたが、ちょっと複雑になったりするとめっちゃ見にくい。

ってことで、CSS で装飾してみた。

fとかCtrlみたいに表示できます。

MacBook AirでもWordPressみたいなのでもOK。


CSS の追加

CSS ファイルに、

.keyboard {
	height: 30px;
	min-width: 12px;
	padding: 0px 10px;
	margin: 5px 3px;
	background: #ffffff;
	border-radius: 3px;
	border-top: 1px solid #F5F5F5;
	box-shadow: 0 0 25px #F2F1F1 inset, 0 1px 0 #F2F1F1, 0 2px 0 #F2F1F1, 0 2px 1px #333333;
	color: #302E2E;
	font: 14px arial;
	text-align: center;
	line-height: 30px;
	display: inline-block;
}

を追加します。


使い方

装飾したい文字を



で囲います。

fなら、

f

な感じです。

でわでわ。






この記事にコメントする





Copyright © 2012 - 2013 MacBook Air とWordPressでこうなった All rights reserved
Designed by Theme Junkie. Powered by WordPress.