hamura.cssで始めるCASIO PB-100のためのHTML制作入門

CSS ライブラリ『hamura.css』や Blogger テンプレート『4bit-city』を使って PB-100 に関する Web ドキュメントを書いていくための入門記事です。

HTML 文書への hamura.css のインポートについては、Readme を参照ください。

はじめに

hamura.css は HTML で PB-100 シリーズ用の BASIC リストと操作法等を公開するための CSS ライブラリです。次の5つのスタイルがひと纏まりになっています。

1. pbList, pbList エディタ
2. pbFont
3. pbLCD, pbLCD メーカー
4. pbChr, コード一覧
5. pbKey

Blogger用テンプレート、4bit-cityについて

4bit-city は hamura.css を組み込んだ Blogger 用テンプレートです。PB-100 に関するブログを直ちに開設することができます。

hamura.css をはじめとするいわゆる CSS ライブラリを副作用無しにホームページやブログに導入することは Web 技術者でないと難しいことです。Web 技術に不案内な方は Google のブログサービス Blogger にブログを開設し、ブログテンプレートに 4bit-city を設定しましょう。このブログも 4bit-city をベースにしたものを使用しています。テキストが読みやすく、ページの読み込みも圧倒的に高速です。

共通の注意事項

日本語 Web ページでバックスラッシュ(\)を表示するためには lang=en を適宜に使用します。この指定を行っても一部の日本語フォントで ¥ が表示されるケースがあります。

<span lang="en">\</span>

また一部の記号は文字参照を使って記述します。PB-100 シリーズのフォントセットにあるものでは次の記号が該当します。

1. BASICリストを正確に美しく公開したい
pbList.css

pbList.css は pbPrinter.css の後継ライブラリです。Web フォントとリガチャ(合字)をサポートする環境では美しい PB-100 フォントで BASIC リストを表示することができます。その上 Javascript が有効な環境では、コードのハイライトをします。

また Web フォントが使えない環境では JavaScript で画像置換してフォールバックします。リガチャ非対応の環境でも Javascript でフォールバックします。CSS や JavaScript が使えない環境でも HTML として正しく、情報の欠落が無いように細心の注意を払ってデザインされています。

pbListエディタ

pbList による HTML の作成には pbList エディタを使用します。PB-100 と同じ解釈でスペースを挿入して pbList のお約束に沿った HTML を生成します。ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう。

pbList エディタは開発中です。デスクトップ用ブラウザで動作を確認しています。

2. PB-100フォントを文章の中で使いたい
pbFont.css

pbFont.css はコード片や変数、印字結果などの出力を PB-100 のルックにします。対象に応じて <code>, <var>, <samp> を使い分けます。

1. 変数には <var>
2. BASIC コマンドやプログラム片には <code>
3. 画面やプリンターへの出力結果には <samp>

マークアップ

<var class="pbFont">X$</var>

<code class="pbFont">GOTO 10</code>

<samp class="pbFont">CLEAR!!</samp>

3. 画面の様子を伝えたい・説明したい
pbLCD.css

pbLCD.css によって HTML で画面イメージを記述することができます。pbDisplay.css の後継ライブラリで表現力とアクセシビリティが向上しています。

ごく一部の CSS のサポートが不十分なブラウザに対しては JavaScript で表現を補います。また画像と CSS が使えない環境でも情報の欠落が無いように細心の注意を払って設計されています。

RUN DEG
A 1 24      

機能

1. キャラクターを透過したり、透過したキャラクターにキャラクターを重ねて、ゲームのスピード感を表現する
2. キャラクターの上下に、任意の色の吹き出しを付ける
3. 1つ以上のキャラクターに任意の色の下線を付ける

pbLCDメーカー

pbLCD によるマークアップはお約束がたくさんあるため人力で書くのは困難です。このためのツール pbLCD メーカーで HTML を作成します。ツールで生成した HTML には改行等の変更を一切加えずにコピーペーストしましょう。

pbLCD メーカーは開発中です！

4. LCDキャラクタを表示したい
pbChr.css

pbChr.css によって PB-100 の LCD キャラクタを文書中に登場させることができます。pbChr.css によるマークアップを書く際は便利なチートシートを使用しましょう。

1. キャラクタを文字通りの意図で使っている場合は <samp> でマークアップしています。
2. キャラクタに特別な役割がある場合は <dfn> を使用します。併せて title 属性に役割を書いておくのが良いでしょう。

&thinsp;<samp class="pbChr69">&hearts;</samp>に重なるとライフが回復します。

プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となってモンスターと戦います。

IE7 以下で行頭に pbChr.css を書くとテキストフローが乱れる問題の対策

IE7 以下でテキストフローの先頭に pbChr.css を書いた場合に左にズレる問題の解決法は ツールとライブラリ > hamura.css > pbChr.css > 「IE7以下で行頭に pbChr.css を書くとテキストフローが乱れる問題の対策」を参照ください。(2021/05/10)

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

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

例1 pbChr.cssと組み合わせる
キャラクターの説明とキー操作

shift0でゲームを開始します。

プレイヤーは騎士(Ω)となって魔城を探索し、幽閉されたお姫様(♥)を奪還します。 46で騎士を左右に動かしてZで剣を振ります。

<p><kbd class="pbKeyS">shift</kbd><kbd class="pbKeyBlk">0</kbd>でゲームを開始します。
<p>プレイヤーは騎士(<dfn class="pbChr6D" title="騎士">Ω</dfn>)となって魔城を探索し、幽閉されたお姫様(<dfn class="pbChr69" title="お姫様">&hearts;</dfn>)を奪還します。
<kbd class="pbKeyBlk">4</kbd><kbd class="pbKeyBlk">6</kbd>で騎士を左右に動かして<kbd class="pbKey">Z</kbd>で剣を振ります。

例2 pbFont.cssと組み合わせる
コマンドとキー操作

RUN モードで
DEFM 10EXE変数領域の確保
shift1初期化
shift0ゲーム開始

<pre>RUN モードで
<code class="pbFont">DEFM 10</code><kbd class="pbKeyBlk" title="execute">EXE</kbd>変数領域の確保
<kbd class="pbKeyS">shift</kbd><kbd class="pbKeyBlk">1</kbd>初期化
<kbd class="pbKeyS">shift</kbd><kbd class="pbKeyBlk">0</kbd>ゲーム開始
</pre>

マークアップ

pbKey.css のマークアップ表は ツールとライブラリ > hamura.css > pbKey.css に移動しました。(2021/05/10)

pbChrのコード一覧

pbChr のコード一覧は ツールとライブラリ > hamura.css > pbChr.css に移動しました。(2021/05/10)