Web制作の世界へようこそ！HTMLという「Webの設計図」を学び始めたばかりの皆さん、こんにちは。
今日は、WebサイトをWebサイトたらしめる、いわば「Webの心臓部」とも言える``タグ（アンカータグ）についてお話しします。これがないと、私たちはWebの海を自由に泳ぐことができません。
「リンクを作るだけでしょ？」と思うかもしれませんが、実はここには初心者さんが最初につまずきやすい「道の迷い方」のヒントがたくさん隠されています。一緒に紐解いていきましょう。
—
1. リンクを作る「魔法の呪文」：``タグの基本
まずは、``タグの基本の形を見てみましょう。`a`は「Anchor（錨：いかり）」の頭文字です。船を港に繋ぎ止めるように、画面上の文字や画像に「別の場所への繋がり」を持たせるイメージですね。
このコードを分解すると、こうなります。
- ``〜``：ここが「リンクの範囲ですよ」という囲い。
- `href`属性：「Hypertext Reference（ハイパーテキスト参照）」の略。いわば「目的地を記した地図」です。
- `”https://example.com”`：これが目的地。ダブルクォーテーションで囲むのを忘れないでくださいね。
「``タグで囲んだ文字がリンクになる」という、このシンプルな関係性をまずは指先で覚えてしまいましょう。
—
2. 絶対パスと相対パス：目的地までの「住所」の書き方
ここが一番の山場です。リンク先の指定には「絶対パス」と「相対パス」の2種類があります。
絶対パス：どこからでも繋がる「GoogleマップのURL」
絶対パスは、URLをすべて書き出す方法です。
これは、世界中のどこにいても同じ場所に辿り着ける「完全な住所」のようなもの。外部サイトへ飛ぶときは、迷わずこれを使います。
相対パス：今の場所から見た「隣の席」
自分のWebサイトの中にある別のページへ移動するときに使うのが「相対パス」です。
- `href=”about.html”`：今いる場所から見て、同じフォルダにある「about.html」へ。
- `href=”../contact.html”`：一つ上の階層にある「contact.html」へ。
「相対パス」を例えるなら……
友達に「あそこのコンビニ、そこを右に曲がってすぐだよ！」と教えるようなものです。「今、どこに立っているか」を基準に場所を伝えていますよね。
初心者がつまずきやすいポイント：
相対パスで「あれ？ リンクが反応しない！」というときは、大抵ファイルの名前のスペルミスか、階層（フォルダ）の勘違いです。ブラウザの真っ白な画面が出ても落ち込まないでください。それは「そこにファイルはありませんよ」というブラウザからの優しいサインですから！
—
3. なぜ「属性」をわざわざ書くの？
HTMLを書いていると、「なんでいちいち`href`とか書かなきゃいけないの？」と不思議に思うかもしれません。
実は、HTMLは「文章に意味を付け加える」言語なんです。ただの文字の塊に、``タグという「お札（タグ）」を貼ることで、ブラウザという名の読み手が「お、これはクリックできる場所なんだな」と理解してくれるわけです。
お買い物に例えるなら、「商品タグ」のようなもの。タグが付いているからこそ、店員さん（ブラウザ）はそれが何なのか、いくらなのか（どこへ行くのか）を正しく認識できる。そう考えると、少しだけ愛着が湧いてきませんか？
—
最後に：まずは触って壊してみよう
これから皆さんは、たくさんのコードを書くことになります。最初は「`”`（ダブルクォーテーション）を閉じるのを忘れた！」なんていう小さなミスで、リンクが動かなくなることもあるでしょう。
でも、大丈夫です。Web制作のプロだって、毎日どこかで小さなミスをしています。大事なのは、「あ、今はリンクの住所を間違えていたんだな」と、そのエラーから学んでいくプロセスを楽しむことです。
まずはエディタを開いて、自分の好きなサイトへのリンクを一つ書いてみてください。それが、あなたの広大なWebの世界への第一歩です。
それでは、次回の記事でもまたお会いしましょう。ハッピー・コーディング！
コメント