掲示板もスマホ対応に更新しました。

「新着情報」では問題なかった、スマホを全画面に表示する CSS のメタコマンド

print "<meta name=\"viewport\" content=\"width=device-width\">\n";

これだと掲示板の表示がスマホで全画面表示しないので迷走してました。(>_<)

print "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n";

これに差し替えたら全画面になったので、これが一番良いようです。(^_^)

あと、大画面では中央寄りに表示したかったので

body{
    width: 100%;
    max-width: 1028px; /* ツリー画面 */
    margin: auto;
}

    max-width: 1000px; /* 記事表示画面 */

これを CSSに入れたら良い感じになりました。
画面幅に応じて左のマージンを自動調節してくれます。(^_^)
うまく表示するまで地獄のような迷走してました。(;_;)

> とりあえずですね，
> 「Another HTML-lint gateway」（http://cetus.sakura.ne.jp/htmllint/htmllint.html）
> にかけて，重要度が 8 と 9 のエラーを修正してみてはいかがでしょう。

対象が htmlのように見えましたが、sinn.cgi のURLを入れて試してみました。
「軽度のチェックを無効にします」にチェックを入れた状態の結果が

88個のエラーがありました。このHTMLは -17点です。タグが 22種類 170組使われています
重要度	個数
7	1
8	2
9	11

こんなん出ました。(;_;)

> 個人的には，「人今日」「人昨日」みたいな読みにくいのは気になりますね。

う、文字が繋がって見えますか。もう少し間隔を空けてみます。(^^;

> あと，body（地べた） にテキスト（大事な物）が直に置いてあることとか。
> さらに，font を多用していますが，強調して見やすくしたい意図があるのですよね。
> ふつうそういうのは，見出しとして扱うことが多いと思います。

うう、もうなにがなにやら・・・　とりあえず見直してみます。m(__)m

あまり胸を張って言える立場にはありませんが……

HTML文書って，ちゃんとした構造にすればそれなりの見栄えになるように
ブラウザの表示関係の初期値って定められていると思うのですよね。

例えば，新着情報の場合だと概ね次のような構造になると思います。
（BBSがそれぞれひとつなら見出しレベルは変わるかも）
＋――― BODY ―――――――――――――――――――――――＋
｜＋―見出し H1 ―――――――――――――――――――――＋｜
｜｜BBS新着情報                                           ｜｜
｜＋―――――――――――――――――――――――――――＋｜
｜      ＋―ちょっとした説明ブロック―――――――＋        ｜
｜      ｜リード文など（なくてもいい）            ｜        ｜
｜      ＋――――――――――――――――――――＋        ｜
｜  ＋―見出し H2 ―――――――――――――――――――＋  ｜
｜  ｜としきのやしき                                    ｜  ｜
｜  ＋―――――――――――――――――――――――――＋  ｜
｜      ＋―見出し H3 ――――――――――――――＋        ｜
｜      ｜やしきの板塀　（新着）                  ｜        ｜
｜      ＋――――――――――――――――――――＋        ｜
｜    ＋―――＋―――――＋――――＋―――――――――＋  ｜
｜    ｜日付  ｜  発言者  ｜  番号  ｜  タイトル        ｜  ｜
｜    ＋―――＋―――――＋――――＋―――――――――＋  ｜
｜    ｜      ｜          ｜        ｜                  ｜  ｜
｜    ＋―――＋―――――＋――――＋―――――――――＋  ｜
｜    ｜      ｜          ｜        ｜                  ｜  ｜
｜    ＋―――＋―――――＋――――＋―――――――――＋  ｜
｜  ＋―見出し H2 ―――――――――――――――――――＋  ｜
｜  ｜めざら資源                                        ｜  ｜
｜  ＋―――――――――――――――――――――――――＋  ｜
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
｜＋― ADDRESS  ―――――――――――――――――――――＋｜
｜｜責任表示や連絡先など                                  ｜｜
｜＋―――――――――――――――――――――――――――＋｜
＋―――――――――――――――――――――――――――――＋

表示系の要素や CSS に頼らなくても，それなりの見栄えになると思います。
細かい表示を気にするのは構造を確定した後でいいわけですが，
先に細かいことを気にするから収拾がつかなくなってしまうと想像します。

あまりご興味はないかと思いますので，独り言みたいなものです。

body直下に置かれ，おそらくbody全体に敷かれていると思われる div のスタイル属性ですが，
<div style="margin-left:0px; width:80%; padding:0em;">
ここで width:80% を指定しているため，無意味な余白ができています。
縦表示の携帯端末では非常に影響が大きいので指定は害でしかありません。
せっかく viewport を指定しているのに，おじゃんです。
（PCのブラウザでも拡大率を数百％にしてみるとわかります）

(以下蛇足)
また，どこかの野良サイトから拾ってきたかと思われるものですが，
style要素で指定した以下のクラスは意味がないと思われます。
.d1	存在しないので不要
.tbody	存在しないので不要（tbody要素にしたいなら先頭のドットは不要）
.num	存在しないので不要
.obi	存在しないので不要
.m	存在しないので不要
.ruler	存在しないので不要
.cuter	存在しないので不要
_:lang(x)::-moz-placeholder, .selector {font-size:-2;}	無意味


なお，文字サイズを指定したいから tbody が必要とのことでしたが，
それこそ CSS で一発指定すれば CGI での無駄な出力は必要ありませんし，
なんなら <tbody style='font-size:100%'> という指定に意味はないでしょう。
そもそも thead と tfoot がないわけですから tbody は本来不要(省略可能)であり，
文字サイズは table に対して指定してやればよいことだと思われます。

> body直下に置かれ，おそらくbody全体に敷かれていると思われる div のスタイル属性ですが，
> <div style="margin-left:0px; width:80%; padding:0em;">
> ここで width:80% を指定しているため，無意味な余白ができています。
> 縦表示の携帯端末では非常に影響が大きいので指定は害でしかありません。
> せっかく viewport を指定しているのに，おじゃんです。
> （PCのブラウザでも拡大率を数百％にしてみるとわかります）

ああ、そうだったんですか、知りませんでした。 width:100% にするとおかしくなるもので
そこで諦めていました。直したらバッチリ100％で表示出来ました。＼(^^)／ ﾔｯﾀ- 
ありがとうございます。m(__)m

> また，どこかの野良サイトから拾ってきたかと思われるものですが，
> style要素で指定した以下のクラスは意味がないと思われます。

これも全部削除しました。

> なお，文字サイズを指定したいから tbody が必要とのことでしたが，
> それこそ CSS で一発指定すれば CGI での無駄な出力は必要ありませんし，
> なんなら <tbody style='font-size:100%'> という指定に意味はないでしょう。
> そもそも thead と tfoot がないわけですから tbody は本来不要(省略可能)であり，
> 文字サイズは table に対して指定してやればよいことだと思われます。

これも全部削除しました。
テーブルの折り返しを防ぐため、CSS に

	if ($mode2 == 1) { 
		print ".s1 {  font-size:small;   
	    white-space: nowrap;
		} \n";
	} else {
		print ".s1 {  font-size: medium; 
	    white-space: nowrap;
		} \n";
	}

