- ベストアンサー
HTMLで、横幅を小さくしても文字が崩れない方法
自分はHTMLでWebページを作成しているのですが、HTMLでページを作成したら、ウインドウの横幅を小さくすると文字もその横幅に合わせます。 普通の文章ならその方が良いとは思うのですが、見出しなどの場合は文字が崩れてしまいます。 例えば、見出しを適当に「あいうえおかきくけこ」とした場合は、 あいうえおかき くけこ という風に、横幅を小さくすると一行に収まらなくなってしまいます。 そこで、横幅が見出しより短くなったら横スクロールバーを表示させて、横スクロール出来るようにしたいのですが、どうすればそのような事が実現できるのでしょうか？
- bururutti-2
- お礼率100% (795/795)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTMLを学び始めたとき、最初の最も重要な知識があります。 ★HTMLは、ワープロやDTP( http://ja.wikipedia.org/wiki/DTP )のような見栄えや印刷を目的としたものとは根本的に異なります。【とても、いや最も重要なことです。】 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より 視覚障害者がフォントを大きくして、画像を表示しないで読もうとしたり、あるいは読み上げソフトで閲覧したり・・・、そのときに、そこに何が書かれているかをマークアップする方法です。見出しは<h1>～<h6>で、引用は<blockquote>で、重要なことは<strong>で印を付ける(マークアップ)していくのです。 そのために、ディスプレイの幅に合わせてテキストが折り返されるようになっているのです。可能な限り横スクロールを出さないようにする。・・・これは著者が最も配慮しなければならないことでもあるのです。 たとえば、NOBRのような【特定のブラウザのみ有効--非推奨どころか存在してはならない】属性を使ったとしても、それが有効な端末は限定されますし、横スクロールできない端末だと読むことすら出来ない。 ★HTMLは、その文書がどのような構成要素(エレメント)で成り立っているかを指定するものであって、それをどのように表示するかはスタイルシートに任せます。 ★たとえば、「横幅が見出しより短くなったら横スクロールバーを表示させて、横スクロール出来るようにしたいのですが、」の場合は、screen端末に対して、ページ幅の最小・標準・最大サイズを指定します。 <body> <div class="section"> ここに文書を書く </div> </div> その上で @media screen{body>div.section{width:80%;min-width:450px;max-width:900px;}} とする。 こうすることでscreen端末=一般的なブラウザ)に対して、ウィンドウ幅の80%だが、ウィンドウが小さい場合は450pxより小さくしない、幅広のウィンドウでは900pxより広くしない、その他のときはウィンドウ幅の80%でとなる。
その他の回答 (1)
- ok-kaneto
- ベストアンサー率39% (1798/4531)
タグならnobr http://www.tagindex.com/html_tag/text_font/nobr.html スタイルシートならnowrap http://www.tagindex.com/stylesheet/text_font/white_space.html もしくはflashにするとか。
お礼
有難う御座います。見出しの方は上手くいきました。
補足
見出しの方は上手くいきましたが、今度は別の問題が発生しました。 横幅を短くすると見出しは一行のままで表示されるのですが、本文は横幅の長さに合わせてしまいます。 横スクロール出来るようになったにもかかわらず横幅の長さに合わせるのは不自然です。。 横スクロール出来るようになったら本文も固定させたいのですが、どうすればよいのでしょうか？
お礼
なるほど、HTMLではあらゆる環境の事も考えて記述しなければならないのですね。 パソコンでは意図した通りに表示させる事が出来ました。 それ以外の端末ではどのように表示されるか分かりませんが・・・ 回答有難う御座いました。