スポンサーリンク
キーボードボタンを表現したい
ITやブログ、プログラミング関連の記事を書いている際に、どうしてもキーボードボタンやショートカットについて説明する事があるのですが、その際に文字だけだと直感的にわかりにくい文面になってしまいますよね。orz
例えば、Ctrl + Sを押して・・・、よりもCtrl+Sを押して・・・、の方が断然見やすい記事になります。
このキーボードボタン風の表現は、CSSで簡単に作る事が出来ます。
今回はコピペで使えるキーボード風ボタンのCSSをご紹介致します♪
手順
前提
今回は以下のようなclass属性が振られたspan要素に対するCSSを書いていきます。
|
1 |
<span class="keyboardBtn">{文字列}</span> |
CSSの準備
今回はとても簡単です。
以下のCSSをstyle.cssにコピペしてください。
|
1 2 3 4 5 6 7 8 9 |
span.keyboardBtn { padding: 0 10px; margin: 5px 10px; background: #EDEDED; border-radius: 5px; box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5); color: #808080; text-align: center; } |
たったこれだけでボタンの表現が可能になります。
fnCtrloptioncommand
おすすめの参考書
HTML&CSSとWebデザインが 1冊できちんと身につく本
終わりに
もちろん、上記のCSSをベースにカスタマイズする事で、背景色を変えたり文字のサイズや幅も変更する事が出来ますので、自分のブログのデザインにあったキーボード風ボタンを作ってみてください♪
Travenist
Otakenist
