閉じる
閉じる

あまめも

【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. 「Git」を使ってみてコマンドを忘れるのでメモ2

  2. thumbnail

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

  3. gitのリモートリポジトリをDropboxで作成してpushする…

  4. 文字

    【HTML】略語の正式名称を簡単に表示する方法

  5. アイコン

    HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】

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

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

  1. ノマンカクワンカ外観
  2. 回転寿司 トリトン 看板

Twitter

ページ上部へ戻る