パルマガの横幅設定問題について

　パルマガの横幅設定問題について、皆さんのご意見を集めてきた結果、たくさんのご意見を貰った。まずは、そのお礼をさせてもらう。本当に感謝！

【パルマガの横幅設定問題とは…】とある読者の方から、「21型のモニタで見ると、パルマガの記事がダラ～ンと間延びして読みづらい」というご意見を受けた。そこで、緊急の対応策として、各記事に横幅設定値として600ピクセルをかけたところ、それはそれで不便だ、というご意見を貰った。そこでどうしよう？…といのが大意だ。

　では、貰ったご意見の中から代表的なものを紹介しよう。

【読者の皆さんからの声】

■HTMLタグ（パルマガBBS）by ふみひこさん

「divは確かにHTMLタグですが、横幅を設定する機能は持っていません。使用しているのは「スタイルシート」という機能で、div以外の例えば「p」でも横幅を設定することは可能です。細かい話で恐縮ですが、よろしくお願いします」

…【機長コメント】実際、機長が最初に記事を書いた時には、まさに、ご指摘の通り適当な表現を使っていたので、機長恐縮だ。ま、機長のHTMLに関する理解はこの程度だ、ということをわかっていただくためには、ちょうどよい例題とも言える。

■HTML話（パルマガBBS）by n-yoshiさん

「「HTMLタグは文の論理構造を定義し、見た目の制御はStyleSheetを利用する」、というのが本来の姿でありまして、ふみひこ様の指摘はもっともであります。更に突っ込んで言いますと、「■パルマガ■」本体の方ではそもそもstyleを定義しておりますので、冒頭のcss定義部を

