CASIO pocket computer
PB-100の宇宙

top > ツールとライブラリ > HTMLでPBフォント

HTMLでPBフォント

このページの情報は古くなっています.現在はより簡潔に記述でき対応ブラウザの多い後継 CSS ライブラリの使用が推奨されます.


HTML の文章中で PB-100 キャラクタを使用したいとき、あらかじめ css を設定しておくことで HTML タグを記述するだけで PB フォントの表示ができます.

また、クラス名には PB-100 のキャラクターコードが割り当てられています.

サンプル

プレイヤーであるあなたは騎士Ωとなって、魔王の居城に幽閉されたお姫様を救出してください.

フェアリー'の助力を得て、伝説の稲妻の剣を見つけるのが近道でしょう.

そうそう、魔王の側近・ミノタウロス&とゴーストπにはくれぐれも気をつけて!

表示サンプルとhtmlコード

適切にスタイルシートを設定することで、次のように html タグを書くだけで PB-100 のキャラクタを画面に登場させることができます.

クラス名には PB-100 のキャラクタコードが割り当てられています.

 
<dfn class="chr00"> </dfn>
+
<dfn class="chr01">+</dfn>
-
<dfn class="chr02">-</dfn>
*
<dfn class="chr03">*</dfn>
/
<dfn class="chr04">/</dfn>
<dfn class="chr05">↑</dfn>
!
<dfn class="chr06">!</dfn>
"
<dfn class="chr07">"</dfn>
#
<dfn class="chr08">#</dfn>
$
<dfn class="chr09">$</dfn>
>
<dfn class="chr0A">></dfn>
<dfn class="chr0B">≧</dfn>
=
<dfn class="chr0C">=</dfn>
<dfn class="chr0D">≦</dfn>
<
<dfn class="chr0E"><</dfn>
<dfn class="chr0F">≠</dfn>
0
<dfn class="chr10">0</dfn>
1
<dfn class="chr11">1</dfn>
2
<dfn class="chr12">2</dfn>
3
<dfn class="chr13">3</dfn>
4
<dfn class="chr14">4</dfn>
5
<dfn class="chr15">5</dfn>
6
<dfn class="chr16">6</dfn>
7
<dfn class="chr17">7</dfn>
8
<dfn class="chr18">8</dfn>
9
<dfn class="chr19">9</dfn>
.
<dfn class="chr1A">.</dfn>
π
<dfn class="chr1B">π</dfn>
)
<dfn class="chr1C">)</dfn>
(
<dfn class="chr1D">(</dfn>
E-
<dfn class="chr1E"><sub>E</sub>-</dfn>
E
<dfn class="chr1F"><sub>E</sub></dfn>
A
<dfn class="chr20">A</dfn>
B
<dfn class="chr21">B</dfn>
C
<dfn class="chr22">C</dfn>
D
<dfn class="chr23">D</dfn>
E
<dfn class="chr24">E</dfn>
F
<dfn class="chr25">F</dfn>
G
<dfn class="chr26">G</dfn>
H
<dfn class="chr27">H</dfn>
I
<dfn class="chr28">I</dfn>
J
<dfn class="chr29">J</dfn>
K
<dfn class="chr2A">K</dfn>
L
<dfn class="chr2B">L</dfn>
M
<dfn class="chr2C">M</dfn>
N
<dfn class="chr2D">N</dfn>
O
<dfn class="chr2E">O</dfn>
P
<dfn class="chr2F">P</dfn>
Q
<dfn class="chr30">Q</dfn>
R
<dfn class="chr31">R</dfn>
S
<dfn class="chr32">S</dfn>
T
<dfn class="chr33">T</dfn>
U
<dfn class="chr34">U</dfn>
V
<dfn class="chr35">V</dfn>
W
<dfn class="chr36">W</dfn>
X
<dfn class="chr37">X</dfn>
Y
<dfn class="chr38">Y</dfn>
Z
<dfn class="chr39">Z</dfn>
a
<dfn class="chr40">a</dfn>
b
<dfn class="chr41">b</dfn>
c
<dfn class="chr42">c</dfn>
d
<dfn class="chr43">d</dfn>
e
<dfn class="chr44">e</dfn>
f
<dfn class="chr45">f</dfn>
g
<dfn class="chr46">g</dfn>
h
<dfn class="chr47">h</dfn>
i
<dfn class="chr48">i</dfn>
j
<dfn class="chr49">j</dfn>
k
<dfn class="chr4A">k</dfn>
l
<dfn class="chr4B">l</dfn>
m
<dfn class="chr4C">m</dfn>
n
<dfn class="chr4D">n</dfn>
o
<dfn class="chr4E">o</dfn>
p
<dfn class="chr4F">p</dfn>
q
<dfn class="chr50">q</dfn>
r
<dfn class="chr51">r</dfn>
s
<dfn class="chr52">s</dfn>
t
<dfn class="chr53">t</dfn>
u
<dfn class="chr54">u</dfn>
v
<dfn class="chr55">v</dfn>
w
<dfn class="chr56">w</dfn>
x
<dfn class="chr57">x</dfn>
y
<dfn class="chr58">y</dfn>
z
<dfn class="chr59">z</dfn>
?
<dfn class="chr5C">?</dfn>
,
<dfn class="chr5D">,</dfn>
;
<dfn class="chr5E">;</dfn>
:
<dfn class="chr5F">:</dfn>
<dfn class="chr60">○</dfn>
<dfn class="chr61">∑</dfn>
°
<dfn class="chr62">°</dfn>
<dfn class="chr63">△</dfn>
@
<dfn class="chr64">@</dfn>
×
<dfn class="chr65">×</dfn>
÷
<dfn class="chr66">÷</dfn>
<dfn class="chr67">&spades;</dfn>
<dfn class="chr68">←</dfn>
<dfn class="chr69">&hearts;</dfn>
<dfn class="chr6A">&diams;</dfn>
<dfn class="chr6B">&clubs;</dfn>
μ
<dfn class="chr6C">μ</dfn>
Ω
<dfn class="chr6D">Ω</dfn>
<dfn class="chr6E">↓</dfn>
<dfn class="chr6F">→</dfn>
%
<dfn class="chr70">%</dfn>
¥
<dfn class="chr71">¥</dfn>
<dfn class="chr72">□</dfn>
[
<dfn class="chr73">[</dfn>
&
<dfn class="chr74">&</dfn>
_
<dfn class="chr75">_</dfn>
'
<dfn class="chr76">'</dfn>
<dfn class="chr77">・</dfn>
]
<dfn class="chr78">]</dfn>
<dfn class="chr79">■</dfn>
<dfn class="chr7A">\</dfn>
<dfn class="chr7B"></dfn>
_
<dfn class="chrCS">_</dfn>

導入の手引き

フォント画像ファイルを設置してCSSを追記することであなたのサイトでもPBフォントが使えるようになります.

フォント画像のgifファイル

フォント画像ファイルは次のcssファイルと同じ階層に設置します.また、ファイルはPB Display Image Makerと共通になります.

pbfont_x3_0.1.0.gif

注意点

次の問題の発生条件と対策は誤りです.IE7以下でテキストの先頭にPBフォントが来た場合に問題が発生していました.対策はPBフォントより前に&thinsp;(とても細い空白文字)を書きます.

&thinsp;<dfn class="chr6D">Ω</dfn>

<dfn>タグの親要素がfloatされている場合、IE5.5~8でフォント画像が表示されませんでした.
次のようにIEのみ<dfn>にもfloatさせることで意図した表示が得られました.同様の問題に遭遇した場合の参考にしてください.

.floatEl { float: left;} /* dfnの親要素がfloatしている */            
* html .floatEl dfn { float: left;} /* ieのみにfloatを適用 */

cssの該当部分

以下のcssを導入サイトのcssに追記します.cssはサイトのコーディングにあわせて適宜に変更してください.

PB-100の宇宙のCSSのうち、main.cssの下記部分がPBキャラクタの表示部分になります.

また、サイトはIE5.5~8まで後方互換モードで動作しています.IEで標準準拠モードで動作しているサイトの場合、適宜に変更が必要と思われます.

/*  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 fontについて

この件については、一度Webフォントを検討して挫折した経緯があります.サーバ上に置いたフォントファイルを読み込んで表示するという(おあつらえ向き!の)規格があるのですが、特殊な形式にフォントを変換する必要があり、そのためのソフトは既に手に入らないような状態でした.

規格自体もほとんど利用されない有様だったようです.

HTML5になり、Webフォントがまた脚光を浴びているみたいです.フォント指定のみでPB-100のキャラクタがブラウザ内で利用できたらすばらしいですね.