投稿日：
2018年12月12日
最終更新日：
【コピペで瞬殺】ブログ記事に使えるキーボードボタン風のデザインをCSSで作ってみた【サンプル】
YouTubeも見てね♪
ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
キーボードボタンを表現したい
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をベースにカスタマイズする事で、背景色を変えたり文字のサイズや幅も変更する事が出来ますので、自分のブログのデザインにあったキーボード風ボタンを作ってみてください♪