• 締切済み

文字のいはみ出た部分の処理について

overflowをつかうとはみ出た部分の処理をしてくれるのは分かります。 ですが、ブラウザがIEだと別段overflowを指定しなくても勝手に広げてくれるのでよかったのですが、ブラウザがネットスケープだと指定しなかったらはみ出てしまうし、スクロールをつける事で表示するしかなくなってしまいます。 ネットスケープでもIEのように適切に広げて表示させるにはどのようにしたらいいですか？

  • CSS
  • 回答数4
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

　遅くなりました。 　すべてが書かれていませんがおよその原因はわかりました。 ・IE6のもっとも有名なバグですが、ブロックのサイズをpadding辺の内側でなく、border辺の内側で解釈することによるものです。 　いずれ勧告されるHTML5では、DOCTYPEからすべてのブラウザが標準モードで動作しますから--HTML5ではすべてのブラウザが標準モードで起動するためだけの目的でDOCTYEが使われます。 [確認] 1) DOCTYPEを下記のように書き換えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 　これでIEでも、他のブラウザと同じような表示になるはずです。 2) はみ出す要素のpaddingの値を0にしてください。 　これで誤差の原因となるpaddingはなくなるので、IEも他のブラウザと同じ表示になるはずです。 [対策] HTMLをウェブ標準に直す。 DOCTYPEとHTMLのマークアップを変更します。 　HTML4.01transitinalですが、さすがに12年も前から「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」と言われ続けていることですから、折角ならstrictにしておくべきでしょう。HTMLにプレゼンテーションに関わるタグや要素が含まれませんから、とってもスリムでわかりやすいものになります。 (strictを身につければ、将来のHTML5への対応も「HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff )」だけを学べばすみます) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 　また、たくさんのエラーがあります。これも直しておきましょう。なぜなら 『CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべき ( http://jigsaw.w3.org/css-validator/#validate_by_input )』だからです。HTMLにエラーがあると、HTML5未満の場合、ブラウザによって文書構造の解釈が異なり、それが原因で表示のずれが出てくるからです。 ・Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) ・Another HTML-lint gateway ( http://cetus.sakura.ne.jp/htmllint/htmllint.html ) 　HTML５未満のHTMLでしたら、後者で十分です。 [主な間違い]--重要なものから ・<a></a>内に<div>は入れられません。行内要素以外は入りません。 ・空要素は/>ではなく、>で閉じます。 ・<input type="image" や<img>にはaltで代替テキストが必須です。 ・改行は<br>を使うべきではありません。 ・内容のない<div></div>があります。--これは省かれているだけとは思いますが ・画像にはデフォルトのwidth,heightを書いておきましょう。 ・いくつか綴りが間違ってます。</storong>,<input type="passwold"・・ 　これらを直さないと、ブラウザ間の誤差を完全に消すことは不可能です。 [ついでに] 　class名は、文書構造がわかるものにしましょう。これは将来のメンテナンスで絶対に重宝します。もちろん強力な検索エンジン対策にもなります。後から見直すのもとっても楽です。 　また、あんなにclassは不要です。あくまでDIVは複数の要素をグループ化するためのものです。そのDIVの子孫セレクタをうまく使えばDIVスープにしなくてすみます。画像しかないのでしたら<p><img src="" width="" height="" alt=""></p>です。 ★HTML4.01strict(Shift_JIS) + CSS2.1 です。 ★タブは＿に置換してあります。 ★Another HTML Lintでチェックしてありますが、accesskeyやtabindexはなくても良いでしょう。 ★どのブラウザでも、ほとんど差なく表示されるでしょう。 ★<!doctype html>にして、 　<div class="header"></div>→<header></header> 　<div class="article"></div>→<article></article> 　<div class="section"></div>→<section></section> 　<div class="footer"></div>→<footer></footer> にしたら、(しなくても)HTML5になります。 ※文書構造がわからないので一部しか手をつけていませんが、概略はわかると思います。 なお、リキッドデザインですから、そのままスマホや幅広ディスプレイで利用できます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} body{background-color:gray;} h1,h2,h3,p{margin:0;line-height:1.6em;} div.header,div.article{width:80%;margin:0 auto;background-color:white;min-width:640px;} div.article{position:relative;min-height:600px;} div.article div.section{margin-left:200px;} h1{font-size:1.2em;text-align:center;} div.loginForm,div.footer{width:194px;position:absolute;} div.loginForm{top:56px;} div.footer{bottom:0;} div.loginForm h2{text-indent:-100em;background:url("image/top_log.png");margin-left:12px;height:65px;width:170px;overflow:hidden;} div.loginForm form{font-size:14px;width:170px;background-image:url("image/line.png");padding:12px;} div.footer address{position:relative;} div.footer address:after{ content:url("image/bottom.png"); poition:absolute;bottom:-40px;left:12px;} } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ページタイトル</h1> ＿</div> ＿<div class="article"> ＿＿<div class="section"> ＿＿＿<h2>本文記事</h2> ＿＿＿<p>ここには本文の記事を書く</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>本文記事</h2> ＿＿＿<p>ここには本文の記事を書く</p> ＿＿</div> ＿＿<div class="loginForm"> ＿＿＿<h2>ログイン</h2> ＿＿＿<form action="./"> ＿＿＿＿<p><input type="t

nanaka2222
質問者

補足

教えていただいた方法を試したのですが全く直っていません。 っと言うよりも表示され方が以前よりもおかしくなりました。 確かにどのブラウザでも同じように見えるようになるのは魅力的かもしれませんが、自分がこのように見えるようにしたいと思って、見せれないのは問題だと思います。 そもそも ＜＜これでIEでも、他のブラウザと同じような表示になるはずです。 このように言われますが私は何度も言うようにIEで見たいのではなくネットスケープで見たいのです。 一番問題となっていた、はみ出た部分を自動拡大されて見えるように

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

＞いえIEでちゃんと表示してほしいのではなくてネットスケープではみ出た部分を適切に広がって見えてほしいのです 　この発想だけは止めてください。そうではなく、ウェブ標準で作成するとすべてのブラウザで期待通りに表示されるのです。そのためには、IEも標準モードで動作するようにDOCTYPEを記述する必要があるのです。 　IEがなぜそのようなおかしな挙動をするかと言うと、IEはかってブラウザ戦争と呼ばれた時代に、ブラウザをつけてOSを販売し独自な仕様で他社を蹴落とす作戦を取ったからです。ところが、それでは、ウェブが理想とする「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )」に反することになり、最終的にMicrosoftも、ウェブ標準に舵を切りなおしたのです。 　そのため、ウェブデザイナーを悩ませ続けたブラウザ相互間の表示差がなくなりつつあるのです。 　あなたが、ＩＥだとちゃんと見えているというのは、--過去の間違った仕様で作成されたページも見れるようにするための----ＩＥの互換モードでＩＥが動作しているに過ぎないのです。 　したがって、あくまでウェブ標準で作成して、ＩＥでのずれがあれば、それを修正するというのが基本中の基本です。なぜなら、ＩＥのウェブ標準への対応がなかなか進まないこと、そして何よりもいまだに古いＩＥが使い続けられていること。マイクロソフトが古いＯＳ(WinXPなど)向けのIE9,IE10を出してこないことが原因なのです。 　ですから、もっとも手っ取り早いのは、まずウェブ標準ブラウザ--firefox,Opera,GoogleChrome,safariに合うようにページを作成して、その上でDOCTYPEを「IEで標準モードで表示されるように」記述すれば、解決するはずです。 　IEをたくさん使っているのは、中国とか韓国とか日本とかで他の国ではそんなことありません。ドイツ(Germany)なんてfirefox(48.9%),IE(21.9%)です。 Top 5 Browsers in Germany from 1 Nov 2011 to 1 Nov 2012 | StatCounter Global Stats ( http://gs.statcounter.com/#browser-DE-daily-20111101-20121101 ) 　具体的な方法はHTMLがわからないとアドバイスのしようがないのですが、基本的にはNo.2に記載した方法になります。

nanaka2222
質問者

補足

では問題となっている箇所の一部分のソースをかきます。 全部書くと膨大になるので html部分 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ～省略～ <div class="left"> <form> <div class="log_top"></div> <div class="log"> <input type="text" name="id" value="ID" size="20" maxlength="8" /><br /> <input type="passwold" name="pas" value="パスワード" size="20" maxlength="8" /><br /> <input type="image" id="in" name="in" src="image/b_l.png" /> <a id="sin" href="agreement/promise.html"><div class="sin"></div></a> </div> <div class="l_bottom"></div> </form> <div class="l_free_top"></div> <div class="l_free"> <strong>メンテナンス情報</storong><br /> 更新日：<b>たまたま</b> </div> <div class="l_bottom"></div> </div> css部分 /*左画面*/ .left{ width:180px; } /*ログイン*/ .log_top{ margin-top:56px; background-image:url("image/top_log.png"); height:65px; width:170px; } .log{ font-size:14px; height:110px; width:170px; background-image:url("image/line.png"); padding:12px; } .l_bottom{ background-image:url("image/bottom.png"); height:40px; width:170px; } #in{ margin-top:2px; } .sin{ width:116px; height:20px; background-image:url("image/b_s.png") } /*ログインここまで*/ /*左フリー*/ .l_free_top{ background-image:url("image/top_free.png"); height:40px; width:170px; } .l_free{ font-size:14px; height:50px; width:170px; background-image:url("image/line.png"); padding:10px 16px 8px 16px; } .l_guide{ font-size:14px; font-weight:bold; text-align:left; padding:0px 10px 0px 0px; background-image:url("image/line.png"); width:170px; } .l_guide ul{ position:relative; top:12px; } /*左フリーここまで*/ cssは全く手直ししていないものです っすみません今日はそろそろ落ちますので数日後返信させていただきますね

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

IEはバグだらけで、それでちゃんと見えるのは当てにしてはなりません。 　IEも(ウェブ)標準モードで閲覧すると、同様になるはずです。 　doctypeスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )を標準モードで起動するように書けば、IE8移行はfirefoxなどの標準ブラウザと同様になるはずです。 IEのバージョンやHTMLとCSSが書かれていないのでわかりませんが、高さ(height)ないし、はば(width)が指定されている場合、内容がそれより多い場合ははみ出して表示される(view)が本来の動作です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Initial: visible visible 内容を切り抜かない。 すなわちブロックボックスの外側にもレンダリングされる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［その他の視覚効果( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html#overflow )］より 　IEの国内シェアが5割を切った( http://lhsp.s206.xrea.com/misc/browser-share-version.html )とはいえ無視するわけにはいきませんし、今後のウェブページは標準モードで作成することになります。(HTML5は必ず標準モード) 　 　また、視覚障害者などがフォントサイズを大きくすると崩れてしまうようでは、ウェブページとはいえません。 　高さやはばの指定を、min-height,min-heightで指定すると良いでしょう。 div.section{min-height:400px;} だと最小で400px確保して、内容が増えれば伸びます。 あるいは、 div.section{height:auto;} でも・・

nanaka2222
質問者

補足

いえIEでちゃんと表示してほしいのではなくてネットスケープではみ出た部分を適切に広がって見えてほしいのです（IEで見えるのと同様に） ネットスケープはバージョン７．０です さすがに拡大して見てもらうというのは私の想定外です 指摘していただいたのですがさすがにそこまでこだわる必要性を感じません すっごく意外なのですがIEはパソコンを買うと標準でついてくると思ったのですが、それでシェアが５割を切るとかがすっごく意外ですね 私個人としてはとしてはIEすっごく使いやすいですし慣れてます そもそもIEがバグだらけといわれましてもIEのバグなんて今までバグだと思えるようなバグは遭遇した事がないのですがどこら辺にバグがあるの？ といった感じですね

  • e_16
  • ベストアンサー率19% (847/4388)
回答No.1

ネスケなんて使用ユーザーが少ないから対処しないほーが身のためだよ 対処すると、他のブラウザで崩れるから(^_^;

nanaka2222
質問者

補足

少々事情がありましてそういうわけにも行かないのですよ 長くはなりますが現在パソコンが全て壊れてましてこのパソコンは画面が真っ暗だけどネットはできる 別のパソコンはネットはできないけど画面が普通に表示される（真っ暗ではない） そのため別のパソコンでできばえを確認しているのですがこれが普通のhtmlやcss でできたHPを作るのならブラウザIEでいいのですが私が作ろうとしているのはCGIでして、ネットを使う環境が整っていなければIEではCGIが動作しているのか確認ができないのです そのためネットスケープをしようする（インターネットにつながなくてもCGIの動作が確認可能）事になるのですがIEではちゃんと表示されていたものがネットスケープだと表示がおかしくなりまして、少しだけ手直ししないとできてるのかわからないのです （paddingを使うと手直し、文字がはみ出る、他にも数箇所手直し部分がありそう） そのためネットスケープでもちゃんと表示されるようにしたいのです。 それにネットスケープでも対応可能なページにすればより見ていただけるユーザーが増える可能性がありますしね（CGIを使うと可能っぽい） こんな事を書くとパソコンを買うか修理しろと言われるかもしれませんがちょっと今は難しい状況でして...

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する