コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

ShiftとかAltとかCtrlとかの入力に関するキーの内容のデザインなんてできないかなと調べていた話

そういえばKBDタグなんてものがあったのを思い出しました

HTMLのタグって100数個ぐらいあるんですけど、実際によく使うのなんて数十個なのでたまにリファレンス見ると「あーこんなのあったなー」ってなるのが多い。そんなわけで思い出したかのように、そんなタグあったなということで書き殴ってみる。

実際は、技術ブログでもないのに僕のブログではキー入力に関する内容をよく書くので忘備録的に書いておこうという魂胆です。Blender系の記事を書くとキー入力関連のことがよく埋まる…。ショートカットキー覚えないとアレやっていけないですよ(愚痴)。

今後、こちらのタグを覚えているかは別としてCSSの方はいじります。こうすることで記事を一個一個修正せずとも一括で直せるようになるので便利です。覚えて使わなければ意味ないのですけどね……。

kbdタグ

❏ kbdタグ
 … ユーザーが入力する内容であることを示すタグ

例えば、以下のようにCtrlキーとF5キーを入力してもらいたい時に下のようにマークアップするそうです。

<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>

入力してもらいたいキーが複数あるときなどは入れ子にして使うっぽいです。この辺は調べないと適当になりがちですね。こちらのタグ、音声コマンドなどの入力方法にも対応しているとのことなのですが、いまいちどんなときに使うものなのかピンときてないです。


ちなみに、こちらを入力するとどうなるかはご自分の目で確かめてください。今見ているブラウザで実行可能です。いいですか Ctrl+F5 キーを入力ですよ。

というわけで、kbdタグをカスタマイズしました。これ以降の記事はこれでやっていこうと思います。でも作ったはいいが、見栄えがあまり良くない気がする。まあ、随時カスタマイズしていきますのでよろしくおねがいします。