自分のWEBデータのどこが違うのかを探す方法2 [CSSが違う場合]

自分のWEBデータのどこが違うのかを探す方法1
の方法ではHTMLの間違いを見つける事は出来ますが
CSSのまちがいを見つける事が出来ません。
CSSのまちがいは以下の方法で修正確認します。

1.間違っている頁をSafariで表示

2.ブラウザ画面内でControlキー+クリックで
「要素の詳細を表示」を選択
↓
するとこのような画面になる

3.今回の例の修正箇所は<address>〜</address>の部分の

背景が出ていない事なので三角をクリックして開き▼

<address>〜</address>の部分を探す

4.<address>〜</address>の部分を表示した際に
右下の項目から {} =スタイルを選んで
「スタイル・ルール」を表示する

5.今回は背景が表示されていないので

ここで見ないといけないのは

の行。試しに↑これをクリックしてみると
↓
このようになる。
「これは画像が表示できない」「そのURLには画像が存在しない」
という表示。
つまり、URLが間違っています。

URLが間違っている事がわかったので、

修正するために青い文字の部分をダブルクリック

http://自分のURL/kadaisite/img/bk_footer.png

は、index.htmlからみて１つ上の階層なので

url(../../img/bk_footer.png)ではなく

url(../img/bk_footer.png)です。

[これは相対パスと階層の考え方を理解していないとなおせません。]
WEB 第５回 5/10 やWEB第15回 6/21を思い出しましょう。
※参考ページ：HTMLや画像ファイルの位置指定方法／絶対パスと相対パス

つまり、../が１つ多いので消します。
(../を1つ消す=　http://自分のURL/img/bk_footer.pngを
http://自分のURL/kadaisite/img/bk_footer.pngにするという意味になります)

すると
画像が正しく表示されます↓

背景画像がSafari上にも正しく表示されます

../が一つ多かったときの画面↓と比べてみましょう

修正箇所がzakka.cssの137行目だとわかったので

Dreamweaverを使ってその部分のurlを

url(../img/bk_footer.png)に修正しましょう。

Arsip Blog