1. HOME
  2. 開発・ブログ運営
  3. HTML/CSS
  4. CSS で Mac キーボード風の装飾
2012年02月12日
フッターのレイアウトが崩れてちゃんと表示されない(泣) ...
2015年05月27日
CSS で Mac キーボード風の装飾
2014年09月19日
ref=canonical 属性はむやみに付けない方がよいみた ...
2012年08月24日
Google Chrome 以外では HTML5 の < ...
2012年06月10日
list-style-imageで指定した画像がちょっとズレる ...
2016年07月27日
モバイルページ表示が4倍速になる!? AMP(Accelera ...

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.