pbDisplay.css ver0.x|PB-100の宇宙

このページの情報は古くなっています．現在はより高機能、より適切な 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 を切った Internet Explorer でも、擬似透過表示でサポート！)
ディスプレイ上部のステータスもすべての状態を再現できる！
テキストエディタだけでもイメージを制作・更新できる！
専用エディタもあって、完成状態を見ながらイメージを制作できる！
Internet Explorer 5.5以降、Internet Explorer 5.2 for Macintosh にもクロスブラウザ対応！

PB Display Image Maker - 専用エディタ

source & demo

GitHub pb-100/pbDisplayCSS/0.x pbDisplay.css 0.x Sample

導入の手引き

【非推奨】`@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>

注意点Internet Explorerで ActiveX の恩恵を享けるられない

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

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

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

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

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

【推奨！】`<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]-->

.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');
}

アップデート履歴

balloon機能デモ pbDisplay.css次期バージョンではballoon機能がつくよ！ pbDisplay.css Version0.1.4を公開しました PB Dispaly Image MakerをIE（JavaScript切）にも対応させる PB Dispaly Image Makerを1.0.110330にアップデートしました PB Display Image Maker 1.0.0を公開しました PB-100DisplayImageMaker ver0.1.0 の公開 PBディスプレイメイカーの制作

クロスブラウザ対応状況

Windows 用 Internet Explorer 5.5~9, Firefox 3.6, Opera 9~11, Safari 3.2, Chrome 5の標準準拠モード、後方互換モードで正常に表示を確認．

Internet Explorer 5.2 for Macintosh でも正常に表示されるようになりました．

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

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

ブラウザ		共通ファイル	専用ファイル
モダンブラウザ		pbDisplay0.1.0.css (18KB), pbDisplay0.1.0.gif (7KB), pbfont_x3_0.1.0.gif (3KB)
Internet Explorer 7, 8	ActiveX(js)有効		checkActiveX.js (1KB)
Internet Explorer 7, 8	ActiveX(js)無効			pbfont_x3_x10.png (50KB), pbfont_x3_x10_cs.gif (2KB)
Internet Explorer 5. 5, 6	ActiveX(js)有効
Internet Explorer 5. 5, 6	ActiveX(js)無効			pbfont_x3_x10.gif (50KB), pbfont_x3_x10_cs.gif (2KB)
Internet Explorer 5.2 for Macintosh			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)

サンプル

特徴

source & demo

導入の手引き

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

注意点Internet Explorerで ActiveX の恩恵を享けるられない

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