電脳TIMES

ゲーム、プログラミング好きのブログです。関連する情報を発信していきます。

【CSS】実際のキーボードっぽく表すためのコードを紹介【ショートカット紹介などに便利】

【CSS】実際のキーボードっぽく表すためのコードを紹介【ショートカット紹介などに便利】
キーボードで入力する「キー」を表したいときに使えるソースコードを紹介します。
よく見るこういうやつ→aです。

ショートカットキーの紹介や、その他画面操作の解説をするときに便利です。




CSSを紹介

CSSに記述するソースコードは以下の通りです。

kbd {
margin: 0 0.5em;
padding: 2px 0.6em;
border: 1px solid #d1d1d1;
border-radius: 5px;
background-color: #dbe4e7;
}

このままコピペで使ってください。

使用例

以下のような感じで使ってみてください。

記事作成時

=====================================
☆便利なショートカットを紹介!

①コピー
・windowsの場合:<kbd>Ctrl</kbd> + <kbd>C</kbd>
・Macの場合:<kbd>command</kbd> + <kbd>C</kbd>

②ペースト/貼り付け
・windowsの場合:<kbd>Ctrl</kbd> + <kbd>V</kbd>
・Macの場合:<kbd>command</kbd> + <kbd>V</kbd>

=====================================

見え方

=====================================
☆便利なショートカットを紹介!

①コピー
・windowsの場合:Ctrl + C
・Macの場合:command + C

②ペースト/貼り付け
・windowsの場合:Ctrl + V
・Macの場合:command + V

=====================================

いかがでしょうか。
キーボードっぽくていい感じじゃないですか?笑

色々な使い道があると思うので、コピペして活用してみてください。

こういう感じのCSSをコーディングしたいときに、参考になる本を紹介しておきます。
かゆいところに手が届くコード満載です。
実際の仕事にも使えるのでオススメです。


最後まで読んでいただき、ありがとうございました。



広告上に「スポンサーリンク」と入れたいときのHTMLはこちら

www.denno-times.com