はじめに

2021年を振り返ると、下半期は平日のほぼ全てで某企業用のパソコンキッティング業務を行い、平日夜間か土日にコーディング作業を行っていました（だから最近当サイトの更新が滞っていました）。

2022年の正月休みの間にふと下記のYoutube動画を見て、面白そうだから真似てみて、色々とアレンジもしてみましたので、せっかくのなので紹介したいと思います。

実際にできたもの

（虫めがね部分は再現していません）

上記の作り方についてはリンク先のYoutubeの動画をご覧ください。

実際に作ってみて「これはテキストボックスだけど、応用したらキーボード風のボタンがCSSだけで作れそう。」と思い立ったのが今回の作業の始まりです。

ちなみに、上記のデザインを参考に、マウスオーバーでボタンが沈む風のリンクボタンも作成してみましたが、。

実際にできたもの

やりたいこと

目次

Apple iMac純正キーボードモチーフ

Apple純正キーボード風のデザインは、白系の背景にbox-shadowで若干の立体感を付ければそれっぽくなります（insetで上にも白いハイライトを入れています）。

ただし、コンテンツの背景が白だとボタンの背景と同化してしまうので、ボタン部分は白に近いグレーにしつつ、グラデーションをかけることでも立体感を少し出しました。

HTML

<p><span class="test01">Ctrl</span>+<span class="test01">C</span>でコピーのキーボードショートカット</p>
<p><span class="test01">Ctrl</span>+<span class="test01">V</span>でペーストのキーボードショートカット</p>

CSS

.keybord01 {
　position: relative;
　display: inline-block;
　color: #666;
　background-image: linear-gradient(#f8f8f8 98%, #aaa);
　padding: 7px 14px;
　box-sizing:border-box;
　margin:0 0.5em;
　border-radius: 5px;
　box-shadow:0px 0px  1px 1px rgba(0,0,0,.2) , inset 1px 1px 0 #fff;
}

できあがったもの

HP社ノートパソコン　ENVYモチーフ

基本的にはiMacモチーフの色違いなのですが、それだけだと面白くないので「かな」表記を追加してみました。

かな部分はposition:absoluteで配置します。
HTMLソースを見たら分かるのですが、spanを入れ子にしています。

HTML

<p><span class="keybord02">Ctrl</span>+<span class="keybord02">A<span class="kana">ち</span></span>で全選択のキーボードショートカット</p>
<p><span class="keybord02">Ctrl</span>+<span class="keybord02">S<span class="kana">と</span></span>で上書き保存のキーボードショートカット</p>

CSS

.keybord02 {
　position: relative;
　display: inline-block;
　color: #fff;
　background-image: linear-gradient( #444 98%, #222 );
　padding: 7px 14px;
　box-sizing:border-box;
　margin:0 0.5em;
　border-radius: 5px;
　box-shadow:1px 1px 0 rgba(0,0,0,.9) , inset 0 1px 0 #fff;
}
.keybord02 .kana {
　position: absolute;
　bottom: -4px;
　right: 2px;
　font-size: 0.8rem;
}

できあがったもの

アーキサイト社　MaestroFLモチーフ

最後はアーキサイト社のメカニカルキーボード「MaestroFL」のデザインを参考に作成しました。

凹凸のある、いかにもなフォルムのキーボードをどのように表現するか悩みましたが、spanの入れ子構造と疑似要素で再現してみました（入れ子にしないと疑似要素がテキスト部分より前面に来てしまう）。

入れ子の親span class="keybord03"疑似要素で外側のデザインを作っています。:beforeで右上方向にグラデーションをつけつつ、:afterで左下のハイライトを作りました。

HTML

<p><span class="keybord03"><span class="text">Ctrl</span></span>+<span class="keybord03"><span class="text">Alt</span></span>+<span class="keybord03"><span class="text">Delete</span></span>でタスクマネージャーを呼び出す</p>
<p><span class="keybord03"><span class="text">Alt</span></span>+<span class="keybord03"><span class="text">F4</span></span>でアクティブなウィンドウを閉じる</p>

CSS

.keybord03 {
　display: inline-block;
　position: relative;
　margin:0 1em;
}
.keybord03:before {
　position: absolute;
　content: '';
　width: calc( 100% + 20px );
　height: calc( 100% + 12px );
　top: -2px;
　left: -10px;
　background-image: linear-gradient(to top right, #bcd2df 40%, #89afbc 55%);
　border-radius: 6px;
　z-index: 1;
}
.keybord03:after {
　overflow: hidden;
　position: absolute;
　content: '';
　width: 7px;
　height: 50%;
　left: -13px;
　bottom: -10px;
　background: rgba(255,255,255,.6);
　transform-origin: bottom;
　transform: skew(-45deg);
　filter: blur(2px);
　z-index: 1;
}
.text {
　position: relative;
　display: inline-block;
　color: #0d1c31;
　background-image: linear-gradient(to right,#a2b8c3,#b0c6d3,#bcd2df);
　padding: 5px 12px;
　box-sizing:border-box;
　border-radius: 6px;
　box-shadow:2px 2px 1px #99afbc , inset 1px 1px 0 rgba(255,255,255,.4);
　z-index: 2;
}

できあがったもの

という正月の暇つぶしでした。