WP Demo

作成日 :

1-17.キーボード - <kbd>

wikipedia – kbd-wiki　cf. Wiki

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Control Command Shift Alt/Optipon Tab Enter/Return Delete Esc Fn 英数 かな かな Caps F1F2F3F4F5F6F7F8F9F10F11F12

mdn – kbd-mdn　cf. MDN

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Ctrl Shift Alt Tab Enter Delete Backspace Esc Home End Insert PrintScreen PageUp PageDpwn Fn 半角/全角 ひらがな F1F2F3F4F5F6F7F8F9F10F11F12

Mac – kbd-wiki kbd-wiki-alt

EscF1F2F3F4 F5F6F7F8F9 F10F11F12
12345 67890 -^¥Delete
TabQWER TYUIO P@[Enter
ControlASDF GHJKL ;:]Return
ShiftZXCV BNM,. /_Shift
CapsAlt/
Option ⌘英数Space かな⌘Fn ▲ ◀︎▼▶︎

Mac 黒 – kbd-wiki kbd-wiki-alt kbd-wiki-alt-black

EscF1F2F3F4 F5F6F7F8F9 F10F11F12
12345 67890 -^¥Delete
TabQWER TYUIO P@[Enter
ControlASDF GHJKL ;:]Return
ShiftZXCV BNM,. /_Shift
CapsAlt/
Option ⌘英数Space かな⌘Fn ▲ ◀︎▼▶︎

Win – kbd-mdn kbd-mdn-alt

EscF1F2F3F4F5F6F7F8F9F10F11F12InsertDelete
半角/
全角 1234567890-^¥Back
Space
TabQWERTYUIOP@[
CapsLock
英数ASDFGHJKL;:]Enter
ShiftZXCVBNM,./\Shift
CtrlFnAlt無変換Space変換ひらがなCtrlPg Up↑Pg Dn←↓→ 
<!--🔸Mac 黒 のみ-->
<div class="kbd-mac kbd-wiki kbd-wiki-alt kbd-wiki-alt-black">
  <div class="div1">
    <kbd>Esc</kbd><kbd>F1</kbd><kbd>F2</kbd><kbd>F3</kbd><kbd>F4</kbd>
    <kbd>F5</kbd><kbd>F6</kbd><kbd>F7</kbd><kbd>F8</kbd><kbd>F9</kbd>
    <kbd>F10</kbd><kbd>F11</kbd><kbd>F12</kbd><kbd class="power-off-icon"></kbd>
  </div>
  <div class="div2">
    <kbd>1</kbd><kbd>2</kbd><kbd>3</kbd><kbd>4</kbd><kbd>5</kbd>
    <kbd>6</kbd><kbd>7</kbd><kbd>8</kbd><kbd>9</kbd><kbd>0</kbd>
    <kbd>-</kbd><kbd>^</kbd><kbd>¥</kbd><kbd class="div14">Delete</kbd>
  </div>
  <div class="div3">
    <kbd class="div1">Tab</kbd><kbd>Q</kbd><kbd>W</kbd><kbd>E</kbd><kbd>R</kbd>
    <kbd>T</kbd><kbd>Y</kbd><kbd>U</kbd><kbd>I</kbd><kbd>O</kbd>
    <kbd>P</kbd><kbd>@</kbd><kbd>[</kbd><kbd class="div14">Enter</kbd>
  </div>
  <div class="div4">
    <kbd class="div1">Control</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd><kbd>F</kbd>
    <kbd>G</kbd><kbd>H</kbd><kbd>J</kbd><kbd>K</kbd><kbd>L</kbd>
    <kbd>;</kbd><kbd>:</kbd><kbd>]</kbd><kbd class="div14">Return</kbd>
  </div>
  <div class="div5">
    <kbd class="div1">Shift</kbd><kbd>Z</kbd><kbd>X</kbd><kbd>C</kbd><kbd>V</kbd>
    <kbd>B</kbd><kbd>N</kbd><kbd>M</kbd><kbd>,</kbd><kbd>.</kbd>
    <kbd>/</kbd><kbd>_</kbd><kbd class="div13">Shift</kbd>
  </div>
  <div class="div6">
    <kbd class="div1">Caps</kbd><kbd class="div2">Alt/<br>Option</kbd>
    <kbd class="div3">⌘</kbd><kbd class="div4">英数</kbd><kbd class="div5">Space</kbd>
    <kbd class="div6">かな</kbd><kbd class="div7">⌘</kbd><kbd class="div8">Fn</kbd>
    <kbd class="div9"></kbd><kbd class="div10">▲</kbd><kbd class="div11"></kbd>
    <kbd class="div12">◀︎</kbd><kbd class="div13">▼</kbd><kbd class="div14">▶︎</kbd>
  </div>
