８日に開講したgaccoのJava講座、受講するか否かの決断をする前に Progate で学習しているJavaを終わらせようと進めていましたが、残念ながらこの画面を見て終了(T_T)
ProgateのJavaコース 無料範囲終了
ここまでの学習でgaccoのJava講座についていけると思えばすんなり受講してたのでしょうが、受講に踏み切る決断はできなかったので、図書館から借りてきたHTML&CSSの本を見ながらサンプルWebサイト作成の続きをやってました。
前回はBracketsだとheader-logoが表示されないとか、保存したはずの内容が保存されていないという現象が壁になりましたが、今回はCSSファイルでbackground-image(背景画像)を指定してもプレビューすると表示されないという現象が壁になりました。
これはBracketsのみならず、AtomもTeraPadも同じ状態。
原因として考えられることをネットで調べると、
- 画像ファイルを指定するパスが間違っている
- コードの入力ミス
- 画像そのものが存在しない
というようなことが書かれていたのですが、確認した限りではコードの入力ミスは見つからないし、画像ファイルのURLはheader-logoと同じ要領で指定したから合ってるはずだし、画像ファイルはもちろん存在しているし、もう出版社にお問合せしようかと思うほどのお手上げ状態でした。
でもお問合せする前にもう一度コードを書き直してみようと思い、AtomでHTMLとCSSの新規ファイルを作成。
基本的には同じことを繰り返すのですが、header-logoとbackground-imageで画像を指定するときだけ、今までと違う方法に変えてみました。
そしてプレビューで確認したところ・・・
Atomで背景画像の表示に成功したときのスクショ
お手上げ状態からの脱出に成功!!＼(^o^)／
続いて背景画像が表示されないファイルをBracketsで開き、background-imageのURLをAtomで画像指定したときと同じ方法で再入力。
プレビューを確認したら、今度は背景画像は表示されたけど左上のheader-logoが非表示になってしまいました。
背景画像が表示される前まではheader-logoはちゃんと見えていたのになぜ？と思いましたが、双方の画像ファイル、URLの入力方法が違うんですよね。
実はheader-logoの画像を指定したときや、background-imageで指定した画像が表示されなかった時のURL入力方法はこんな感じでした。
今までの画像ファイルURLの取得方法
画像ファイルのプロパティから場所をコピーしてHTMLやCSSのURLの入力部分に貼り付け、そこに画像ファイル名を追記していたのです。
たとえばHTMLのheader-logoの部分をコードとして書くと、
<a href=”index.html”><img src=”C:\Users\ユーザー名\Documents\任意フォルダ名\任意フォルダ名\images/logo.png” alt=”SNAPPERS”></a>‴
CSSのbackground-imageのほうも、上記と同じくCドライブから始まるURLでした。
絶対パスというやつですね。
でも実際に画像表示が出来たコードは
<a href=”index.html”><img src=”images/logo.png” alt=”SNAPPERS”></a>
CSSのほうは
background-image: url(images/bg-index.jpg);
HTML&CSSのファイルとサンプルWebサイト用の画像フォルダが同じフォルダに入っていれば、画像ファイルのURLはあっさりした表示になりますよね。
こっちは相対パスってことになりますが、私の中では絶対パスと相対パスの違いで画像が出たり出なかったり…なんてことになるとは思っていなかったので、相対パスで背景画像が表示されたときは『えっ!?』という感じでした。
あ、Bracketsで非表示になってしまったheader-logoは、入力候補から画像ファイルを選択する方法で入力しなおした結果、以下のようにちゃんと表示されましたよ。
Bracketsのファイルでheader-logo復活
初めから相対パスで入力していれば問題なく進めたんですよね。
わかる人からすれば壁でもなんでもなくて、『なんでこんなことがわからないの？』って感じなのかもしれませんけど、絶対パスとか相対パスなんてのを意識して画像ファイルを扱ったことなんてないですから・・・
でも最初絶対パスでheader-logoの画像を指定したときはちゃんと表示されたのに、同じ方法で背景画像を指定したときはなぜ表示されなかったのか・・・この点は未だに謎です。
とりあえず今後は同じ失敗をせずに済むと思いますが、謎の部分はずっと残ってしまいそうな気がしてモヤモヤします(-_-)
それはそうとgaccoのJava講座どうしようかな・・・
