CASIO pocket computer
PB-100の宇宙

pbDisplay.css
Version 0.x

公開日 2011/01/09

このページの情報は古くなっています.現在はより高機能、より適切な HTML 構造に加えて対応ブラウザも多い、後継の pbLCD.css を使用しましょう.


PB-100 の画面イメージを簡潔な HTML + CSS で記述できる pbDisplay.css のページです.

サンプル

S EXT RUN STOP DEG
G O T O P B - 1 0 0 _

以上のイメージは次の HTML タグだけで設定しています.

<div class="pbDisplay010-Container">
 <div class="pbDisplay010">
  <!-- display:condition -->
   <span class="ext">EXT</span>
   <span class="shift">S</span>
   <span class="run">RUN</span>
   <span class="stop">STOP</span>
   <span class="deg">DEG</span>
  <!-- display:main --><br>
   <span class="CSR00 chr26">G</span>
   <span class="CSR01 chr2E">O</span>
   <span class="CSR02 chr33">T</span>
   <span class="CSR03 chr2E">O</span>
   <span class="CSR05 chr2F">P</span>
   <span class="CSR06 chr21">B</span>
   <span class="CSR07 chr02">-</span>
   <span class="CSR08 chr11">1</span>
   <span class="CSR09 chr10">0</span>
   <span class="CSR10 chr10">0</span>
   <span class="CSR11 chrCS">_</span>
 </div>
</div>

特徴

  • 実写取り込みを使ったリアルな表現!
  • キャラクタを透過したり重ねることができるので、アクションゲームのスピード感を表現できる!(ActiveX を切った IE でも、擬似透過表示でサポート!)
  • ディスプレイ上部のステータスもすべての状態を再現できる!
  • テキストエディタだけでもイメージを制作・更新できる!
  • 専用エディタもあって、完成状態を見ながらイメージを制作できる!
  • IE 5.5 以降、MacIE 5.2 にもクロスブラウザ対応!

source & demo

導入の手引き

【非推奨】@importを使用する

PB Display Image Maker を使用して HTML タグを生成すると、その先頭で以下のような CSS 読み込み用のタグが記述されています.

このタグによって PB-100 実機のような表現が可能になりますが、<body> 内に <style> を記述することは不正なので、 続く <head> 内に <link> タグで記述する方法をとりましょう.

<style type="text/css">
  <!--
    @import url(https://pbrocky.github.io/pb-100/pbDisplayCSS/0.x/pbDisplay0.1.0.css);
  -->
</style>

注意点 IE で ActiveX の恩恵を受けられない

CSS を読み込むだけでは IE で理想的な表示結果が得られません.IE の場合にはさらに ActiveX の有無を調べる js を走らせて、その結果に応じてクラスを <body> に付与します.

<body class="pbDisplay-ActiveX-enabled">

とはいえ、IE7~8 では透過 png を利用した理想に近い表示が得られます.アニメーション gif を使用するカーソルは除きます.IE5.5~6 では gif を利用して擬似的に透過しているような表現を行いますが、キャラクタの組み合わせによっては予期した表示とかけ離れたものになります.

しかしブログ等で自前のファイルを設置できない設定の場合は、以上のような方法を採らざるを得ないでしょう.

また、多くのモダンブラウザでは CSS で opacity プロパティをサポートしているため、これは IE だけの問題となります.

【推奨!】<head>内に<link>タグで記述する

あなたのウェブサイトに PB-100 の画面イメージを使用する場合、<head> 内に以下の <link> タグを記述して読み込んでおきましょう.使用する予定がなくてもおまじないのつもりで記述しておきましょう.

<link href="https://pbrocky.github.io/pb-100/pbDisplayCSS/0.x/pbDisplay0.1.0.css" rel="stylesheet" type="text/css" />

さらに <body> タグの直下に以下のように、IE8 以下でだけで実行される <script> を書き込みます.

<!--[if lt IE 9]><script language="javascript">
(function(){
  var b = document.body || (function(){document.write('<body>');return document.body;})(),
      x = (function(){
        try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}
        return t ? 'pbDisplay-ActiveX-enabled' : null;
      })();
  if( x && !b.className.match(x)) b.className += ( b.className.length === 0 ? '' : ' ') + x;
})();
</script><![endif]-->

【推奨!】リソースを自前で持つ

次のファイルをダウンロードして同じ階層に保存します.pbDisplay0.1.0.css を読み込むことで HTML タグが PB-100 の画面イメージに置き換わります.

<link href="css/pbDisplay0.1.0.css" rel="stylesheet" type="text/css" />

さらに <body> タグの直下に以下のように、IE8 以下でだけで実行される <script> を書き込みます.

<!--[if lt IE 9]><script language="javascript" href="https://pbrocky.github.io/pb-100/pbDisplayCSS/checkActiveX.js"></script><![endif]-->

メインファイル

IE で ActiveX が無効な場合の対策用イメージ

MacIE 用に9つ(10%~90%)の透過フォント

.htcに関する注意

以下の内容は、Version 0.1.4 から 0.1.5 に変更の際に、ActiveX の確認を htc から Javascript で行うようにしたため不要になりました.

.htc は自ドメインに置かないと機能しません. また、パスは CSS からの相対パスでなくページの HTML ファイルからの相対パスとします.背景画像などの URL は CSS からの相対パスで指定していますが、.htc は異なり注意が必要.または絶対パスで指定する.

そのため、pbDisplay0.1.0.cssの最初にある checkActiveX.htc の読み込みを自サイトのものに書き換える必要があります.

.pbDisplay010-Container {
 /* */
 behavior:url('http://www.~~/css/checkActiveX.htc');
 -ms-behavior:url('http://www.~~/css/checkActiveX.htc');
}

アップデート履歴

クロスブラウザ対応状況

Windows 用 IE9, IE5.5~8, Firefox3.6, Opera 9~11, Safari3.2, Chrome 5 の標準準拠モード、後方互換モードで正常に表示を確認.

Mac IE5.2でも正常に表示されるようになりました.

iPhone 用及び iPad 用 Safari で正常に表示を確認.

ブラウザ毎の使用ファイル