文字サイズを変更してもくずれないレイアウト

質問

お世話になります。

CSSで文字サイズを「小・中・大」と変更できるサイトはよく見かけるのですが、文字サイズを変更した際に、レイアウト（背景の画像や枠の幅）は同じなので、1行だったものが2行になってしまったりします。

それを回避したサイトを制作するにはどのようにしたら良いでしょうか？
現状の策としましては、
・CSSを3つ用意し、さらにそのCSSに合わせたレイアウトのHTMLをそれぞれ用意しておく。
※この場合、ページの進退でそのCSSをそのまま引き継ぐ方法が未解決です。

どなたかご教授いただければと思います。
以上、宜しくお願い致します。

回答No.5

metametamu

短い文章の改行の抑止ならwhite-space:nowrap;を使えばいいと思います。

エラスティックレイアウトの場合横スクロールの可能性が高いのでサイトの利便性を損ないやすくなります。
Yahoo!のトップページを例にすると、19インチディスプレイでそこそこの文字サイズでも使いにくいサイトになります。

基本的には内容が可変になってもデザインが崩れないようにサイトを組んでおいて、エラスティックレイアウトと一緒にmax-widthを指定するのをオススメします。
拡大するとレイアウトを保ったまま拡大され、ウィンドウ幅いっぱいになると仕方なく文章などは改行されるというパターンです。

ただ、やっぱり背景画像はどうしようもありません。
リピートしない画像を使いたい場合は難しいです。

＞CSSを3つ用意し、さらにそのCSSに合わせたレイアウトのHTMLをそれぞれ用意しておく。

たしかjavascriptでウィンドウ幅によってcssを切り替えるライブラリみたいなのがあったような気がします。
ですがそこまでやって閲覧者に使いやすいサイトになるかは疑問です。

回答No.4

神崎 渉瑠（@taloo）

heightとoverflow:autoを指定すれば、heightの枠内で表示されますので、
画像の表示サイズに合わせることが出来ます。
その高さを超えた行はスクロールを使って表示することが出来ますが、
それが短所となり得るかもしれません。

CSSやJavaScriptなどで文字サイズを変更しても、ブラウザの設定が最優先されますので、
あまり意味はないと思います。

> ・CSSを3つ用意し、さらにそのCSSに合わせたレイアウトのHTMLをそれぞれ用意しておく。
> ※この場合、ページの進退でそのCSSをそのまま引き継ぐ方法が未解決です。

cookieを利用して、最後に表示していたCSSファイルをページ読み込み時に使用するようにしてみて下さい。

添付ファイルはOKWaveのトップページのタイトル部分と、投稿ページの一部です。
「運営スタッフに連絡」の部分にheightとoverflowが指定されていますので、この様に表示されます。
「この回答は参考になった」はheight指定のみですので、文字が重なっています。

WindowsXP IE8、文字サイズ「小」、ズーム「100%」。

回答No.3

ORUKA1951

基本的には、文字サイズで枠のサイズを決めればよいはずです。
たとえば、width:200em;とか
　しかし、お勧めしません。
　なぜなら、訪問者のディスプレイの大きさは様々だからです。携帯端末(PDA)やネットブックのように600px程度の人から、1700px程度の幅広のディスプレイの端末があるからです。
　一方で、視覚障害者はフォントを大きくして閲覧することが多いですね。
　だとすると、レイアウトは保ったままフォントを大きくできる・・すなわち一行が２行、３行になっても情報が伝えられるようにするのがHTMLの目的であり、理念だから。
　それが嫌ならPDFにして配布するべきです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 )］より

　また、ブラウザはフォントサイズを自由に変更できます。たとえばfirefoxでは、Ctrl+＋、Ctrl+－、あるいは表示→ズーム
　この場合、貴方が言われているように枠ごとサイズは変わります。
　もちろん画像だけ拡大したり文字だけ拡大することも可能

　CSSなどでそこまで指定する--利用者に強制する---のはおせっかいです。

回答No.2

nori_007

google で"エラスティックレイアウト"で検索してみてください。
参考になると思います。
ただ今後は、文字サイズだけ変更するのでは無く、画像や枠も含めてズームするのが主体になると思います。併せて検索してみてください。

回答No.1

fujillin

＞CSSで文字サイズを「小・中・大」と変更できるサイトはよく見かける
＞のですが、～～
CSSの機能だけで実現しているのでしょうか？　ちょっと思いつかない…

もしかして、javascriptを使用しているのならば、文字サイズ変更と同時にCSSを入れ替えるものがあちこちにあるみたいです。

以下テストはしていませので内容は不明ですが。
　http://blog.webneta.net/archives/2007/04/10/

クッキーに保存して設定を引き継げるもの
　http://phpspot.org/blog/archives/2009/04/5.html
　http://c-brains.jp/blog/wsg/08/06/30-160150.php
（クッキーの対象をそのページのみかサイトにしているかは確認していません：ページだけになってるかも…）

意味が違ってたら失礼。

でも、ブラウザのユーザ設定でも文字サイズを選べるので、文字のサイズを変えるのはおおきなお世話という説も聞いたことがあります。