ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
スポンサーリンク
キーボードボタンを表現したい
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
終わりに
もちろん、上記のCSSをベースにカスタマイズする事で、背景色を変えたり文字のサイズや幅も変更する事が出来ますので、自分のブログのデザインにあったキーボード風ボタンを作ってみてください♪
Travenist
Otakenist
