ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


ホームページ作成 相対リンクと絶対リンクとは?パスを把握しよう

前回は、ホームページ作成する上で大事な要素のひとつとなるメニューを設置いたしました。
今回は、設置したメニューに対しリンクを設定していきたいと思いますが、
その前に、リンクについて少しご説明したいと思います。

1、リンクとは

リンクとは、簡単にいうとページや画像などに移動(ジャンプ)する為にものです。
リンクを適切に設定しホームページ内を移動してもらい、出来るだけ沢山のページを訪問者様に閲覧してもらおうといった具合です。

 

2、リンクには相対リンクと絶対リンクがある

ここでご説明する場合は、相対リンクを使って進めていきます。
相対リンクのほうが少し複雑ですが、ここでしっかり理解してしまえば後々いろんな場面で楽かと思います。

 

相対リンクは階層(フォルダや画像が置いてある場所)を理解することで解決します。

■例1■
例えば、今までのステップでご説明している例を挙げますと、今回以下のような形でファイルなどを格納しています。

 

hp-tsukurikata-html_deta(フォルダ)
∟ 01.jpg
∟ index.html
∟ info.html
∟ news.html
∟ profile.html

相対リンクと絶対リンクの関係性

※メニューのリンクを設定するのは、index.htmlファイルとなりますので、
そのファイルが置いてある場所から見た視点(階層、場所)となります。

 

※hp-tsukurikata-html_detaという名前のフォルダ内に、index.htmlや01.jpgなど計5つのファイル(データ)がすべて同じ階層(場所)に置いてあるということになります。

 

■例2■

では、01.jpgの画像ファイルだけを以下のような形にしてみます。

hp-tsukurikata-html_deta(フォルダ)
∟ img(フォルダ)
∟ 01.jpg
∟ index.html
∟ info.html
∟ news.html
∟ profile.html

ホームページ作成 リンクとは

※メニューのリンクを設定するのは、index.htmlファイルとなりますので、
そのファイルが置いてある場所から見た視点(階層、場所)となります。

 

※hp-tsukurikata-html_detaという名前のフォルダ内に新しくimgという名前のフォルダを作り、
その中に01.jpgのイメージ画像を移動した状態となります。

 

この場合、例1ではすべてのファイルが同じ階層(場所)にあったのが、今回imgファルダを作ったことで01.jpg画層ファイルだけひとつ深い階層(場所)になった形になります。

 

実は以前、画像を載せる際に相対リンクで設定しておりますが、上記のような形で01.jpg画像ファイルを移動した場合、index.htmlファイルをブラウザで確認してみて下さい。
画像が非表示になってしまっているのがわかるかと思います。
これは階層(パス)が間違えているのが原因です。

 

※初めての方にとって相対パスは少々複雑な部分となりますので、何回か見直し、また次回のページとも照らし合わせ参考にしてみて下さい。

 

3、事項について

次回は、上記の内容を踏まえ、メニューにリンクを設定していきます。