CASIO pocket computer
PB-100の宇宙
ホーム / ツールとライブラリ / hamura.css

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

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

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

表示の例

RUN DEG
A 1 24

pbLCD.css の提供する機能

  1. PB-100 シリーズの画面イメージを HTML で記述出来る．CSS が無効な環境でも情報の欠落を最小限に抑えるように設計されています．
  2. キャラクタを透過する．
  3. ゴースト．透過したキャラクタに他のキャラクタを重ねる．
  4. レンジ．複数桁に跨る下線を表示して説明対象の範囲を示す．下線の色は複数から選べる．
  5. ツールチップ．ツールチップをキャラクタの上下に付けて説明を加える．また、ツールチップの横位置はレンジ内の任意の桁とその桁の間に設定できる．下線と同じ色が設定される．

JavaScript が有効の環境で提供される機能

  • :before, :after 疑似要素に非対応の環境を検出して、同等の要素を挿入してフォールバックします．
  • :before, :after 疑似要素に対応するも、スタイリングに制限のある環境を検出して、同等の要素を挿入してフォールバックします．
  • アニメーション GIF に非対応の Opera 7.20 未満のカーソルを点滅させます．

ゴーストの主客

この項目は準備中です。

CSS が無効の場合や、テキストブラウザでの表示

この項目は準備中です。

ブラウザ対応表

記号説明
◎CSS と画像が有効の場合、適切に表示される
〇CSS と画像に加えて JavaScript が有効の場合、フォールバックで適切に表示される
△ActiveX フィルターが無効だと適切に表示できない点がある
×表示できない
グレードブラウザ1. 基本機能2. 透過3. ゴースト4. レンジ5. ツールチップハイコントラストモード背景を印刷しない設定の印刷
AMicrosoft Edge 79+, Chrome 89+, Firefox 89+◎◎◎◎◎(*2)◎◎
モダンブラウザ(*1)◎◎◎◎◎(*2)-◎
Internet Explorer 11~10, Microsoft Edge 12~18◎◎◎◎◎◎◎
Internet Explorer 9, Firefox 3.5+. Pale Moon◎◎◎◎◎〇(*3)◎
BInternet Explorer 8◎◎◎◎◎△(*6)◎
Opera 7.2~9.27〇(*5)-〇(*5)
Firefox 2~3(Gecko 1.8.1~1.9.0)〇(*5)×(*7)×(*8)
Internet Explorer 7◎◎〇(*3)◎〇(*3)×(*7)×(*8)
Internet Explorer 5.2 for Macintosh未検証
CInternet Explorer 5, 5.5, 6◎△(*4)◎〇(*3)×(*7)×(*8)
Opera 7.0~7.1, Firefox 1~1.5(Gecko 1.4~1.8.0)〇(*5)-×(*8)
Gecko 0.6~1.3.1〇(*5)〇(*9)-×(*8)
  1. ハイコントラストモードに非対応のブラウザ．Windows 用の Internet Explorer, Edge(EdgeHTML または Chromium), Firefox, Pale Moon 以外のもの．
  2. 新しいブラウザではツールチップに影が付き角が丸くなります．
  3. JavaScript が有効な場合、コンテンツが表示できます．
  4. JavaScript が有効な場合、コンテンツが表示できます．但し ActiveX フィルターが無効の場合、疑似的な透過表示になります．
  5. JavaScript が有効でないとブラウザエンジンとバージョンに適した CSS が読み込まれず Web サイトの閲覧が困難です．
  6. JavaScript が無効の場合、ツールチップの尻尾を鋭角に出来ない．Internet Explorer 8では :after 疑似要素へ ActiveX フィルターを適用出来ないため．JavaScript が有効で ActiveX フィルターが無効の場合、尻尾は非表示になります．
  7. 他のブラウザのように content:url() を使った画像置換が出来ず、background-image を使っている為、ハイコントラストモードで欠落する．
  8. 他のブラウザのように content:url() を使った画像置換が出来ず、background-image を使っている為、背景を印刷しない設定の際には欠落する．
  9. CSS-P に関連するペイントのバグを回避する為、フォーカス時の表現が他のブラウザに劣ります。

より詳しい情報は「hamura.cssのマルチブラウザ技術、pbLCD.cssとpbChr.css, pbList.cssのフォールバックの画像置換と強制カラーモード」を参照します．

pbLCD メーカー

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

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