プロが教えるわが家の防犯対策術!

ブラウザの「文字を大きくする」で文字を大きくしていっても
確実にコンテンツが横にはみださないようにするコーディングテクニックはありますか?
ものによってはdivをかさねて書いている場合、divの横幅をちゃんと規定していても、文字を大きく表示されると横幅からはみ出してしまうことがあります。
また、テーブルを使った場合にそういう現象が起こることもあります。
つまり、普通にwidthを設定してコーディングする程度では、文字を大きく表示されると横にはみ出てしまう可能性があるのです。

よろしくおねがいします。

A 回答 (2件)

 widthプロパティは、その指定する対象がブロック要素なのか、行内要素なのか、置換インライン要素なのかで意味が変わります。


 文字--非置換行内要素だけが内部にあるばあいは、文字を大きくしていってもはみ出すことはありません。
 つまり、普通にwidthを設定してコーディングする程度では、文字を大きく表示されると横にはみ出てしまう可能性はないのです。置換インライン要素やpreなど、あるいは内部のブロック要素は、その大きさが置換された要素のサイズに依存しますからはみ出します。親ブロックに対して自身をブロック要素にして親ブロックの値を参照できるようにするとはみ出しません。必要ならoverflow:autoとかにすればよいですが・・

 まあ、多くは、中に何が入るかを考慮してデザインしていけば問題ないはずです。

 もうすこし具体的に例がないと説明しかねます。多くの場合、そのようにデザインされていないから必然的にそうなってしまうことが多いと思いますが・・

この回答への補足

丁寧な解説ありがとうございます。
例えば下記のサイトで文字サイズを大きくしていきますと、横にはみ出してきます。(縦書き表示が効いている場合の話です)
http://cpplover.blogspot.jp/2011/03/css.html
そこで、このソースをローカル環境にコピーし、divのwidth指定をしたらよいのではないかと思い、width指定を%やpxで行いましたが、
効きませんでした。それどころか、width指定すると、ブラウザの文字サイズを変化させると、ある文字サイズにおいて、はみ出るどころか、逆に文章領域が左寄せに狭まって右側におおきな隙間ができたりしてしまいます。pタグにwidthを指定しても同様の症状です。
これはどういうことなのかとおもいました。

補足日時:2012/07/25 02:21
    • good
    • 0

 縦書きは、最終的にCSS3でも採用されません。

当初の案にはあったのですが、早々に破棄されました。

 縦書きという特殊な状況については無理でしょう。

 縦書きの場合、widthを行の長さにするのか、列数にするのかで、90度異なる対象になってしまいます。
様々な理由で、私は縦書きは使いません。その必要があるときはPDFにします。この二つは根本的な理念が異なります。


【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
【引用】____________ここから
特定の環境に左右されずに全ての環境でほぼ同様の状態で文章や画像等を閲覧できる
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Portable Document Format - Wikipedia( http://ja.wikipedia.org/wiki/Portable_Document_F … )]より

★私はウェブサイトでは「どんな環境からもWebの情報を利用できるようにすべきだ」と考える場合はHTMLを使用し、「(PDFが利用できる)全ての環境でほぼ同様の状態で文章や画像等を・・」の場合だけPDFを使ってます。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!