</div><!-- /kbd-mac-black -->
COPY
・grid-template-columns
 グリッド（網目）の「列（縦枠）」の数と幅を定義

・repeat(回数, サイズ)関数
 指定のサイズを指定の回数繰り返す

・1fr
 fr：fraction（比率・分数）
・grid-area: 1 / 1 / 3 / 2; （左上から2段1列）
 上端の線 / 左端の線 / 下端の線 / 右端の線;
 1：開始行（row-start）... 1本目の横線から開始
 1：開始列（column-start）... 1本目の縦線から開始
 3：終了行（row-end）... 3本目の横線で終了
 2：終了列（column-end）... 2本目の縦線で終了
・:is()
 詳細度は引数の中の最大値
・:where()
 詳細度 0 、上書きが容易
body {min-width: 555px;}

/* 🔸Mac 黒のみ */
/* キーボード枠 */
.kbd-wiki-alt {
  padding: .7em 1em .8em;
  border: solid 1px #ddd;
  background-color: #eee;
}

/* キー */
.kbd-wiki kbd, /* wiki <kbd> より */
kbd.kbd-wiki {
  border: 1px solid #aaa;
  border-radius: 2px;
  box-shadow: 1px 2px 2px #ddd;
  background-color: #f9f9f9;
  background-image: linear-gradient(#eee, #f9f9f9, #eee);
  padding: 1px 3px;
  font-family: inherit;
  font-size: 0.7em;
}

/*🔸Mac 共通 */
.kbd-wiki.kbd-wiki-alt kbd,
kbd.kbd-wiki.kbd-wiki-alt {
  border-radius: 4px;
  padding: .1em .25em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}

/* Mac 黒 */
.kbd-wiki.kbd-wiki-alt.kbd-wiki-alt-black kbd,
kbd.kbd-wiki.kbd-wiki-alt-alt-black {
  background-color: #333;
  background-image: none;
  color: #fff;
}

/* キーレイアウト */
.kbd-mac,
.kbd-mac > div {
  display: grid;
  gap: .2em;
}

.kbd-mac > .div1 {
  grid-template-columns: repeat(14, 1fr);
}

.kbd-mac > .div2 {
  grid-template-columns: 3fr repeat(13, 2fr);
}

.kbd-mac > .div3 {
  grid-template-columns: repeat(13, 2fr) 4fr;
}

.kbd-mac > .div4 {
  display: grid;
  grid-template-columns: 4fr repeat(12, 3fr) 5fr;
}

.kbd-mac > .div5 {
  grid-template-columns: 4fr repeat(11, 2fr) 4fr;
}

.kbd-mac > .div6 {
  grid-template-columns: repeat(2, 3fr) repeat(2, 4fr) 10fr repeat(2, 4fr) repeat(4, 3fr);
  grid-template-rows: repeat(2, 1fr);
}

/* 矢印キー２段部 */
.kbd-mac .div6 .div1 {
  grid-area: 1 / 1 / 3 / 2;
}

.kbd-mac .div6 .div2 {
  grid-area: 1 / 2 / 3 / 3;
}

.kbd-mac .div6 .div3 {
  grid-area: 1 / 3 / 3 / 4;
}

.kbd-mac .div6 .div4 {
  grid-area: 1 / 4 / 3 / 5;
}

.kbd-mac .div6 .div5 {
  grid-area: 1 / 5 / 3 / 6;
}

.kbd-mac .div6 .div6 {
  grid-area: 1 / 6 / 3 / 7;
}

.kbd-mac .div6 .div7 {
  grid-area: 1 / 7 / 3 / 8;
}

.kbd-mac .div6 .div8 {
  grid-area: 1 / 8 / 3 / 9;
}

.kbd-mac .div6 .div9 {
  grid-area: 1 / 9 / 2 / 10;
}

.kbd-mac .div6 .div10 {
  grid-area: 1 / 10 / 2 / 11;
}

.kbd-mac .div6 .div11 {
  grid-area: 1 / 11 / 2 / 12;
}

.kbd-mac .div6 .div12 {
  grid-area: 2 / 9 / 3 / 10;
}

.kbd-mac .div6 .div13 {
  grid-area: 2 / 10 / 3 / 11;
}

.kbd-mac .div6 .div14 {
  grid-area: 2 / 11 / 3 / 12;
}

/*🔸🔸キー文字間隔調整 */
/*🔸列基本 */
/* 1列 */
.kbd-wiki.kbd-wiki-alt > .div1 > * {
  font-size: 0.75em;
  line-height: 1.5;
}

/* 2,3,4,5列 */
.kbd-wiki.kbd-wiki-alt > :is(.div2, .div3, .div4, .div5)  > * {
  line-height: 2.9;
}

/*🔸特殊キー */
/* 2-14, 3-1,14, 4-1,14 */
.kbd-wiki.kbd-wiki-alt > .div2 > .div14,
.kbd-wiki.kbd-wiki-alt > .div3 > :is(.div1, .div14),
.kbd-wiki.kbd-wiki-alt > .div4 > :is(.div1, .div14),
.kbd-wiki.kbd-wiki-alt > .div5 > :is(.div1, .div13) {
  font-size: 0.7em;
  line-height: 2.95;
}

/* 6-1,2,5,8 */
.kbd-wiki.kbd-wiki-alt > .div6 > :is(.div1, .div2, .div5, .div8) {
  font-size: 0.7em;
  line-height: 3.45;
}

/* 6-3,4,6,7 */
.kbd-wiki.kbd-wiki-alt > .div6 > :is(.div3, .div4, .div6, .div7) {
  font-size: 0.75em;
  line-height: 3.3;
}

/* 6-2 Alt/Option 改行処理 */
.kbd-wiki.kbd-wiki-alt > .div6 > .div2 {
  font-size: 0.5em;
  line-height: 2;
  text-align: left;
  padding-left: 0.6em;
}

/* 矢印キー */
.kbd-wiki.kbd-wiki-alt > .div6 > :is(.div10, .div11, .div12, .div13, .div14, .div15) {
  font-size: 0.5em;
  line-height: 1.7;
}

/* 矢印キー以外非表示 */
.kbd-wiki.kbd-wiki-alt > .div6 > :is(.div9, .div11) {
  visibility: hidden;
}

/* 合体キー上下 */
.kbd-wiki.kbd-wiki-alt > .div3 > .div14,
.kbd-wiki.kbd-wiki-alt > .div4 > .div14 {
  line-height: 2;
  text-align: right;
  padding-right: .9em;
}

/* 合体キー部上 */
.kbd-wiki.kbd-wiki-alt > .div3 > .div14 {
  border-bottom-right-radius: 0;
}

/* 合体キー部下 */
.kbd-wiki.kbd-wiki-alt > .div4 > .div14 {
  margin-top: -0.355em;
  padding-top: 1.5em;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
COPY