このページの情報は古くなっています．後継ライブラリ hamura.css を使用し pbChr.css を参照ください．
HTML の文章中で PB-100 キャラクタを使用したいとき、あらかじめ CSS を設定しておくことで HTML タグを記述するだけで PB-100 フォントの表示ができます．
また、クラス名には PB-100 のキャラクタコードが割り当てられています．
サンプル
プレイヤーであるあなたは騎士 Ω となって、魔王 ♣ の居城に幽閉されたお姫様 ♥ を救出してください．
フェアリー ' の助力を得て、伝説の稲妻の剣 ↑ を見つけるのが近道でしょう．
そうそう、魔王の側近・ミノタウロス & とゴースト π にはくれぐれも気をつけて！
表示サンプルとHTMLコード
適切にスタイルシートを設定することで、次のように HTML タグを書くだけで PB-100 のキャラクタを画面に登場させることができます．
クラス名には PB-100 のキャラクタコードが割り当てられています．
| 表示 | コード |
|---|---|
| |
| + | |
| - | |
| * | |
| / | |
| ↑ | |
| ! | |
| " | |
| # | |
| $ | |
| > | |
| ≧ | |
| = | |
| ≦ | |
| < | |
| ≠ | |
| 0 | |
| 1 | |
| 2 | |
| 3 | |
| 4 | |
| 5 | |
| 6 | |
| 7 | |
| 8 | |
| 9 | |
| . | |
| π | |
| ) | |
| ( | |
| E- | |
| E | |
| A | |
| B | |
| C | |
| D | |
| E | |
| F | |
| G | |
| H | |
| I | |
| J | |
| K | |
| L | |
| M | |
| N | |
| O | |
| P | |
| Q | |
| R | |
| S | |
| T | |
| U | |
| V | |
| W | |
| X | |
| Y | |
| Z | |
| a | |
| b | |
| c | |
| d | |
| e | |
| f | |
| g | |
| h | |
| i | |
| j | |
| k | |
| l | |
| m | |
| n | |
| o | |
| p | |
| q | |
| r | |
| s | |
| t | |
| u | |
| v | |
| w | |
| x | |
| y | |
| z | |
| ? | |
| , | |
| ; | |
| : | |
| ○ | |
| ∑ | |
| ° | |
| △ | |
| @ | |
| × | |
| ÷ | |
| ♠ | |
| ← | |
| ♥ | |
| ♦ | |
| ♣ | |
| μ | |
| Ω | |
| ↓ | |
| → | |
| % | |
| ¥ | |
| □ | |
| [ | |
| & | |
| _ | |
| ' | |
| ・ | |
| ] | |
| ■ | |
| ＼ | |
| |
| _ | |
導入の手引き
フォント画像ファイルを設置して CSS を追記することであなたのサイトでも PB-100 フォントが使えるようになります．
フォント画像のgifファイル
フォント画像ファイルは次の CSS ファイルと同じ階層に設置します．また、ファイルは PB Display Image Maker と共通になります．
注意点
次の問題の発生条件と対策は誤りです．Internet Explorer 7以下でテキストの先頭に PB-100 フォントが来た場合に問題が発生していました．対策は PB-100 フォントより前に  (とても細い空白文字)を書きます．
 <dfn class="chr6D">Ω</dfn>
<dfn> タグの親要素が float されている場合、IE5.5～8 でフォント画像が表示されませんでした．
次のように Internet Explorer のみ <dfn> にも float させることで意図した表示が得られました．同様の問題に遭遇した場合の参考にしてください．
.floatEl { float: left;} /* dfnの親要素がfloatしている */
* html .floatEl dfn { float: left;} /* ieのみにfloatを適用 */
CSSの該当部分
以下の CSS を導入サイトの CSS に追記します．CSS はサイトのコーディングにあわせて適宜に変更してください．
PB-100の宇宙の CSS のうち、main.css の下記部分が PB-100 キャラクタの表示部分になります．
また、サイトは Internet Explorer 5.5～8まで後方互換モードで動作しています．Internet Explorer で標準準拠モードで動作しているサイトの場合、適宜に変更が必要と思われます．
/* PB Display Font - dfn -
-----------------------------*/
dfn {
margin: 0.1em 0.2em;
width:10px;
height:21px;
font-size: 21px;
line-height: 21px;
text-indent: -9999px;
background-repeat:no-repeat;
background-color:#90b068;
background-image:url(pbfont_x3_0.1.0.gif);
border:#b0c86e solid;
border-width: 6px 4px;
padding:0;
display:inline-block;
_width: 18px; /* 互換モード動作のIEのみにwidthを適用 */
}
dfn.chr00 {background-position:0 0}
dfn.chr01 {background-position:0 -30px}
dfn.chr02 {background-position:0 -60px}
dfn.chr03 {background-position:0 -90px}
dfn.chr04 {background-position:0 -120px}
dfn.chr05 {background-position:0 -150px}
dfn.chr06 {background-position:0 -180px}
dfn.chr07 {background-position:0 -210px}
dfn.chr08 {background-position:0 -240px}
dfn.chr09 {background-position:0 -270px}
dfn.chr0A {background-position:0 -300px}
dfn.chr0B {background-position:0 -330px}
dfn.chr0C {background-position:0 -360px}
dfn.chr0D {background-position:0 -390px}
dfn.chr0E {background-position:0 -420px}
dfn.chr0F {background-position:0 -450px}
dfn.chr10 {background-position:0 -480px}
dfn.chr11 {background-position:0 -510px}
dfn.chr12 {background-position:0 -540px}
dfn.chr13 {background-position:0 -570px}
dfn.chr14 {background-position:0 -600px}
dfn.chr15 {background-position:0 -630px}
dfn.chr16 {background-position:0 -660px}
dfn.chr17 {background-position:0 -690px}
dfn.chr18 {background-position:0 -720px}
dfn.chr19 {background-position:0 -750px}
dfn.chr1A {background-position:0 -780px}
dfn.chr1B {background-position:0 -810px}
dfn.chr1C {background-position:0 -840px}
dfn.chr1D {background-position:0 -870px}
dfn.chr1E {background-position:0 -900px}
dfn.chr1F {background-position:0 -930px}
dfn.chr20 {background-position:0 -960px}
dfn.chr21 {background-position:0 -990px}
dfn.chr22 {background-position:0 -1020px}
dfn.chr23 {background-position:0 -1050px}
dfn.chr24 {background-position:0 -1080px}
dfn.chr25 {background-position:0 -1110px}
dfn.chr26 {background-position:0 -1140px}
dfn.chr27 {background-position:0 -1170px}
dfn.chr28 {background-position:0 -1200px}
dfn.chr29 {background-position:0 -1230px}
dfn.chr2A {background-position:0 -1260px}
dfn.chr2B {background-position:0 -1290px}
dfn.chr2C {background-position:0 -1320px}
dfn.chr2D {background-position:0 -1350px}
dfn.chr2E {background-position:0 -1380px}
dfn.chr2F {background-position:0 -1410px}
dfn.chr30 {background-position:0 -1440px}
dfn.chr31 {background-position:0 -1470px}
dfn.chr32 {background-position:0 -1500px}
dfn.chr33 {background-position:0 -1530px}
dfn.chr34 {background-position:0 -1560px}
dfn.chr35 {background-position:0 -1590px}
dfn.chr36 {background-position:0 -1620px}
dfn.chr37 {background-position:0 -1650px}
dfn.chr38 {background-position:0 -1680px}
dfn.chr39 {background-position:0 -1710px}
dfn.chr40 {background-position:0 -1920px}
dfn.chr41 {background-position:0 -1950px}
dfn.chr42 {background-position:0 -1980px}
dfn.chr43 {background-position:0 -2010px}
dfn.chr44 {background-position:0 -2040px}
dfn.chr45 {background-position:0 -2070px}
dfn.chr46 {background-position:0 -2100px}
dfn.chr47 {background-position:0 -2130px}
dfn.chr48 {background-position:0 -2160px}
dfn.chr49 {background-position:0 -2190px}
dfn.chr4A {background-position:0 -2220px}
dfn.chr4B {background-position:0 -2250px}
dfn.chr4C {background-position:0 -2280px}
dfn.chr4D {background-position:0 -2310px}
dfn.chr4E {background-position:0 -2340px}
dfn.chr4F {background-position:0 -2370px}
dfn.chr50 {background-position:0 -2400px}
dfn.chr51 {background-position:0 -2430px}
dfn.chr52 {background-position:0 -2460px}
dfn.chr53 {background-position:0 -2490px}
dfn.chr54 {background-position:0 -2520px}
dfn.chr55 {background-position:0 -2550px}
dfn.chr56 {background-position:0 -2580px}
dfn.chr57 {background-position:0 -2610px}
dfn.chr58 {background-position:0 -2640px}
dfn.chr59 {background-position:0 -2670px}
dfn.chr5C {background-position:0 -2760px}
dfn.chr5D {background-position:0 -2790px}
dfn.chr5E {background-position:0 -2820px}
dfn.chr5F {background-position:0 -2850px}
dfn.chr60 {background-position:0 -2880px}
dfn.chr61 {background-position:0 -2910px}
dfn.chr62 {background-position:0 -2940px}
dfn.chr63 {background-position:0 -2970px}
dfn.chr64 {background-position:0 -3000px}
dfn.chr65 {background-position:0 -3030px}
dfn.chr66 {background-position:0 -3060px}
dfn.chr67 {background-position:0 -3090px}
dfn.chr68 {background-position:0 -3120px}
dfn.chr69 {background-position:0 -3150px}
dfn.chr6A {background-position:0 -3180px}
dfn.chr6B {background-position:0 -3210px}
dfn.chr6C {background-position:0 -3240px}
dfn.chr6D {background-position:0 -3270px}
dfn.chr6E {background-position:0 -3300px}
dfn.chr6F {background-position:0 -3330px}
dfn.chr70 {background-position:0 -3360px}
dfn.chr71 {background-position:0 -3390px}
dfn.chr72 {background-position:0 -3420px}
dfn.chr73 {background-position:0 -3450px}
dfn.chr74 {background-position:0 -3480px}
dfn.chr75 {background-position:0 -3510px}
dfn.chr76 {background-position:0 -3540px}
dfn.chr77 {background-position:0 -3570px}
dfn.chr78 {background-position:0 -3600px}
dfn.chr79 {background-position:0 -3630px}
dfn.chr7A {background-position:0 -3660px}
Webフォントについて
この件については、一度 Web フォントを検討して挫折した経緯があります．サーバ上に置いたフォントファイルを読み込んで表示するという、おあつらえ向きの規格があるのですが、特殊な形式にフォントを変換する必要があり、そのためのソフトは既に手に入らないような状態でした．
規格自体もほとんど利用されない有様だったようです．
HTML5 になり、Web フォントがまた脚光を浴びているみたいです．フォント指定のみで PB-100 のキャラクタがブラウザ内で利用できたらすばらしいですね．