文章を横に広げさせない



0   名前: マウス : 2007/03/22(木) 19:53  ID:0qCatlma sub-bK
検索のキーワードが思いつかなかったので過去ログ検索していないのですが、もし既出の質問でしたらお詫び申し上げます。


最近は大きい画面のパソコンが増えてきましたね。ノートでも普通に15.4。電気屋さんに行く度に、その大きさに圧倒されます。
そこで、いつも不安になることがあります。

自分が運営しているホームページはフレームを使用しており、自分のパソコンの画面サイズが15なのですが、それまでは文章が横に広がっても読むのに苦にならない幅に設定しています。
しかしながら、新しい15.4や、デスクトップになると17なんて当たり前ですから、そんな大きい画面でフルスクリーンで見られちゃうと、文章がビーっと横に広がりすぎて読みにくいのではないか、と危惧しています。

ウインドウのサイズをいろいろ変更してくれるユーザーならよいのですが、ただひたすら全画面表示で自分のHPを閲覧している人がいたら、すごく文章が読みにくいだろうなと思ってしまいます。


そこで、ウインドウがある一定のサイズを超えたら、文章が端から端まで広がらず、ある一定のところで折り返すような設定はできないものでしょうか?

TableというかTD(?)設定を組み込んでしても良いのですが、縦に3つに区切っているフレームページもあるため、まだ昔の小さなノートパソコンで見ている人はとことん横スクロールばかりになってしまって見づらくなってしまうと思うんです。
なので、例えば横に800ピクセルまでは(伸縮自在で)普通に見れるけれども、それを越える表示になったら800ピクセルの位置で文章を折り返すようにする、ということは可能でしょうか?


少しわかりづらい質問かもしれませんが、アドバイスいただけると幸いです。
よろしくお願いします。

1   名前: K+S : 2007/03/22(木) 19:53  ID:nROqylMa sub-YS
max-width プロパティを用いれば実現できます。
<body>
<div id="container">
content
</div>
</body>
のような <div id="container"> に対して適用させればよいかもしれません。

ただ、ハイビジョンテレビをパソコンのディスプレイとして用いるようなときでも WUXGA ではなく SXGA などにしていると思います。
画面のサイズが大きくても解像度が比例して大きくなるとは限りません。設定次第です。

また、解像度が大きくても、その設定においてすごく文章が読みにくいと感じるのは閲覧者です。
それはページ製作者側ではなく閲覧者側の問題ですので、閲覧者側で対応すべきです。
閲覧者がユーザスタイルシートを用いたり、前述のように解像度を下げたり、あるいは相応の設定ができるUAを用いれば解消できます。

例えば、横幅が 800 ピクセルを超えて横に伸びてしまうとデザイン的に問題がある、というのであれば max-width プロパティを指定するなどして対応します。

横に長いと読みにくいと考え、それを見越して指定するのは構いませんが、制限された幅よりも大きな解像度で横に広げて見たいという人を制限してしまうことになります。
# それでもなお、横に広げて見たい人はユーザスタイルシートで max-width プロパティ指定を打ち消せばよいのですが。


> 文章がビーっと横に広がりすぎて読みにくいのではないか、と危惧しています。
懸念しなくても大丈夫です。

2   名前: マウス : 2007/03/22(木) 19:53  ID:lLh4dlPt sub-bK
お返事ありがとうございます。

>懸念しなくても大丈夫です。
ありがとうございます。
実は、何度もこの問題について考えたのですが、「そんなデカイ画面で、文章を横に広げさせて見る方が悪いよなぁ」なんて勝手な結論を出してしまっていたのですが、そこまで懸念する必要もないのでしょうか。
考えてみれば、例えばこの掲示板も文章が横に広がっていますね。
自分がどちらかというと、文章がバーっと横に広がってると読みづらくて読むのをやめてしまう人間なので、その辺りで不安だったのですが、今は普通に横に広がった文章をこうしてちゃんと読んでいるわけですし。

ただ、あまり多くのサイトを見るわけでは無いので一概には言えませんが、これからどんどん大画面のPCが出てくる時代なので、作る側も例えばTABLE設定で横幅を指定して中央によせておく、などの「見やすさ」を求められるのかなぁと思ったりもしています。

いろいろ閲覧する際の設定変更が可能な人なら自分で見やすいようにサイズ変更をするのでしょうが、お年を召した方や、ただ知識もなくネットをするだけの人、子供などになると、もしエクスプローラが全画面で表示されていれば、「見づらいな」と思いながらも結局その大きさのまま見続けることになるんですよね…。

