■outerの左上端 <-- 最後は削除する
<a name="">でジャンプすると隠れるアンカー

★ 最大幅:1000pxでそれ以上は左/右/中央カラムがまとまってフロートするページサンプル

中央カラムに<float: right:>を指定することで、中央カラムを先に左カラムを後に記述することが出来る。

Window幅を変えて 1000px以下なら、右カラムは中央カラムの下に移動する

680px以下なら、左カラムが一番上に、中央がその下、右は非表示となる

注意点:


■ リンク先の表示をページ途中にする

<-- left end

right end -->

このページはヘッダー固定のページで、ページ内リンク(アンカー)がヘッダーの影に隠れないようにする CSS のサンプル
通常、ページトップ~途中にページ内リンクを設定し、そのリンク先にジャンプすると、そのリンク先はページトップのヘッダーの裏側に表示されて見えなくなってしまう。
アンカーを <a name="jump"> ではなくて、 ブロック要素に id="jump" style="margin-top:-○px; padding-top: ○px; として負のマージンと同量の正のパディングを指定すると隠れないように出来る



★ float を指定した要素の隣接要素の margin の注意点

float:left を指定した P要素
margin:30px 0 20px 30px;
で 上左30px、右0 のマージンを指定

隣接するこのブロックに margin: 20px を指定した。
 width: ○○ px margin: ○ px
を指定すると、左マージンは親要素の左端起点で計算されて、float要素の右端未満だと右端から margin: 0 で表示されてしまい設定が効かないように見える。
周囲の赤い点線が親要素のボーダーライン

margin: 20px 0 0 250px; で、
左マージン=float要素の幅+float要素の左マージン+目的のマージン を指定した場合のレイアウトで20pxの間隔が得られる

float:left を指定した P要素
margin:0 30px 20px 30px;
で右 30px のマージンを指定

このブロックに margin-left: 20px; を指定しても相殺されるが、左の float指定した要素に右マージンを指定するとその分の間隔は得られる

左側の float要素の高さが過ぎると左側の float要素の下マージンが切れた次の行から回りこむ
注意: float を指定したブロック要素の幅よりも 狭い<左マージン+幅>の空要素を並べると隠れて見えないことがある。




contents end contents end   to top   to middle to middle2


l_side bar ------

ページ内目次 等

-- l_side bar end --

r_side bar

サイト内インデックス 等

-- r_side bar end --