【第６回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

前回は緑のカバちゃんを貼り付けてかわいいホームページを作った。

今回はリンクを貼っていろんなページに飛べる「それらしい」ホームページに近づけていこうと思う。

aタグ

リンクを貼る時にはaタグを使う。aは「anchor」の略らしいがアンカーってなんだ？”いかり”とリレーの最後の人しか知らないけどいいのかな。

aタグは開始タグの中に貼りたいURLを書く。順番としては、開始タグ→リンクを貼りたいテキストなり画像なり→終了タグになる。

「note」という文字に、MAKE MOREのnoteクリエイターページを貼り付けてみる。

<a href="https://note.com/make_more">note</a>

「href」は「hypertext reference」の略で、お目当てのページはここにありますよ〜というのを示すそうな。

ホームページとnoteを繋ぐことに成功。

HTMLでリンクを貼ると、デフォルトで「青字・下線あり」になる。また、一度リンク先を訪問すれば紫色に変わる。この色や下線の有無などはいずれCSSに手を出した時にいじっていこうと思う。

画像にリンクを貼る

画像をクリックすると他のサイトに飛べる、というのもaタグで作る。と言っても先ほどaタグに挟んだテキストの部分をimgタグに置き換えればいい。

<a href="https://note.com/make_more"><img src="MAKE_MORE_image/makemore.PNG"></a>

緑のカバをクリックしたらnoteに飛ぶなどという意味のわからないリンクではあるがまあいいか。
画像にリンクを貼ってもスクリーンショットじゃ伝わらないし、GIF作る能力もないのでご自身でこの感動を試してみてほしい。

ちなみに初めてやってみた時、コピペなら機能するのに自分で打つと上手くいかないで挫折しかけたが、後々よくみたら「href」をherfと書いていた。なんてこった。

ページ内リンク

目次をクリックするとページの下の方に飛ぶようなリンクもaタグで作ることができる。しかしまだidについてnoteで触れていないどころかあんまり理解もしていないので、簡潔に書いておいて、いずれ記事を追加する形にしたいと思う。

すごーく簡単に言えば開始タグを<a href="#id名">に変えればできる。
一つのページに同じ名前のidは一度しか使えないので、飛ぶ場所を指定できるというものらしい多分。

ただidに関してはもうちょっと学習が進んで、CSSでデザインを作っていくところで書こうと思っているのでしばしお待ちを。
いやでも早いうち勉強しといたほうがいい気もしてるんだよなあ…

短めだけどそろそろネタが尽きてきたので、箇条書きについてだけ書いたらCSSに手を出そうと思い始めてきた。次回以降も読んでもらえたら嬉しいです。