ブログなどで、キーボードショートカットの解説表示を見栄え良くする

ブログなどでキーボードショートカットの解説する際、『command』や『shift』などが頻繁に出てきます。

これらの表示にCSSを適用して、見栄え良く、なおかつわかりやすくします。

⌘ command+shift+3
↑こんなやつ。

タグとCSS

文中に出てくるので基本的にはインライン要素が良さそうです。
<span>要素でも良いですが、今回は<kbd>を利用。

<kbd>要素は、keyboardの略で、マークアップされた部分が、キーボードなどにより入力される文字である、的な意味合いで利用します。
デフォルトスタイルとしては、等幅フォントで表示。

CSSの記述

kbd {
	color: #333;
	border: solid 1px #999;
	border-width: 1px 2px 2px 1px;
	margin: 0 3px;
	padding: 1px 5px;
}

HTMLの記述

<p>Macでスクリーンショットの撮り方は、<kbd>⌘ command</kbd>+<kbd>shift</kbd>+<kbd>3</kbd>です。</p>

表示結果

Macでスクリーンショットの撮り方は、⌘ command+shift+3です。

おまけ、⌘ コマンドキー( command )の記号の出し方

コマンドキー( command )の記号はFinderの『編集』メニューから『特殊文字…』を選択。

その後、記号の中から該当のマークを選びます。頻繁に使う場合、IMEの単語登録に入れておくと良さそうです。

Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

1 個のコメント

  • Ubuntu キーボードの言語切替方法(ショートカット設定)

    以前に外国語でキーボード入力するために、他の言語を追加設定する方法について、取り上げてみました。Ubuntu 他言語でキーボード入力追加設定した言語に、ショートカットキーで切り…

  • コメントを残す

    メールアドレスが公開されることはありません。

    CAPTCHA


    ABOUTこの記事をかいた人

    株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。