- ベストアンサー
ブラウザの文字サイズを変更すると画像がはみ出る
- ブラウザの文字サイズを変更すると、メニューの画像が表示されない問題について解決方法を教えてください。
- スタイルシートを使用して、メニューの画像が文字サイズの変更に影響されないように設定する方法を教えてください。
- ブラウザの文字サイズを変更すると、メニューの画像がはみ出る問題が発生しています。どうすれば正しく表示されるようになるのでしょうか？
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
いくつか基本的なことを 1) HTMLの要素にはブロック要素とインライン要素があります。 ブロック要素は、その前後にスペースをとって改行される。インライン要素は前後で改行されません。 →7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 ) 2) CSSでは、それぞれについて、とりうるプロパティやサイズの解釈がことなります。 インライン要素はwidthやheightプロパティは非置換インライン要素、tableのrow,rowgroupには使えません。使える場合も意味が異なります。 →8.1 ボックスの寸法（Box dimensions） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#box-dimensions ) →9.4.2 インラインの整形コンテキスト（Inline formatting context） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#inline-formatting ) たとえば、<p>文章<span>長い文章</span>文章</p>というHTMLに対して、 p{width:500px;boredr:solid 1px red;} span{width:200px;border:solid green 1px;} とすると、理解できるでしょう。 <a>要素は、非置換インライン要素ですから、高さの指定をしても意味がありません。IE6はバグがあり機能します。 たとえば、HTMLが次のような場合 <body> <div class="nav"><!-- ナビゲーションだと示すブロック --> <ul><!-- リストだよ --> <li><a href="">なんたらかんたら</a></li><!-- リストの項目 --> <li><a href="">なんたらかんたら</a></li> <li><a href="">なんたらかんたら</a></li> <li><a href="">なんたらかんたら</a></li> </ul> </div> </body> の場合、スタイルシートは /* リスト及びその項目をblockにする */ div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;} div.nav ul li{ /* 項目のサイズを決める */ width:100px;height:20px; /* 一行の高さを決める */ line-height:20px; text-align:center; border:outset gray 2px; /* float:left *//* 横に並べるなら */ } div.nav ul li+li{/* 兄弟 */ margin-top:5px; /* margin-left: 5px;*/ /* 横に並べるなら */ } div.nav ul li a{ /* a要素をブロックに変える */ display:block; /* サイズをいっぱいに */ width:100%;height:100%; /* 背景を指定する */ background:gray url() no-repeat top left; } div.nav ul li a:active{ background-position:bottom; border-style:inset; } 継承されるプロパティは、親に書く。 継承されるプロパティは一度しか書くな。 ・・・メンテナンスが大変になる。継承されるか否かは、ほぼ常識の範囲内ですが、わからないときは、仕様書を見ましょう。 Property index ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/propidx.html ) →調べるプロパティ Inherited? 継承の有無 Initial value 初期値 など
お礼
詳しい説明ありがとうございました。 ブロック要素とインライン要素について理解できました。 問題も解決できました。 大変勉強になりました。ありがとうございました！