独自のキーボードをWebサイトに設定している場合があると思います。そのようなときは、サイトに訪れる人が操作を理解できるようにキーボードショートカット一覧を表示しておくべきです。
今回は、コピペで簡単に作れるキーボードショートカット一覧の作り方を紹介します。
キーボードショートカット一覧の完成形
完成形するとこんな感じになります。
HTMLとCSSでショートカット一覧の見た目を作る
キーボードショートカットの見た目を作ります。次のようなHTMLファイルとCSSファイルを作成してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>キーボードショートカット一覧</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="KSL_display-button">キーボードショートカットの一覧を表示</button>
<div class="KSL_screen-overlay">
<div class="keyboard-shortcut-list">
<div class="KSL_header">キーボードショートカット</div>
<div class="KSL_body">
<!-- ここにショートカットの説明とショートカットの組み合わせが追加されていく -->
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>.KSL_display-button {
margin: 20px;
border: 0;
padding: 10px 16px;
cursor: pointer;
}
.KSL_screen-overlay {
position: fixed;
display: block;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100000;
background-color: rgba(0,0,0,.35);
opacity: 1;
transition: all .3s ease;
}
.keyboard-shortcut-list {
margin: auto;
margin-top: 80px;
max-width: 80%;
min-width: 360px;
background-color: white;
}
.KSL_header {
border-bottom: 1px solid #c7c7c7;
padding: 20px 32px;
font-weight: bold;
}
.KSL_body {
max-height: 400px;
padding: 0 32px 30px;
overflow-y: scroll;
}
.KSL_section {
display: flex;
border-bottom: 1px solid #c7c7c7;
padding: 10px;
font-size: 13px;
}
.KSL_section:last-child {
border-bottom: none;
}
.shortcut-description {
flex: 1;
}
.shortcut-turm {
display: flex;
align-items: center;
}すでに作っているページに取り込む際は、上に書かれているHTMLのうち必要な部分だけを使います。必要なのはHTMLのうち、次の２つの要素とその中身だけです。コピペして使ってください。
- <button class=”KSL_display-button”>
- <div class=”KSL_screen-overlay”>
JavaScriptでショートカット一覧を表示する動作を作る
・ボタンを押したらキーボードショートカット一覧を表示する
・キーボードショートカット一覧の外をクリックしたら非表示にする
これらの動作をJavaScriptで実装します。
//表示するキーボードショートカットを設定する
const shortcut = [
{
description: "キーボードショートカット一覧の表示/非表示",
combination: "Shift + Alt + H"
}
]
// KSL_bodyの中にショートカットの情報を入れる
const KSLBody = document.querySelector('.KSL_body');
for (let i = 0; i < shortcut.length; i++) {
const section = document.createElement('div');
section.className = 'KSL_section';
const description = document.createElement('div');
description.className = 'shortcut-description';
description.textContent = shortcut[i].description;
const combination = document.createElement('div');
combination.className = 'shortcut-combination';
combination.textContent = shortcut[i].combination;
section.appendChild(description);
section.appendChild(combination);
KSLBody.appendChild(section);
}
const displayButton = document.querySelector('.KSL_display-button');
displayButton.addEventListener('click', (e) => {
overlay.style.display = 'block';
setTimeout(() => {
overlay.style.opacity = 1;
}, 200);
});
const overlay = document.querySelector('.KSL_screen-overlay');
document.addEventListener('click', (e) => {
if (!e.target.closest('.keyboard-shortcut-list') && e.target !== displayButton) {
// リストの外側をクリックしたとき
overlay.style.opacity = 0;
setTimeout(() => {
overlay.style.display = 'none';
}, 200);
}
});キーボードショートカットの登録する
先程のJavaScriptファイルの中でキーボードショートカットの説明とキーの組み合わせを設定できます。
//表示するキーボードショートカットを設定する
const shortcut = [
{
description: "キーボードショートカット一覧の表示/非表示",
combination: "Shift + Alt + H"
}
]
// KSL_bodyの中にショートカットの情報を入れる
const KSLBody = document.querySelector('.KSL_body');
// =========================== 略 ============================
shortcutという名前の配列の中に、キーボードショートカットを追加していきます。配列にオブジェクトを追加する形です。
追加していくオブジェクトには次の項目（プロパティ）を設定します。
description → キーボードショートカットショートカットの説明
combination → キーの組み合わせ
//表示するキーボードショートカットを設定する
const shortcut = [
{
description: "キーボードショートカット一覧の表示/非表示",
combination: "Shift + Alt + H"
},
//ここから
{
description: "ショートカットの説明",
combination: "ショートカットキー"
}
//ここまで追加
]
// KSL_bodyの中にショートカットの情報を入れる
const KSLBody = document.querySelector('.KSL_body');
// =========================== 略 ============================
shortcut配列の１つ目の要素は、SHift + Alt + H でキーボードショートカット一覧の表示非表示ができるショートカットの例です。
これを参考にするとわかりやすいかもしれません。
コメント