System i では画面罫線を使って表示することは、めずらしくない。
しかし、読者諸氏は Webでは、罫線はほとんど見かけたことがないはずである。
試しに 「罫線」を Webで検索してみると、ほとんどが <hr>タグを使った横罫線の表示についての
解説である。
HTML での <hr> タグは横方向の区切り線であり、縦方向や矩形を表現するためのタグは存在
していない。
つまり、私達が言及するところの「罫線」という概念はHTML には存在していないのである。しかし
WebFacing 等で既存の 5250画面を HTML に移行する場合において従来の5250画面上での
罫線が消失してしまうと、非常に見づらくなってしまう画面が存在するのも確かである。
それでは HTML上では 5250罫線は再現できないのであろうか ?
IBM HATS (Host Access Transformation Services ) の解説を読むと「罫線はサポートされて
いない」とある。そして「Table タグを使ってユーザーが独自に罫線を再現すること」ともある。
そしてそれ以上の詳しい解説はない。恐らく罫線の表現を解説していたのでは莫大な内容になって
しまうからであろう。
それではここで HTML 上での罫線を表現する手法について解説してみよう。
この解説は Webのどこを探しても見つからなかった初めての紹介であるとともにIBM が示唆して
いたのも、この手法であると推測できる。

唯一、HTML上で罫線を再現する方法は、

項目のボーダー・ラインを使うことである。

といえる。

HTML の tableタグ内の項目である、tdタグに対して、

<td border-top: solid 1px #696969 ...> ......... </td>

のようにボーダーを定義すると境界線としての罫線を引くことができる。
td タグのひとつの矩形のセルと考えてよい。このひとつのセルの上部にだけ横方向の罫線を指示
するのが border-top である。このようにして、

上部	・・・	border-top
下部	・・・	border-bottom
左部	・・・	border-left
右部	・・・	border-right

のように、4つのすべての方向に罫線を指定することずできる。
また隣り合わせのセルがお互いに罫線を指定することもあるので，その場合は

border-collapse:

を指定すると、罫線が重なり合うことはない。
このようにすると、ひとつのセルに定義できる罫線の組み合わせは、かなりの数になることが想像される
にちがいない。
そこで汎用的に参照できるようにするために、セル当たりの罫線の定義を次のようなスタイル・シート
にまとめることができる。

【 スタイル・シート : KEISEN.CSS 】

.KSN_0    { }
.KSN_1    {border-top: solid 1px #696969; }
.KSN_12   {border-top: solid 1px #696969; border-left: solid 1px #696969; }
.KSN_13   {border-top: solid 1px #696969; border-bottom: solid 1px #696969; }
.KSN_14   {border-top: solid 1px #696969; border-right: solid 1px #696969;}
.KSN_123  {border-top: solid 1px #696969; border-left: solid 1px #696969; border-bottom: solid 1px #696969; }
.KSN_124  {border-top: solid 1px #696969; border-left: solid 1px #696969; border-right: solid 1px #696969;}
.KSN_134  {border-top: solid 1px #696969; border-bottom: solid 1px #696969; border-right: solid 1px #696969;}
.KSN_1234 {border: solid 1px #696969; }
.KSN_1234_COL {border: solid 1px #696969;border-collapse: collapse;}
.KSN_2    {border-left: solid 1px #696969; }
.KSN_23   {border-left: solid 1px #696969; border-bottom: solid 1px #696969; }
.KSN_24   {border-left: solid 1px #696969; border-right: solid 1px #696969;}
.KSN_234  {border-left: solid 1px #696969; border-bottom: solid 1px #696969; border-right: solid 1px #696969;}
.KSN_3    {border-bottom: solid 1px #696969; }
.KSN_34   {border-bottom: solid 1px #696969; border-right: solid 1px #696969;}
.KSN_4    {border-right: solid 1px #696969;}

これは弊社製品 EnterpriseServer Ver5.0 で実際に使われているスタイル・シートである。
各 tdタグでは、どのように罫線と隣接しているかを判断して

<td class=KSN_1234><pre><span id=B0702> ��  </span></td>

のようにして、罫線を class で定義している。
この「�ａvという文字列を持つ td タグは上下左右を罫線に隣接している。
そこで KSN_1234 が指定されているのである。
このようにすべての項目が table タグ内の td 項目として定義されていればよいのだが単純に
生成した HTML では td タグが定義されていないエリアも含まれているはずなので
(恐らくはブランクとして表示されている部分がそうである。)
手動で td タグを漏れなく追加していからなればならない。これはかなり根気の要る仕事である。
従って IBM も罫線の解説を避けるに至ったのかも知れない。
幸い、EnterpriseServer Ver5.0 の AutoWebでは、これらの不足している td タグは AutoWeb
によって適切に追加されるようになっている。
もし手動で tdタグを追加するとしたら気の遠くなるような正確で根気の要る仕事が待っていること
になる。罫線の解説が Web でほとんど見つからないのも、ここに原因があるのかも知れない。

下記は AutoWeb によって罫線を再現しているサンプルである。

【 5250罫線の表示 】

【 HTML罫線の表示 】