CSSで簡単にキーボードショートカットの表記を見やすくする方法

CSSでキーボード表記を見やすくする

ブラウザでのページの保存はCtrl+Sを使用

ブラウザでのページの保存はCtrl+Sを使用

上記のどちらが見やすいだろうか？

ほとんどの人はCSSで見た目がキーボードのようになっている後者のほうが見やすいはず。

<span class="key"></span>で囲み、下記のCSSを読み込むだけなのでレンタルブログサービスでも簡単に適用できる。キーボードの説明は他の文章と混在すると可読性が低下するのでCSSで見やすくしておくと読みやすくなる。

.key {
  margin: 0 3px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #E0E0E0;
  border-bottom-width: 2px;
  background: #F0F0F0;
  background: -ms-linear-gradient(top, #F0F0F0, #FCFCFC);
  background: -moz-linear-gradient(top, #F0F0F0, #FCFCFC);
  background: -webkit-gradient(linear, center top, center bottom, from(#F0F0F0), to(#FCFCFC));
  background: linear-gradient(top, #F0F0F0, #FCFCFC);
  font-family: Arial
}