頭ん中 タイトルがわかりにくいかな。まあいいや。
「方法」などとエラそうに言うほどのものじゃないんだけど
やってみたら何かそれっぽく見える気がしてきたので一応書いときます。
要するに何がやりたいのか
ブログなんかの文中で
「このキーを押すんだよ」ということを伝えようとして
そのキーに刻印された文字を示すことがある。
でもそのままではキーっぽく見えないので、
それ用のスタイルを用意して
何となくキーに見えるようにしたい。
つまりこのようなことが言いたいときに
Shift + ⌘ + 3 で画面をキャプチャーします。
このように表示したいということ。
Shift + ⌘ + 3 で画面をキャプチャーします。
CSS 非対応のフィードリーダーで読んでたらわからんと思うのでサイトに来てください。
あと IE6 だと ⌘ ←が出ませんねごめんなさい。”Command” と読み替えてください。
どのタグを使うか
あまり使われてない気がするけど、
(X)HTML に <kbd> というタグがありますね。
別に俺タグじゃなくてちゃんと W3C 推奨。
kbd は KeyBoarD の略なので
まさにこれだと思って使ってたんだけど、
定義を見たらどうもちょっと違う気がしてきた。
Paragraphs, Lines, and Phrases
- KBD:
- Indicates text to be entered by the user.
「ユーザーが入力すべき文字列を示す」とのことなので、
これは単一のキーを指すのではなく
↓このようなことを書くために使うものですね。
MacのFinderで不可視ファイルを見えるようにする方法 – 頭ん中
ターミナルを起動して、こう入力する。
defaults write com.apple.finder AppleShowAllFiles true
なのでキーそのものを示すために <kbd></kbd> の中に入れるのは
本来定義された使い方ではないみたい。
<kbd> にそれ用のスタイルを指定してしまうと、
入力文字列を示したいときにまで適用されてしまうし。
というわけでもう簡単に
<span> にクラス名をつけることにした。
CSS をあてる
あとはそれっぽくなるように CSS を書いてみる。
.key {
margin: 0 3px;
padding: 0 5px;
border-width: 1px 2px 2px 1px;
border-style: solid;
border-color: #999;
background-color: #F5F5F5;
font-family: monospace;
}
- 左右にちょっと margin. 普通は前後にスペースを入れるからマージンはいらないとおもったんだけど、カッコの中に書くときはスペースをつけないから、左右を空けるようにしないとカッコとくっついてかっこ悪い。シャレではない。決して。
- 枠との間が詰まりすぎると見づらいので左右に padding.
- 枠は右と下だけ太めにすると何となく立体感が出ませんか。
- 背景色をつけたのは目の間にあるのが黒の MacBook だから何となく。
- 形を整えるために等幅フォント。
というところ。
あと背景に画像でもつけるとかっこよくなると思うんだけど
めんどくさいのでそこまではしなかった。
自分ではそれっぽく見えてるんだけどどうでしょう。
end
