リンク URLの書き方

html、cssのリンク、相対パスの解説です。パスが正しく書けていないとファイル(今回はイラスト)が表示されません。

パスは目的のファイルまでの道順を示したものです

 

今回表示させるのはイラストレーターで描いたコガネムシとカブトムシです。背景が透明になるpng形式で保存しました。

フリーソフトInkscapeインクスケープでも描けますし、ダウンロードの必要の無い(のでハードル低め)Scratchスクラッチでも可能です◎

INKSCAPEで写真をトレースして簡単に描く

簡単。Scratchでカブト虫をトレースして描く

 

コードを書くのはVisual Studio Code(ビジュアルスタジオコード)を使用しています。コガネムシファイル(scarab.png)はcssで”背景”として表示しました。

 

background-image: url( 〇〇〇 ); のパス、〇〇〇の所を詳しく解説して行きます◎

ここではimage/scarab.png と書いています。これは、

 

style.cssファイルから見て、imageフォルダの中のscarab.pngファイルを表示してと指示しています。これはデスクトップ上のファイル構造です。

 

VSCodeで見ると同じ物がこのように表示されています。

 

scarab.png ファイルを移動してみます。

B階層にあったscarab.pngを新しくBに作った「image_aフォルダ」の中に移動して階層Cに来ました。

 


VSCodeに書いてあったパス(道順)と変わってしまったので表示されなくなってしまったね

なのでパスも書き直します

 

「image_a」フォルダの事を追加しないといけません。正しい道順が書けるとちゃんと表示されます。
( /* 〜*/ で囲んだコードやコメントの文字は緑色になってコードは表示されていても結果には反映されません)

 

コガネムシが繰り返し表示されているのはbackground-size: contain;と書いているからです◎

 

スタイルstyle.cssの当たっていないサイトとは

(image_aフォルダを削除してscarab.pngは元の位置に戻しました)
今度はcss_folderと言うフォルダを新しく作り、その中にstyle.cssファイルを移動してみました。

こんな構造です。

 

するとstyle.cssファイルを読み込んでいたindex.htmlファイルが「style.cssファイルはどこに?」状態になりデザインの無いこんなサイトになってしまいました。もちろんstyle.cssで指示していた画像も表示されません。

昔のホームページみたい

 

正しく表示されるように修正します。
まずはindex.htmlに書いてあるstyle. cssファイルへのパスに、

css_folderの事を追記します。画像はまだですが配置、色、フォントサイズなどデザインが直りました。続いて画像(scarab.pngやbeetle.png)までのパスもstyle.cssファイルで修正するのですが、ここで上の階層のファイルを読み込む時の書き方、勘違いしやすいポイントを解説します。

 

読み込みたいファイルが上の階層(浅い階層)にある場合は「../」を付けて書きます。
例:ピンクの階層にある「ファイルb」黄色の階層にある「画像ファイルib」を読み込むパスの書き方は「../ib」です。

 

実際のフォルダやファイルを同じ配置にしてパスを書きました。

style.css」からみて1つ上の階層の「scarab.png」を(style.cssファイルで)読み込むので「../scarab.png」です。

 

同一階層でもフォルダを跨ぐ場合はパスの書き方に注意

ファイルb」で「画像ファイルia」を読み込む場合はどうでしょう。

えーっと、そこに行くには1つ上の階層に上がるけどまた下がって結局同じ階層だから??

同じ階層でも「../」が必要なパターンがあります

「ファイルb」と「画像ファイルia」は別々のフォルダでピンクの同一階層です。同一階層でフォルダを跨ぐ場合も「../」が必要になります。なのでここは1つ上がった(../)、「f2フォルダ」の中の、「画像ファイルia」で「../f2/ia」と書きます。

 

こちらも実際にフォルダを跨ぐ構造にしてVSCodeに記述→カブトムシがちゃんと表示されました。

 

 


 

今回のヘッダーはLayoutit!と言うツールを使って枠組みを作り生成されたHTMLとCSSのコードを自分のVSCodeにコピペしました。

 

このimageの部分にコガネムシを入れたのです。

こちら↓で解説しています。CSS Grid Layout ? と思う方でも大丈夫です。

CSS Grid Layout を簡単に作れるツール