…略…
a:hover { text-decoration:underline; color:#CC0099; }
.clmn { width: 36em; }

という感じで「clmn」というスタイルを定義し、実際の本文中の

div style="width:600px;"

は

div class="clmn"

と云う表記の置き換えるのが筋であったり。

さて、「600px」という幅指定がいきなり「36em」という表記になっておりますが、これまた「論理構造を持つHTML文書を装飾するStyleSheetはやはり論理的な指示であるべき」という(私の)ポリシーに則ったものです。これは、「一行を600pixelで表示せよ」との指定があった場合、超高精細ディスプレイで高解像度な表示(2400x1600,300dpiとか(笑))に於いては、600pixelが二十文字にも満たない幅でしかなかったり、逆にPDA等に於いては表示領域を突き抜け、横に二、三画面分スクロールさせなくてはならなくなったりするってコトが起こりえまして、コレを回避するためには画素数という物理的な指示ではなく、文字数という論理的な指示にしましょう、と。(実際にはそんなに派手な不具合にはそうそう遭遇出来ませんが…) そんなわけで「画面上の画素600pixel分の幅」ではなく、「画面上の標準文字で36文字分の幅」という指示に換えているわけです。(実際の値としての600pxと36emですが、機長様の環境にて600px指定時に一行何文字表示されているかは計り知れませんが、当方環境にては36em相当でしたので…)

おまけ
「論理的で在れ」としつこく迫ってくるHTMLですから、要素を括るためのタグもやはり論理的な命名になっているわけです。
HTML
div DIVision 区切り
p Paragraph 段落
a Anchor 錨(リンク先の指示)
br BReak 折り目(強制改行)
em EMphasis 強調
css
px PiXel 画素
em EleMent 要素(文字数)
等々。
個々の意味と本来の綴りについてはうろ覚えですので、詳しく知りたい向きは自分で調べましょう」

…【機長コメント】あはは、実は「おまけ」だけは文系頭の機長にもわかったが、それ以前についてはさっぱりわからなかった。だいたいが、パルマガのcgiを解説通りに設置し、それでもうまくいかなくて何回か試行錯誤をしているうちに、なんとなくうまくいってしまったような機長なので、理解するしない以前の問題かもしれない。申し訳ない＞n-yoshiさん

■大は小をかねる（パルマガ代表メール宛）by 匿名さん

「パルマガは改行がないので、デカい画面だと読みづらい！」とのことで、600ピクセルで折り返し表示を試されてますが、私は640×480の画面で読んでますので、右端が微妙に切れて、横スクロールを使わなければ読めず、読みにくいです。

デカイ画面の人はブラウザの横幅を狭めれば問題ないと思います。逆に小さな画面の人は画面広げろ！と言われても無理ですし」

…【機長コメント】今度は思いっきりわかりやすい意見だ。横幅600ピクセル固定だと、普通の画面では微妙に切れちゃうのか？なるほど！で、匿名さんの解決案もまたシンプルこの上ない。つまり「大は小を兼ねる！」と。ふむふむ。

■Re:パルマガが突然改行を始めた理由。（パルマガ代表メール宛）by 水沼さん

「方式にした場合、ＩＥのウィンドウを小さくすると、横スクロールが必要です。今まで通りならウィンドウ幅に合わせて適当に改行されるので私としては旧方式の方が見やすいと思います。ちなみに環境は　Windwos 2000 IE 6.0です」

…【機長コメント】現状という意味ではこちらもほぼ同様の意見。と、こうした「ちょっとだけスクロールの必要が出ちゃうぞ」という意見を論理的に解説してくれたのが、この人！

■パルマガ画面幅についての報告と希望（パルマガ代表メール宛）by マエダイチロウLife with PalmPilotさん

「さて、画面幅の件ですが、読者からのコメント募集中ということなので僕からも少し。

まず新仕様の、見え方についての報告です。

僕は自宅に、インターネットにつながったコンピュータが 3台ありましてそれぞれ OS は違うのですが、Mozilla ブラウザと IE で主にウェブは利用しています。ノートは 800x600, デスクトップは 1280x1024 と 1600x1200 ですがブラウザ画面は、どのコンピュータでも同様で幅がほぼ 800ピクセルとなっています。

リンクや履歴を参照する為に、IE ならエクスプローラバーMozilla や N6 ならばサイドバーを表示していることもあります。サイドバーを表示させる場合は、画面幅がそれに多少とられてウェブページそのものの幅はほぼ 640 ピクセル程度となります。

この前提で、今のパルマガを表示させてみたときのブラウザ画面のスクリーンショットが、こんな感じです:

●800ピクセル幅
 ●640ピクセル幅（サイドバーを表示の場合）

サイドバー（エクスプローラバー）表示の場合は、テキストが右端から中途半端にはみ出てしまいます。横スクロールバーが出ちゃっているのがわかるでしょうか。

実は僕はこの状態でブラウズしていることがとても多いんです。

それには理由があって、この 640ピクセルってのはウェブの画面レイアウトの、ひとつのマジックナンバーらしいんです。他のニュースサイトも、たいていの場合は、画面幅 640ピクセルで、重要なものすべてが見える設計になっています。

たとえばインプレスのケータイWatch:

●800ピクセル幅
 ●640ピクセル幅（サイドバーを表示の場合）

640ピクセルより向こう側には、何も表示されないですね。もうひとつ、こんどは ZDNet Japan::

●800ピクセル幅
 ●640ピクセル幅（サイドバーを表示の場合）

640ピクセルの線の外側にもコンテンツは配置されていますがどちらかというと重要ではない広告とか、参考程度のリンクばかりです。サイドバーを出した状態でも、重要な部分は全部、横スクロールなしに見えるようになってます。

他のサイトも、プロの人が作るとだいたいこんな感じで本文が 640ピクセルの外側に出てしまうサイトは少ないです。なので、スクリーンの実サイズは大きくなっても、ブラウザ窓の幅は全体で 800、正味 640 のエリアで表示ってひとが、実は結構多いのではと思います。

ということで、最後に僕の希望を述べますね。

自分にとってベストなのは、以前のとおりの、幅制限なしという仕様です。これなら、どんな幅であっても自動的にフィットしますから。特定の幅に決め打ちにすると、結局は誰かが割を食うことになります。画面が大きいから見づらいというのは、どちらかといえば、見る人の側の問題なのではないかと思います。

でもどうしても画面幅を固定にする、という場合は幅をもう少し狭くして、全体で 640ピクセル程度に収まるようにしていただけるとありがたいです。今の 600ピクセルという指定は、その左側のマージンを含んでいないようなので（blockquoteタグのせいでしょうか）全体で 640に収まりそうな気もしますが、実際にはそうならないというのが現実であるようです。

以上、長々とすいませんでした。」

…【機長コメント】なるほど！どうやら640ピクセルという数字にキーポイントがあるらしい！しかし、どうすっぺ？一方、これらとは違った意見も来た。

■パルマガ固定長表示（パルマガ代表メール宛）by 奇妙なリスさん

「さて、固定表示ですが、実にグッドです。先日偶然手に入れたザウルスMI-E1の縦表示ブラウザではぴったり二つ分表示されました。「横幅を固定しない。横幅を固定しない。」自前のHandEraが不調で確認できないんですが、たぶん同じ幅と思われます。ばっちりです」

…【機長コメント】なんと！ザウルスではピッタリらしい。（笑）…なお、奇妙なリスさんは、googlewhack-japanでもお馴染みのgooglewackerだ。

■RE: 横幅600ピクセル固定（パルマガBBS）by noppoさん

「XGA 画面の Libretto 50 で、週末は読ませていただいています。先日まで、狭い画面を意識する必要もなく、とても快適だったのですが、横幅600ピクセルに固定されてから、行端が欠けるようになってしまいました。できれば、もう５文字分ほど短くして改行していただけると、ありがたいのですが。　今時 XGA 画面なんて骨董品だって？　まぁ、そうおっしゃらずに。」

…【機長コメント】うむ、いろんな環境で読んでもらっていることにまずは感激！それにしても、環境それぞれでいろんな事情があるんだな～と感動。さらに…

■改行に関して（パルマガ代表メール宛）by さきさきらさん

「先ず結論として改行に関しての私の希望は…
（２）もとの横幅を固定しない（改行なし！）に戻す。…です。

私も21inchモニタを使用していますが、(正確には21inchと17inchのデュアルモニタ)住宅事情上の困難を承知で広いモニタを使用している理由は、複数の作業を平行して進められるからです。あっちこっちにウィンドゥを開いておいて、ちょっとWWWページを書き換えたり、プログラムをちょっと直してみたり、メールを書いてみたり、WWWで情報を探したり息抜きしたり。最近ではタブブラウザなどもありますが、古いタイプの人間なのかウィンドゥを少しづつ重ねながらあちこちに開いておいた方が慣れています。そういう使い方してますと、ウィンドゥの幅も自分で使いやすいように広くしたり狭くしたりしたいので、逆に横幅を固定されると見にくくなってしまいます。(蛇足になりそうですが、私はMacintoshでもWindowsでも上記のようなウィンドゥに対するスタイルでパソコンを使っています)

考え方はひとそれぞれでして、私にしてもパルマガさんが現状の横幅固定を継続しても、あるいは他の方式を採用されても、コンテンツを気に入っていますので、これからも拝見させて頂きます。ただ単に「こんな考え方をする人もいる」程度に考えて頂ければと存じます。」

…【機長コメント】「大は小を兼ねる！」に近いご意見だ。ふむふむ。では、だいたいの意見はわかったのだが、具体的にどうすればいいのか？！それについては

■改行に関して（パルマガ代表メール宛）by Phiさん

「表題の件ですが、横幅が固定されていますと、逆に画面の狭いノートPCで閲覧すると、(特にブラウザのサイドバーを利用している時に)横スクロールが発生して逆に見づらくなってしまいます。

以下に画面の広い環境と狭い環境両方を両立させてみるような対策を書いてみました。

---------------------HTML開始--------------------------------------
【HTML部分は省略 by 機長】
----------------------以下変更なし-----------------------------------

手元のWin2K環境のIE6とMozilla0.9.9とOpera6とNetscape4ではうまくいっている模様です。ここの要点は、CSS2で定義されているmax-widthプロパティです。名前の通り、横幅の上限を決めるプロパティです。CSS対応に定評のあるMozillaとOperaではこれだけでもOKです。ただ、あいにくIE6がこれに対応していないため、Javascript使って強引に横幅を変えています。

思いつきで適当に書いた物なので、細かいところにあらがあるかもしれませんが、ご参考になれば幸いです。」

…【機長コメント】なんと、パルマガのHTMLの理想系をわざわざスクリプトにしてくれた！これは凄い。しかも、あらゆる環境に対応できるようにJavaScriptにまで対応していただいている。これをこのまま使っちゃえば問題ないのだが…

【以降、本題！】

　ところが、機長の頭脳のキャパシティでは、借り物のcgiにJavaScrptなどを挿入することは、怖くて出来ない。しかも、自分でまったく理解できていないものを挿入することは怖くて怖くて！…う～む、困った～！（Phiさん、すまない！）

　　さて、ここで考えるべきことはいくつかあるので、整理しておこう。

１）横幅600ピクセル固定でいいのか？

　どうやら、マエダイチロウさん言うところの「黄金の640ピクセル」環境の場合、600ピクセル固定だとちょびっとハミ出してしまい、横スクロールが必要になるらしい。ということは、少なくとも600ピクセル固定はなさそうだな、という結論。

２）では、固定はやめる？

　実は「大は小を兼ねる！」理論のシンプルさにはとっても乗っていて、これがある種の最終結論だったりもするのだが、もうちょっと粘って理想の方法を探ってみようと決意。

３）では、理想の固定方法は？

少なくとも、環境が千差万別ある以上、ピクセルで固定するのは難しいな～と思っていたら、「％」で固定してみるのはどう？という意見を貰った。「％」で固定するというのは、もちろん、根本的な解決にはならない。それこそ21型モニタで80％に横幅を固定されてもダラ～ンと間延びしたテキストになることは避けられない。その辺は「大は小を兼ねる！」理論で逃げてもらうしかない。でも、多少の間延びぐらいなら、ちょっとだけ避けられるという、ニュアンス的な成功はあるかもしれない。勝算は低くても、ちょっとだけやってみよう。

４）出来れば、自分も含めたライターの負担は減らしたい！

ただし、ここでひとつ条件があった。それは、出来れば、自分を含めた常連パルマガライターが、記事を投稿する際に、いちいち複雑なタグを書き入れる作業はやめてしまいたい！もともと、手軽な更新を目指したパルマガの本旨に外れてしまう。その点、機長には理解できなかったが、Phiさんが書いてくれたように、cgiレベルでそういう処理をしてくれれば、これにまさる幸せはない。そこで、常連ライターの皆さんがいろいろ意見を出してくれて、機長でも簡単にcgiを一行だけ書き換えることで全記事の横幅を固定する方法を考えてくれた。

【仮の結論】

　以上の結果、パルマガはcgiレベルで横幅を固定することが出来るようになった。現在は、横幅を画面の80％に固定するように設定しており、「発掘する楽しみ」（Date: 2002-03-17）という記事以降、その処置がなされている。それ以前の記事については、これまでの600ピクセル横幅固定が優先されている。

【再びご意見募集！】

　さて、この「横幅を80％に固定」したパルマガについての感想を聞きたい。皆さんの環境でいかがだろうか？これで問題がなければ、とっても手軽なのでこのまま行くし、そうでなければ、再び、もとの殴り書きテキストに戻して、あとは読者の皆さんの「大は小を兼ねる！」理論に期待したいと思う。（つまり、適当なブラウザサイズは各人で処置していただくことにする）

　　いかがだろう？→パルマガ代表メール宛先

【オマケ】

なお、いただいたご意見の中に以下のような「ついでに」があったので、紹介しておく。

■パルマガ、レイアウトの件（パルマガ代表メール宛）by 匿名さん

＜要旨＞PiloWebを使った際に、iPAL-NEXT時代は、記事タイトル冒頭の「■」が行の頭に来たのに、パルマガになったら「■」の前に空白が入るので不便。Macintosh環境のぴるごむではうまくいくのに…。

…【機長コメント】どうやらお困りの様子なのだが、機長の頭ではその原因も解決策も浮かばない。ただし、iPAL-NEXT時代とパルマガ時代では、同じcgiを使っているもののバージョンアップしているので、そのせいかも。

■パルマガのフォント設定（パルマガBBS）by たーさん

＜要旨＞パルマガが「MS UI Gothic」というフォントで固定されており、Windowsユーザーであるたーさんの環境で見ると美しくないので変更できないか？どうしても指定が必要ならヒラギノも入れてほしい

…【機長コメント】申し訳ないが、機長は借り物のcgiをそのまんま使っているので、さっぱり不明。すまぬ。なお、フォントについては、極端な趣味の問題に類することなので、ちょっと対応しづらいかもしれない。もし、どうしてもというのであれば、Macintosh環境で見ていただくことをお奨めする。（←もちろん嘘！）