ブラウザの「文字を大きくする」で文字を大きくしていっても
確実にコンテンツが横にはみださないようにするコーディングテクニックはありますか?
ものによってはdivをかさねて書いている場合、divの横幅をちゃんと規定していても、文字を大きく表示されると横幅からはみ出してしまうことがあります。
また、テーブルを使った場合にそういう現象が起こることもあります。
つまり、普通にwidthを設定してコーディングする程度では、文字を大きく表示されると横にはみ出てしまう可能性があるのです。
よろしくおねがいします。
No.1ベストアンサー
- 回答日時:
widthプロパティは、その指定する対象がブロック要素なのか、行内要素なのか、置換インライン要素なのかで意味が変わります。
文字--非置換行内要素だけが内部にあるばあいは、文字を大きくしていってもはみ出すことはありません。
つまり、普通にwidthを設定してコーディングする程度では、文字を大きく表示されると横にはみ出てしまう可能性はないのです。置換インライン要素やpreなど、あるいは内部のブロック要素は、その大きさが置換された要素のサイズに依存しますからはみ出します。親ブロックに対して自身をブロック要素にして親ブロックの値を参照できるようにするとはみ出しません。必要ならoverflow:autoとかにすればよいですが・・
まあ、多くは、中に何が入るかを考慮してデザインしていけば問題ないはずです。
もうすこし具体的に例がないと説明しかねます。多くの場合、そのようにデザインされていないから必然的にそうなってしまうことが多いと思いますが・・
この回答への補足
丁寧な解説ありがとうございます。
例えば下記のサイトで文字サイズを大きくしていきますと、横にはみ出してきます。(縦書き表示が効いている場合の話です)
http://cpplover.blogspot.jp/2011/03/css.html
そこで、このソースをローカル環境にコピーし、divのwidth指定をしたらよいのではないかと思い、width指定を%やpxで行いましたが、
効きませんでした。それどころか、width指定すると、ブラウザの文字サイズを変化させると、ある文字サイズにおいて、はみ出るどころか、逆に文章領域が左寄せに狭まって右側におおきな隙間ができたりしてしまいます。pタグにwidthを指定しても同様の症状です。
これはどういうことなのかとおもいました。
No.2
- 回答日時:
縦書きは、最終的に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を使ってます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- 画像編集・動画編集・音楽編集 文字等を拡大して印刷するときに生じるかもしれない問題について 3 2023/01/05 04:07
- その他(プログラミング・Web制作) プログラミング pythonの問題について 2 2022/04/19 00:41
- Java 改行含むテキストの表示の仕方 1 2023/06/13 06:44
- Word(ワード) 最高裁判所から通達がある Wordの書式設定。所謂 裁判所に提出するすべての書類のことです。 A4縦 2 2022/12/23 15:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
質問1.
-
タグは大文字と小文字どちらが...
-
親要素・子要素
-
タグの締め
-
アコーディオンメニューの二階...
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
角丸画像の背景色を透明にした...
-
2個のFormを横並びにしたい
-
<div align="center">を使わず...
-
inputタグはformタグで必ず囲む...
-
input type="file"の幅と高さ
-
テキストボックスの中にリンク...
-
【C++】Vector、listの要素比較...
-
画像の回り込みと、見出しの背...
-
HTMLです 四角みたいにして中に...
-
取消し線に色を付ける
-
emとstrongの反対
-
HTMLタグ間にはさまない場合に...
-
リンク付き画像を右よりに表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
還暦を過ぎた方々に質問です。
-
「諸要素」とはどういう意味で...
-
質問1.
-
textareaの幅を画面と合わせたい
-
角丸画像の背景色を透明にした...
-
2個のFormを横並びにしたい
-
テキストボックスの中にリンク...
-
HTMLです 四角みたいにして中に...
-
CSS:overflow要素の印刷について
-
input type="hidden"で取得した...
-
tdに対してmin-heightの定義、...
-
HTMLページ上でiframeを最前面...
-
タグは大文字と小文字どちらが...
-
HTMLです
-
2行にしたい要素、改行か分割...
-
改行ほどは行かないけど、若干...
-
H1タグを画像にしたい
おすすめ情報