これを仕込んで、TD に使ったらいい感じになりました。
「発言者」の枠が折り返してしまったので、

	print ".s2 {  font-size: medium; 
	    white-space: nowrap;
	} \n";

これも TH に仕込みました。
これで私個人としては満足のいく見栄えになりました。
ありがとうございました。m(__)m

「新着情報 」 v0.948 に更新しました。

スマホを全画面に表示する CSS のメタコマンド

print "<meta name=\"viewport\" content=\"width=device-width\">\n";

これだと掲示板でおかしくなるので

print "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n";

これに差し替えました。これが一番良いそうです。(^_^)

あと、大画面では中央寄りに表示したかったので

body{
    width: 100%;
    max-width: 768px;
    margin: auto;
}

これを CSSに入れたら良い感じになりました。
画面幅に応じて左のマージンを自動調節してくれます。(^_^)

> 実は、会社のマシン、２１Ｖかもっと大きいものかもしれませんが、これでブラウザの
> ウィンドウを最大化した場合にあのような画面表示となっています。解像度は不明。

なるほど、それは想定外でした。確認してみます。

> konnoさんのパソコン、もしHDMIの端子があれば、大画面のテレビとかにつなげば
> エミュレーションの操作なんかしなくても実物を見れることでしょう。

42インチのテレビで見てみましたが、見栄えはノートPCとほぼ同じでした。(^^;
なので、[CTRL]+[-]連打して、こんな感じかなぁ、・・・確かにバランス悪いですね。(^^;
あ、一つ気が付いたことがあります。トップページに仕込んだ「ウインドウサイズ」の表示が

ノートPC全画面	ウィンドウサイズ：横幅 = 1239 / 高さ = 630
42型TV		ウィンドウサイズ：横幅 = 2478 / 高さ = 1260

これは画面サイズの違いかぁ、と思ったら、ブラウザで縮小するとこの数字が変化するようです。
なるほどねぇ〜、気が付きませんでした。(^^;

> > としきさんとか他の方は、見栄えの改善にテーブルを使いますかねぇ。
> > 私はテーブルとかcssとか全く勉強してないもので。<(^^;)
> 
> 私もテーブルは多用しています。
> とはいえ、もう何年も前に、できる範囲で、ではありますが、かなり大々的にCSSを
> 導入しました。

> 実は、うちのサイトのトップページも、上記の会社のマシンよりは小さいとはいえ、
> その当時の大画面で表示させて「うげげ」となってしまったもので。ありがたいことに
> CSSで記述しておけば、画面サイズのある程度の変更であればそれなりに追従して表示
> してもらえるので、少なくともパソコンなら当面このままでよさそう。ただスマホでの
> 表示は全く確認していないので、一体どうなっていることやら。

やしきのトップページを縮小して見てみました。
文字も画像も縮小しますが、バランスはいいですねぇ。
逆にブラウザの幅を縮小してもそれなりに見えて、見栄えはそれほど悪くないです。

ということで、やしきの秘伝のソースを頂こうと思ったら、あれ？ 外部CSSが無い？
思った以上にシンプルなんですねぇ。参考にさせていただきます。

> あと、ブラウザ側ではなくサイト側で文字サイズの変更ができるようにするのであれ
> ば、以下のようなページを熟読すると参考になるかもしれません。JIS規格だの総務省の
> ガイドラインとかが出てきて、きちんと実装しようとすると、かなり大変そうです。

拡大縮小のボタンの話ですね。参考になります。
うちの掲示板の拡大縮小のリンクはとっくの昔に廃止されて飾りになっていました。(^^;
調べたら、2005年から2006年の間だけのようで、虱潰しに家探ししてやっと見つけました。

2005/06/07  12:29            63,044 wforum.cgi

ルーチンが完全にあるのはこの1つだけでした。ごく短期間で廃止したと思われます。(^^;
拡大縮小ボタンの話を勧められたので、またやってみようかな φ(..; ﾊﾞｷｯ＼(--;