[CSS]キーボードのキートップのデザインを適用するスタイルシート -KEYS.css

ショートカットの表記に便利な、文字にキートップのデザインを適用するスタイルシートを紹介します。

KEYS.css

[ad#ad-2]

キーボードのカラーはダークとライトの2種類が用意されています。
また、キートップの文字はテキストデータなので、長い文字列や日本語でも表示されます。

キーボードのスタイルシートを適用するのは、2種類の方法が用意されています。

HTML

kbd要素を使用

class名を使用

classは複数用意されており、またオリジナルのclass名で使用することも可能です。