投稿日:
2018年12月12日
最終更新日:
【コピペで瞬殺】ブログ記事に使えるキーボードボタン風のデザインをCSSで作ってみた【サンプル】
YouTubeも見てね♪
Anker PowerCor
旅行には必須の大容量モバイルバッテリー!
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう!
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です!
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし!
レッドブル エナジードリンク 250ml×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をベースにカスタマイズする事で、背景色を変えたり文字のサイズや幅も変更する事が出来ますので、自分のブログのデザインにあったキーボード風ボタンを作ってみてください♪