ウェブランサーMENUHOMEBLOGHTMLCSSMOBILEABOUTHTMLのハイパーリンクについてtwitterFacebookLINEはてなブックマークPocketHTMLの最も優れた機能の一つがハイパーリンクです。ハイパーリンクとは、分かりやすく言うと、HTMLドキュメントとHTMLドキュメントをつなぐ橋のようなもので、インターネット上に散らばっているドキュメントをつなげる役割を果たします。インターネット上に公開されているウェブページであれば、URLを参照して何処にでもリンクを張る事が出来ます。日本のサイトから海外のサイトへだって、たったのワンクリックで行けるのです。リンクをつなぐ<a>タグハイパーリンクを設置するには以下のタグを使います。href="https://weblan3.com/">リンクする文字</a><a>タグは、href属性にURLを指定することで飛び先を指定します。文字の他にも、画像などのコンテンツにリンクを設置することもできます。エイチレフ」と読みます。リンク方法は、大きく分けて二種類あります。自分のページの住所であるURLと同じドメイン上にあるページを示すものと、別のドメインを有する外部ページを示すものです。ドメインが同じ場合は「相対パス」、ドメインが違う場合は「絶対パス」という記述形式を用います。それでは、実際にリンクを設置する場合を想定して、「絶対パス」と「相対パス」の違いを見ていきましょう。「絶対パス」は、HTTPからのアクセスに対して絶対的な場所を表す書き方です。住所に例えると、「日本国/東京都/渋谷区/何丁目/何番地」という風に、可能な限り詳しい住所を記述する形式になります。フルアドレスと言い換えることもできます。href="https://weblan3.com/html/reference-hyperlink">このページへジャンプ</a>表示確認このページへジャンプ※別タブで開くように設定していますこのように、アドレスバーに表示されるURLと同じように「http」から始まるインターネット上の住所を全て記述します。絶対パスは、主に自分のサイトから外部のサーバーに置いてあるファイルにアクセスする場合に使用します。「相対パス」は、リンク元のファイルが存在している位置から、リンク先のファイルの存在位置を相対的に見た記述の仕方を取ります。同じサーバーに置いてあるファイルの場合、httpから記述するフルアドレスは必要ないので、ドメインの部分を省略することができます。住所に例えると、東京都内から手紙を出す場合に「渋谷区/何丁目/何番地」と省略しても届くという具合です。href="reference-hyperlink">このページへジャンプ</a>表示確認このページへジャンプ※別タブで開くように設定しています相対パスは、リンクを設置しているファイルの場所から、リンク先のファイルが「相対的に」どこにあるかによって記述内容を指定します。sub.gifこの場合、「public」というフォルダに「index.html」などのHTMLファイルと「page」というフォルダが入っています。次に「page」というフォルダの中には「p001~003.html」というファイルと「log」、「img」というフォルダが入っています。これがニ階層目になります。「log」、「img」フォルダには、更に別のファイルが入っています。これは三階層目にあたります。表示しているページが置いてある階層と、リンク先のファイルが同じ階層に置いてある場合は、<a>タグのhref属性にファイル名を記述します。表示しているページが置いてある階層よりも、リンク先のファイルが置いてある場所が下の階層になる場合は、<a>タグのhref属性に「フォルダ名/ファイル名」と記述します。表示しているページが置いてある階層よりも、リンク先のファイルが置いてある場所が上の階層になる場合は、<a>タグのhref属性に「../ファイル名」と記述します。href="../index.html">リンクする文字列</a>相対パスのメリットは、ローカルでファイルを作成している段階でフォルダ分けをして整理が出来る事と、HTTPからのドメインを記述しないため、サイト移転などでURLが変わってもリンクに影響がないので、メンテナンスの必要が無いという事です。基本的に、自分のウェブサイト内で別のページにリンクする場合は、相対パスを使いましょう。ハイパーリンクのまとめ自分のサイト内のファイルにリンクする場合には「相対パス」でリンクした方が楽に管理できます。画像ファイルなどは、一つのフォルダにまとめておくと何処に何が置いてあるのか分かりやすくなるので、結果的に作業効率がアップします。<a>タグはHTMLを記述する上で、最も重要かつ使用頻度の高い要素です。リンクを使いこなして、ウェブページ同士をつなぎ、使いやすいウェブサイトを目指して下さい。weblan3.com。