う〜ん、どうなんでしょう。
いちおうフレーム分割してますから、文章が横に広がると言っても大画面の端から端まで広がるわけでは無いのでそこまで気にする必要もないかもしれませんが…。
先述したように、まだ小さい画面で見ている人は、TABLE設定をしておくと指定した横幅より小さなウィンドウで閲覧した場合、横スクロールが出て見づらくなりますしね…。


大変申し訳ございませんが、(まだ設定するかは未定ですが)max-width プロパティについてもう少し設定の仕方などを詳しく教えていただけると助かります。
> <div id="container"> に対して適用させればよいかもしれません。
具体的にどのように適用させればよいのでしょうか?

お手数ですがよろしくお願い致します。m(__)m

3   名前: カヅサツ ◆ThCi95HEzw : 2007/03/22(木) 19:53  [URL]  ID:O5hEMlpW sub-r2
> 実は、何度もこの問題について考えたのですが、「そんなデカイ画面で、文章を横に広げさせて見る方が悪いよなぁ」なんて勝手な結論を出してしまっていたのですが、そこまで懸念する必要もないのでしょうか。

懸念する必要はないと思います。

> いろいろ閲覧する際の設定変更が可能な人なら自分で見やすいようにサイズ変更をするのでしょうが、お年を召した方や、ただ知識もなくネットをするだけの人、子供などになると、もしエクスプローラが全画面で表示されていれば、「見づらいな」と思いながらも結局その大きさのまま見続けることになるんですよね…。

そう人のために表示領域を固定したものを提供するのではなく、表示領域や文字サイズは変えられるものであるということを案内するのが望ましい HTML文書の形であると思います。

あるいは、表示領域を固定したもの「も」提供できるならそれも良いでしょう。
代替スタイルシートを用意するだけで基本的には十分ですが、もう一歩踏み込んで、CGIなりなんなりで読み手が直感的に適用する外部スタイルシートを選べるインターフェースを用意するという手があります。

が、「1行の文字数」という問題だけであれば、1行あたり80文字前後が「大多数にとって読みやすいものだ」と決め手かかるのは、それほど勘違いではなかろうとも思います。
であれば、widthプロパティに em単位の値を指定するのが良いのではないかと思います。

> max-width プロパティについてもう少し設定の仕方などを詳しく教えていただけると助かります。

設定の方法そのものは、widthプロパティと何ら変わりません。
って確か Win IE は解釈しないのではなかったかしら。

4   名前: 匿名 : 2007/03/22(木) 19:53  ID:6fAvcTJO sub-kJ
>>2
> 文章がバーっと横に広がってると読みづらくて読むのをやめてしまう人間なので

だから、個人的にはリストや表で文章にメリハリを付けるようにしている。

> 作る側も例えばTABLE設定で横幅を指定して中央によせておく

さすがにそれは前時代的な手法。そういう非アクセシブルな手法は、前世紀で絶滅してほしかった。

> お年を召した方や

に関して言えば、そういう方々用のサイトをのぞいてみると良い。「ヘルプ」ページにフォントの大きさの変え方などが丁寧に説明されており、かつ「ヘルプ」ページにはどのページからでも飛べるようになっていたりする(当たり前のことなんだけどね)。また、Cookie を使用して、利用者にとって見やすい大きさを保存しておくこともできる。行あたりの文字数は、フォントの大きさでカバーできることもある。

# "container" と言うのは id 名ではなく class 名の付け方だと思う(もっと言えば、論理構造ではなく見た目・機能に依存した名前付けなので、個人的に好きじゃない)。


>>3
IE7 の標準モードなら、max-width をサポートしているよ(互換モードは駄目)。

5   名前: カヅサツ ◆ThCi95HEzw : 2007/03/22(木) 19:53  [URL]  ID:O5hEMlpW sub-r2
> IE7 の標準モードなら、max-width をサポートしているよ

ヤァ! それは朗報さ!

6   名前: マウス : 2007/03/22(木) 19:53  ID:wjWoB2XS sub-bK
お二方、ありがとうございます。

そうですね。逆にサイズや大きさの変更を案内する方法は思いつきませんでした。そうか…。そういうやり方もあるのですね。

TABLEって前時代のものなんですか…。知らなかった…。


どうも、丁寧なアドバイス本当にありがとうございました。
不安が軽くなりました(*^-^*)
まだ未定ですが、そんな訪問者が多くていろんな対応をとらなくちゃならないようなサイトでもないので、どこかに注意書きというか案内みたいなものを追加するだけに留めたいと思います。

相談してよかったです。
本当にありがとうございました。

一覧へ戻る