CID2014WEB: 1学期 WEB 第５回リンク(P.72)／絶対パスと相対パス

レイアウト崩れの原因 - 閉めのDIVタグの過不足

CSSレイアウトは、DIVタグを入れ子にして構成していきますが、

いくつものDIVタグが重なりあい、

DIVタグを閉じるのを忘れてしまったり、

どれがどのDIVタグの閉めなのか分からなくなったりしてしまいます。

右は、DIVタグを閉め忘れた崩れの例です。----------------------->>

DIVタグが閉まっていないことで、右に来るべきサイドバーが、メインスペースの枠の中に入ってしまうことで、崩れが生じています。

崩れを起こさないよう(=閉じタグを入れ忘れないように)、あらかじめ閉めのDIVタグに「目印」をつけておきましょう。

しかし、ただ目印をつけたのではブラウザ上にも表示されてしまいますので、「コメントアウト」を利用してこれを記載します。

[閉めのDIVタグを忘れないための目印のつけ方]

<-- ○○○○ -->と囲ってあると、ブラウザには表示されないようにすることができます。

閉じるDIVタグを忘れてしまうと、後からどのDIVタグの閉めが抜けているのか調べるのは大変ですし、

それ以前にDIVタグを閉め忘れていることに気づかなかったりするので、

しっかり目印をつけておくことをオススメします。

このpageの一番上の例題の解説を読んで階層を理解しましょう。

[相対パス]

今編集しているhtmlファイルから見て表示したいファイルがどこにあるか

今編集しているhtmlファイルの

　１つ外のフォルダ(１階層上)に表示したい画像がある場合= ../フォルダ名/画像名

　２つ外のフォルダ(２階層上)に表示したい画像がある場合= ../../フォルダ名/画像名

　同じ階層のフォルダに表示したい画像がある場合=  フォルダ名/画像名

[絶対パス]

ネット上のどこにそのファイルがあるか

http://自分のサイトのURL/フォルダ名/画像名

参考：絶対パスと相対パス  [１時間で作るホームページ WEBデザインの素]

http://www.shoshinsha.com/hp/1hour/know/pass.html

CID2014WEB