htmlの相対パス・絶対パス【画像が表示されない・リンク切れのときに】マンガでわかるホームページ作成ホームへhtmlの相対パス・絶対パス【画像が表示されない・リンク切れのときに】2020年06月04日CSSとは【CSSの書き方】CSSはデザインをつかさどる言語です。htmlが骨組みとなり、それに背景色や大きさ、配置といったデザインの指示を出すのがCSSです。CSSはWebサイトを作るにあたり習得必須の言語です。別のフォルダのフォルダの中さらに深い階層の場合まとめ内部リンクなどファイルの場所を指定するとき、パスを指定することになります。パスを理解しないとリンク切れや画像が表示されないということになりかねません。ホームページ初心者はこの階層・パスでつまづきやすいです。パスの指定方法は「絶対パス」と「相対パス」の2種類あります。絶対パスURLの頭からすべて記載します。href="https://www.google.com/">google</a>外部サイトへのリンクの際は必ずこの書き方になります。サイト内リンクにも使えます。メリット自分のファイルの場所が変わってもリンク切れしないデメリットローカルで確認するとリンク切れするドメインが変わるとリンク切れするCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む相対パスファイル自身の位置を基準に対象のファイルの場所を記載します。メリットローカルでも確認できるドメインが変わっても問題ないデメリット自分のファイルの場所が変わるとすべてリンク切れするさて、この相対パスの書き方がちょっと複雑です。以下のパターンを覚えましょう。同じフォルダ内にある別ファイルの階層は以下になります。例)index.htmlからlink.htmlへのパスlink.html./link.html上記のどちらでもOKです。オススメは「link.html」の書き方です。以降はこちらの書き方で説明していきます。例1)index.htmlからlink.htmlへのパスabout/link.htmlフォルダ名/(スラッシュ)ファイル名.(ドット)拡張子というように記述します。例2)link.htmlからindex.htmlへのパス../index.htmlこの「../」というのは「一つ上の階層へ」という意味です。ドットが2つあるので注意です。例)index.htmlからlink.htmlへのパス../about/link.html1回階層をあがり、そこにあるaboutフォルダ内のlink.htmlを指定します。例)index.htmlからlink.htmlへのパス../../../about/about2/link.html3回階層をあがり、そこにあるaboutフォルダ内のabout2フォルダ内のlink.htmlを指定します。まとめ絶対パスURLの頭からすべて記載します。相対パスファイル自身の位置を基準に対象のファイルの場所を記載します。階層が上がる場合../フォルダを指定する場合フォルダ名/相対パスをしっかり覚えてリンク切れしないようにしましょう。以上、階層・パスについてでした。次の記事>CSSとは【CSSの書き方】この記事を読む「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。