CSSプレイグランドにようこそ

このページの情報は古くなっています．現在はより高機能、よりセマンティックなマークアップ、そのうえ対応ブラウザも多い、後継の hamura.css を使用しましょう．

PB-100の宇宙で使われているブラウザ上で PB-100 を表現するテクニックをご紹介します．

pbDisplay.css

PB-100用ゲーム作品の公開には、プログラムリストの掲載だけでは不十分です．アルファベットや記号の組み合わせで描かれたゲーム画面にどんな意図があるのか？ユーザーに伝えるには、画像による説明が効果的です．

PB-100の宇宙ではこれまで、ペイントソフトを使ったりまた Pocket BASIC Simulator のスナップショット機能を利用したりしてきました．しかし、画像を使用する以上の方法では、データの作成・更新の負担が大きく、また構造化されたテキスト情報を伝達する、という HTML の長所を生かせていませんでした．

現在PB-100の宇宙では、PB-100 の画面イメージを HTML タグによって記述しています．これにより制作・保守効率が大幅に改善された上、PB-100 の画面イメージを音声読み上げブラウザや検索クローラに伝えることができます．

>>もっと読む

PB Display Image Maker

pbDisplay.css を用いた HTML タグセットは、PB Display Image Maker を使って容易に制作することができます．

Web ブラウザから利用できる JavaScript アプリケーションなので、Web サイト制作のペースを乱すこともありません．

>>もっと読む

pbPrinter.css

>>もっと読む

PB-100キャラクタの表示

>>もっと読む

ブラウザ対応表