CASIO pocket computer
PB-100の宇宙

top > ツールとライブラリ > pbDisplay.css ver0.x

pbDisplay.css
version 0.x

このページの情報は古くなっています.現在はより高機能、よりシンプルな 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からjsで行うようにしたため不要になりました.

.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~IE8, Firefox3.6, Opera9~11, Safari3.2, Chrome5の標準準拠モード、後方互換モードで正常に表示を確認.

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

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

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

ブラウザ共通ファイル専用ファイル
モダンブラウザ pbDisplay0.1.0.css (18KB), pbDisplay0.1.0.gif (7KB), pbfont_x3_0.1.0.gif (3KB)
ie7,8ActiveX(js)有効checkActiveX.js (1KB)
ActiveX(js)無効pbfont_x3_x10.png (50KB), pbfont_x3_x10_cs.gif (2KB)
ie5.5,6ActiveX(js)有効
ActiveX(js)無効pbfont_x3_x10.gif (50KB), pbfont_x3_x10_cs.gif (2KB)
Mac ie5.x pbfont_x3_10pct.png(19KB) pbfont_x3_20pct.png(19KB) pbfont_x3_30pct.png(19KB) pbfont_x3_40pct.png(19KB) pbfont_x3_50pct.png(19KB) pbfont_x3_60pct.png(19KB) pbfont_x3_70pct.png(19KB) pbfont_x3_80pct.png(19KB) pbfont_x3_90pct.png(19KB)