1. HOME
  2. 開発・ブログ運営
  3. HTML/CSS
  4. CSS で Mac キーボード風の装飾
2013年04月20日
ブログ記事執筆には欠かせない Chrome エクステンション「 ...
2015年05月27日
CSS で Mac キーボード風の装飾
2012年06月10日
list-style-imageで指定した画像がちょっとズレる ...
2013年11月30日
Nexus 5 (Android4.4)でブログ記事を書いてみ ...
2012年02月12日
フッターのレイアウトが崩れてちゃんと表示されない(泣) ...
2014年09月23日
CSS と Javascript の読み込み順序を変えてみた ...

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

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

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

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

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

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


CSS の追加

CSS ファイルに、


を追加します。


使い方

装飾したい文字を


で囲います。

fなら、

な感じです。

でわでわ。







この記事にコメントする





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