素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【コピペで瞬殺】ブログ記事に使えるキーボードボタン風のデザインをCSSで作ってみた【サンプル】

投稿日: 2018年12月12日
最終更新日:

スポンサーリンク

336×280




キーボードボタンを表現したい

ITやブログ、プログラミング関連の記事を書いている際に、どうしてもキーボードボタンやショートカットについて説明する事があるのですが、その際に文字だけだと直感的にわかりにくい文面になってしまいますよね。orz

例えば、Ctrl + Sを押して・・・、よりもCtrl+Sを押して・・・、の方が断然見やすい記事になります。

このキーボードボタン風の表現は、CSSで簡単に作る事が出来ます。

今回はコピペで使えるキーボード風ボタンのCSSをご紹介致します♪

手順

前提

今回は以下のようなclass属性が振られたspan要素に対するCSSを書いていきます。

CSSの準備

今回はとても簡単です。
以下のCSSをstyle.cssにコピペしてください。

たったこれだけでボタンの表現が可能になります。

fnCtrloptioncommand

おすすめの参考書

HTML&CSSとWebデザインが 1冊できちんと身につく本

終わりに

もちろん、上記のCSSをベースにカスタマイズする事で、背景色を変えたり文字のサイズや幅も変更する事が出来ますので、自分のブログのデザインにあったキーボード風ボタンを作ってみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist

お名前.comサイドバー