閉じる
閉じる

あまめも

【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. take089-thumbnail

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

  2. info

    <p>タグの改行(余白)を調整したい時は【初心者用】…

  3. 【Mac】MAMPのMySQLを使ってコマンド入力する為のパスの…

  4. Gitを使用してると「このファイルは管理しないんだけど・・・」っ…

  5. thumbnail

    WordPressでプラグインを簡単に作成する方法メモ

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

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

  1. take089-thumbnail

Twitter

ページ上部へ戻る