CASIO pocket computer
PB-100の宇宙

キー操作を分かりやすく伝えたい
pbKey.css

pbKey.css でプログラムの実行の手順や、実行中の操作を分かりやすく示すことができます.

さらに、pbChr.css や pbFont.css と組み合わせて使用する事で、ユーザーの理解を助けることが出来ます.

使用例

RUNモードの時にshift0でゲームを開始します.ゲームオーバー後のコンティニューはshift1になります.

Q で逃げます.46 左右に移動します.

mode.でエキストラ文字入力モードに入ります.続いてshiftJで ♥ を入力できます.

マークアップ

表示サンプルコードの例
AZ,=
<kbd class="pbKey">A</kbd>
09, ., +/
<kbd class="pbKeyBlk">0</kbd>

注意の必要なマークアップ

  1. SPC, ANS, EXE, DEL, AC と略されているキーは、音声読み上げブラウザを考慮して大文字で表記して、併せて title 属性に略されていない語を書くのが良いと考えます.
  2. mode, stop は音声読み上げブラウザを考慮して小文字で表記します.
  3. また shift キーは赤字に S では略し過ぎと考えます.shift と表記することを推奨します.function キーも同様です.
  4. 下付き文字の E は <sub> を使ってマークアップします.
表示サンプルコード
1SPC, ANS
<kbd class="pbKey" title="space">SPC</kbd>,
<kbd class="pbKey" title="answer">ANS</kbd>
EXE
<kbd class="pbKeyBlk" title="execute">EXE</kbd>
DEL, AC
<kbd class="pbKeyRed" title="delete">DEL</kbd>,
<kbd class="pbKeyRed" title="all clear">AC</kbd>
2mode, stop
<kbd class="pbKey">mode</kbd>,
<kbd class="pbKeyBlk">stop</kbd>
3shift, function
<kbd class="pbKeyS">shift</kbd>,
<kbd class="pbKeyF">function</kbd>
4E
<kbd class="pbKey"><sub>E</sub></kbd>