第三章:ウェブサイトの骨格を作るトップページへ戻る

1. 骨格を作る言語HTML /  2. 基本構造 /  3. タイトルをつける /  4. 見出しをつける /  (ア) 大見出しをつける /  (イ) 小見出しをつける /  5. 文章を書く /  (ア) 段落を意識する /  (イ) 改行をする /  6. リストを作る /  (ア) リストを作る /  (イ) 文法に則ったHTML記述 /  7. 画像を表示する /  (ア) まず、画像を表示する /  (イ) “パス”とは /  (ウ) 代替テキストを表示する /  8. 新しいページを作る /  (ア) 【練習】このページを作りなさい /  (イ) 答え合わせ /  9. リンクをする /  (ア) “page2.html”へリンクする  /  (イ) 新しいウィンドウでリンクする /  10. 表を作る /  (ア) 表の概念 /  (イ) 表を作る /  (ウ) 横方向にセルを連結する /  (エ) 縦方向にセルを連結する /  (オ) 気がつくとすごいテクニックと、そのテクニックを使ってはいけない理由 /  11. CSS導入の最後の準備

(イ) “パス”とは

パス(path)という言葉があります。
パスとは、特定のファイルがどこにあるのかを示す文字列のことを言います。

この"パス"を、src=" "の「" "」へ入れることで、画像は表示されます。
例えば先ほどは、src="pro_yahoo.jpg"としました。

ここで、新しい指定法をお教えします。
まず、今の「first_web」フォルダの中がどのようになっているのか見てましょう。

現在、「first_web」フォルダの中は、このようになっています。



ここで、パスという考え方の登場です。

index.htmlというファイルから見て、どこに表示したい画像があるのかを考えます。

例えば、pro_yahoo.jpgは、index.htmlと同じ階層(上の図で言う同じライン上)にあるので、そのまま、src="pro_yahoo.jpg"と指定することができました。

では、index.htmlより一つ下の階層(上の図で言うひとつ右のライン上)にある、「images」フォルダの中の「pro_google.jpg」に指定する場合はどうでしょう?
この場合は、「src="./images/pro_google.jpg"」と指定します。

このように、特定のファイルがどこにあるかを示す文字列のことをパスと言います(特に今回は、index.htmlから見て特定のファイルがどこにあるのかを相対的に考えているので、相対パスと呼びます。)

※相対パスと対になる言葉として、絶対パスというものもあります。ここでは触れませんが、興味のある人は、「絶対パス」で検索して調べてみてください。
※ひとつ下の階層に行くときには、「./フォルダ名/」としましたが、ひとつ上の階層に行くときには、「../」と表します。二つ上へ行く時には、「../../」とします。二つ上のフォルダの下にある「AAA」というフォルダの中の「file.jpg」を指定したい場合は、「../../AAA/file.jpg」とします。

この二つの※は、今は理解しなくても全く問題ありません。もし、より深い知識を得たい場合は、ここで一度に書くと煩雑としてしまいますので、もうひとつの講座で解説いたします。

では、相対パスにて、いま、Yahoo!の画像をGoogleに変えてみましょう。




簡単ですね。では、次も行きましょう。

島岡諒の無料ホームページ作成講座『初めてWeb入門』 前のページへ戻る島岡諒の無料ホームページ作成講座『初めてWeb入門』 次のページへ進む

あなたも、サポートメールに参加しませんか?

『初めてWeb入門』に取り組んでくださっている方にサポートメールをお送りしています。
ここでは、『初めてWeb入門』では紹介し切れなかったウェブデザインの知恵を配信しています。
名前とメールアドレスだけで参加出来ますので、興味のある方は、ぜひご参加くださいね^^

氏名 :
メール:

※サポートメールは、いつでも解除できます。詳しくはサポートメールのページをご確認ください。




第三章:ウェブサイトの骨格を作るトップページへ戻る

1. 骨格を作る言語HTML /  2. 基本構造 /  3. タイトルをつける /  4. 見出しをつける /  (ア) 大見出しをつける /  (イ) 小見出しをつける /  5. 文章を書く /  (ア) 段落を意識する /  (イ) 改行をする /  6. リストを作る /  (ア) リストを作る /  (イ) 文法に則ったHTML記述 /  7. 画像を表示する /  (ア) まず、画像を表示する /  (イ) “パス”とは /  (ウ) 代替テキストを表示する /  8. 新しいページを作る /  (ア) 【練習】このページを作りなさい /  (イ) 答え合わせ /  9. リンクをする /  (ア) “page2.html”へリンクする  /  (イ) 新しいウィンドウでリンクする /  10. 表を作る /  (ア) 表の概念 /  (イ) 表を作る /  (ウ) 横方向にセルを連結する /  (エ) 縦方向にセルを連結する /  (オ) 気がつくとすごいテクニックと、そのテクニックを使ってはいけない理由 /  11. CSS導入の最後の準備

はじめにサポートメールホームページの疑問・質問おすすめリンクお問い合わせ

当サイトは、スマホ対応しリニューアルしました。これから勉強される方は、こちらの新サイトをおすすめいたします。

リニューアルしたサイト「WEB-D.PRO」へ遷移します