site title

template by Hybrid Design NAVI 2005

CSSデザイン総括

拙作CSSテンプレート

　リンキング スタイルシートの内容

CSSデザインの留意点

横配列のBOXが複数の場合、そのBOXの枠線から外側にmargin指定があると、ネットスケープはその前後におけるfloatの回り込み指定の後、回り込み解除のclear:bothは有効に機能するが、IEでは同一の指定でも空間領域のサイズが異なる。

• 例：拙作CSSテンプレートの場合
  中央コンテンツ外枠にmargin属性を指定したとき発症。
  左右のメニューはメニューの外枠（作例は非表示）の中にそれぞれのメニュー項目が入っている。

上述のような場合、そのままIE寄りのデザイン設定をするとネットスケープと見比べたとき、ネットスケープではデザインが大幅に崩れる。
ネットスケープよりの設定ではIEで見たとき、すべてのBOXが左側にシフトし、右側にポッカリと空間が発生する。

• 解消策：中央コンテンツ外枠にmarginを指定しない。
  中央コンテンツ内の内容を別途、
  <div　テキスト周りのmargin指定をしたスタイルシートの属性値>で囲む。

HTMLソース表示

<div class="centering_template">
<div id="head_frame">
<h1 id="h1_deco">site title</h1>
<div id="h1_tonari">
template by Hybrid Design NAVI 2005</div>
</div> <div id="menu_left_frame">
<div id="menu_left_top">
<a href="index.html">HOME</a>
</div>
<div class="menu_left">ハイブリッドデザイン</div>
<div class="menu_left">CSSデザイン</div>
<div class="menu_left">xhtml1.0</div>
<div class="menu_left">xhtml1.1</div>
</div> <div id="main_contents">
<div id="text">
<h2>CSSデザイン総括</h2>
<br />
<h3>拙作CSSテンプレート</h3>
　<a href="css/css_temp_css.txt">
リンキング スタイルシートの内容
</a>
<div><br /></div>
<h3>CSSデザインの留意点</h3>
（省略）
<div><br /></div>
<h4>HTMLソース表示</h4></div>
（省略）
</div>
<div id="menu_right_frame">
<div class="menu_right">リンク</div>
<div class="menu_right">掲示板</div>
<div class="menu_right">お問い合わせ</div>
</div> <div id="foot_frame">
Copyright © Hybrid design NAVI 2005 all right reserved,
</div>
</div>