タイトル

横長データの表示スタイルである。
普通の文字ばかりのデータのように、どこで折り返してもかまわない、というなら単にpre, div などでよい。
しかし、それでは困る場合がある。特に、プログラミングのソースなどの場合、スマホの狭い横幅のサイズで折り返されては困る場合がある。
そのためのスタイルである。


.pg

以前のパソコン用のソース表示で使っていたスタイル。
PCSM化でほとんど使わなくなった。
ただし、旧来のファイルはこのスタイルをpreタグとともに多用しているので急にはなくせない。
スマホでは画面幅で折り返されてしまうので、ソース用には使えない。
従来のファイルを検討する場合、「<pre class="pg">」の部分は「<div class="pg3 tbsoto">」に書き換える必要がある。
なお、以下の「.pg」から「.pg4」の表示で使っているのは単純なpreタグである。
STYLE
.pg {
  color:navy;
  font-family:"MS 明朝",serif;
  font-size:15px;
  line-height:1.5;
  background-color:#fffff0;
  border:1px solid #339966;
  padding:5px;
}

.pg1

数行程度の短い場合に使う。1行であっても、折り返してほしくないソースがある。
2022/01/14に新設。
枠なし。文字はネイビー、背景は白。
pg4とはフォントが違うだけ。
STYLE
.pg1 {
  color:navy;
  font-family:"MS 明朝",serif;
  font-size:15px;
  line-height:1.5;
  background-color:#ffffff;
  border:0px solid #ffffff;
  padding:5px;
  white-space:pre;
}
注意
SAMPLE このスタイルを使う場合、冒頭に枠囲みの文字が必要。それがなければ先頭行が空白になる。 しかしdivタグの横に密着させて文字を書けば空白行の問題はないが、、、。

SAMPLE stdio.h(75): #define EOF (-1) /* End of file indicator */ stdio.h(76): #define WEOF (_WINT_T)(0xFFFF) /* wide-character end of file indicator */

この程度の量と内容なら、わざわざ枠囲み(pg3)にする必要はない。そういう場合に使う。
地の文にとも違和感がなく溶け込む。
今までは次のようにするしかなかった。枠囲みにする必要はない。

stdio.h(75): #define EOF (-1) /* End of file indicator */ stdio.h(76): #define WEOF (_WINT_T)(0xFFFF) /* wide-character end of file indicator */


.pg2

pg3の変形版。
四隅は丸、文字は黒、背景は緑、にしたもの。
STYLE
.pg2 {
  color:black;
  font-family:"MS 明朝",serif;
  font-size:15px;
  line-height:1.5;
  background-color:#f0ffff;
  border:1px solid #66cc66;
  padding:5px;
  border-radius:10px;
  white-space:pre;
}

.pg3

プログラムのソースなどの枠囲み。
四隅は角。文字はネイビー、背景は黄色。
従来のソースはこの形式を使う(移行する)。
STYLE
.pg3 {
  color:navy;
  font-family:"MS 明朝",serif;
  font-size:15px;
  line-height:1.5;
  background-color:#fffff0;
  border:1px solid #008000;
  padding:5px;
  white-space:pre;
}

.pg4

16進ダンプなどで等幅フォントを使う場合。
枠なし。
四隅は角。文字はネイビー、背景は白。
pg1とはフォントが違うだけ。
STYLE
.pg4 {
  color:navy;
  font-family:monospace;
  font-size:15px;
  line-height:1.5;
  background-color:#ffffff;
  border:0px solid #ffffff;
  padding:5px;
  white-space:pre;
}