【HTML×CSS】<kbd>タグをいじってみた

ブログの書き方について調べていたら、<kbd>タグというものを知りました。

普段は基本Markdownで書いていて、足りない部分をHTMLタグで補うようしている*1のですが、コードブロックとボタンが書き分けられないなーとずっと疑問に思っていたのです。

こんな便利なタグがあったのですね…

早速デザインCSSを修正したので、それを記しておきたいと思います。

タグの使い分け
<kbd>タグで遊ぶ。
ついでに<code>タグも調整。
- コード
後記
参照
注釈

タグの使い分け

コードブロック

また、コードブロックは、HTMLの場合は<code>と</code>で挟みます。

<code>文中のコード</code>

Markdownなら、`*2で。

`文中のコード`

ボタン

ボタンは<kbd>と</kbd>で挟みます。

<kbd>ボタン</kbd>

Markdownには、残念ながらこれに相当する記法がありません…

<kbd>タグの使い方

上では<kbd>で挟むと書きましたが、正しくは二重に挟んで使うのだそうです。

【例】Ctrl+Shift+Delete

<kbd><kbd class="xxxx">Ctrl</kbd>+<kbd class="xxxx">Shift</kbd>+<kbd class="xxxx">Delete</kbd></kbd>

ボタンを1つずつ生成して、さらに全体を囲むイメージですかね。

<kbd>タグで遊ぶ。

少し検索した中で、2つほど試してみました。

【参考】本文のフォント
※こちらを基準にサイズを調整しています。

font-family	Noto Sans CJK JP Medium
font-size	16px
line-height	180%

Mac風

おしゃれなブログに使えそうです。

サンプル

空くのかな
空くのかな
どのくらい空くのかな

改行するとどのくらい空くのかな
押せないよ！→Alt+Tab←押せないよ！
改行するとどのくらい空くのかな

コード

.mac-key {
  /* ----Box Properties---- */
  display      : inline-block;
  padding      : 0.05em 0.6em;
  margin       : 0px 4px;
  background   : #fff;
  border-radius: 4px;
  box-shadow   : 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
  
  /* ----Text Properties---- */
  font-family: Helvetica, serif;
  text-align : center;
  color      : #666;
}

エンボス加工風

文字部分が凹んで見えるので、より立体的です。

クリックするとボタンも凹むので、無限プチプチみたいで気持ちいいです。
何も起きないけど。笑

色はグレー系にしてみました。

サンプル

空くのかな
空くのかな
どのくらい空くのかな

改行するとどのくらい空くのかな
これは押せるよ！→Alt+Tab←これは押せるよ！
改行するとどのくらい空くのかな

コード

.btn-square-emboss {
  display        : inline-block;
  padding        : 0.05em 0.6em;
  margin         : 0px 4px;
  text-decoration: none;
  background     : #f0f0f0; /*ボタン色*/
  color          : #666666; /*ボタン色より暗く*/
  box-shadow     : 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
  border-bottom  : solid 3px rgba(0, 0, 0, 0.3);
  border-radius  : 3px;
  font-size      : 90%;
  text-shadow    : 1px 1px 1px #ffffff;
}

.btn-square-emboss:active  {
  -webkit-transform: translateY(4px);
  transform        : translateY(4px);
  box-shadow       : 0px 1px 0px rgba(0, 0, 0, 0.3);
  border-bottom    : solid 3px rgba(0, 0, 0, 0.1);
}

注意

元のコードだと.btn-square-emboss:activeの方でborder-bottom: noneと設定されていて、Enterのように1行にボタンが1つだけだと、ボタンを押すたびにそれ以下の画面が揺れちゃうようです。

そのため、ボタン下側の影の幅はそのままに、若干明るくして揺れないように調整してみました。

ただ、「下にズレてる」感が否めないのですが…

文字列を選択できなくする

ちなみに、お気づきの方もいるかと思いますが、実は後者の方は文字列の選択（≒コピペ）が出来ないようにしてあります。

連打すると青い範囲が重なってしまうのが、個人的にしっくり来なくて。

コピペは出来ないけど、これでF5連打し放題です。笑

コード

  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

ついでに<code>タグも調整。

初期設定だとボタンとコードブロックが文中に並んだときに後者が埋もれてしまうので、黒っぽくしてみました。色は調整中です。

フォントは過去記事の流用です。

コード

/*--------------------------------------
  <code>タグ（文中のコード）
--------------------------------------*/
.entry-content code {
  border-radius   : 3 px;
  font-size       : 90 %;
  font-family     : Consolas,
                    'Meiryo UI',
                    'メイリオ',
                    Meiryo,
                    '游ゴシック Medium',
                    '游ゴシック体',
                    'Yu Gothic Medium',
                    YuGothic,
                    'ヒラギノ角ゴ ProN',
                    'Hiragino Kaku Gothic ProN',
                    'ＭＳ Ｐゴシック',
                    'MS PGothic',
                    sans-serif;
  color           : #ffffff; /* 文字色 white */
  background-color: #666666; /* 背景 black */
}