閉じる
閉じる

あまめも

【HTML】入力する文字をキーボード風に表示したい【CSS】

キーボード

こんにちは! あますた(@amaguristar)です。

  • 「Controlボタンなどをキーボードっぽく表示したい!」

そんな時ありませんか? 専用のタグを使うと楽ですよ。

 

<kbd>タグを使う

<kbd>タグは、基本的にユーザーが入力する内容を示す際に使用します。

通常は、等幅フォントで表示されますが、cssを設定して見た目もよりキーボードらしく設定します。

kbd {
    margin: 0 0.5em; /* 左右にだけマージンを設定 */
    padding: 0.25em 0.625em; /* 上下に1/4文字分,左右に1/2より少し大きいパディングを設定 */
    border: 1px solid #d1d1d1; /* 周りを囲んで */
    border-radius: 5px; /* 角を丸める */
    background-color: #dbe4e7; /* 塗り潰し */
}

上記cssを適用すると下記の様に表示可能です。

文字のコピーは、Control+Cです。

マークを使ってより一層キーボードっぽくすると、+Cとなります。

あとは好みでカスタムして下さい。

関連記事

  1. 色々とあったのでWordPressをエディタで書こうとしてとりあ…

  2. 雑誌

    「一文字だけ雑誌の様におしゃれに大きく表示したい」直ぐに解決可能…

  3. まとめ

    「Git」の履歴が見づらいのでまとめたい、そんな時の修正方法

  4. 【基礎】「MySQL」を使い始めたのは良いのですがコマンドを忘れ…

  5. [甘]パンくずリストつけてみた。

  6. edit

    「Git」のコミットメッセージを間違えた、そんな時の修正方法

こんなメモもありますよ♪

  1. 七越製菓 手揚げもち

Twitter

ページ上部へ戻る