閉じる
閉じる

あまめも

【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. タイプライター

    段落の始まりを一文字自動でインデントする

  2. 「Git」を使ってみてコマンドを忘れるのでメモ2

  3. take089-thumbnail

    WaznFilm更新】「Font Awesomeで何ができるの?…

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

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

  6. 良いか悪いかは別として複数サイトで同じ「css」を参照させてみま…

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

  1. IKEA

Twitter

ページ上部へ戻る