ゆるあわ自習室 ゼロから『HTML』『CSS』編

ぜろから空いた時間に独学で!

#17ゼロからwebの基本「HTML」「CSS」編 〜17日目〜 『リンクについてやってみる』

 

「こんばんは」あるいは「おはようございます」それとも「こんにちは」

ゆーたろです。

今日も一緒に勉強して行きましょう。

 

今回はリンクについてやって行きましょう。

 

  • 使用する要素属性

 

使用する要素 <a> 〜 <a>

 

使用する属性 <a href="URL">

 

属性の href は「Hyper Text Reference」の略で、エイチレフとか読みます。

「Reference(リファレンス)」は「参照」って意味らしいです。


<a>要素は href属性が必須で、この属性でリンク先のURLを指定します。

<a>にはその他いろいろ属性がありますが、覚えておいた方がいいのは title属性。
これを使えば、リンク先の表題や説明を書く事ができるみたいです。

 

 使用する属性 <a href="URL" title="テキスト">

 

<a>要素にはこの他たくさん属性があるけど、今回の内容には「href属性」「title属性」だけで十分。
この他の属性は、下の方の <a>要素で使える属性一覧に書いておきますので、興味のあるかたはご覧ください。

 

  • リンクさせるHTMLファイルを用意

 

前回作ったHTMLファイルの複製を作り、 名前を変えて保存します。

自分は「雨とコーヒー.html」という練習用のファイルがあるのでそれを使用します。
このファイルを、前回のファイルと同じ場所に保存しましょう。

いつものが「ゆーたろ.html」リンクさせるファイルが「雨とコーヒー.html」です。

 

  • <a>要素を使用してリンクを指定しよう

こんな感じですね

 

保存してプレビューしてみましょう。

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ここでは相対URLを使ってます。
「ゆーたろ.html 」と 「雨とコーヒー.html 」は同じ場所にあるので、URLはファイル名だけ大丈夫です。

 

  • リンク先のファイルに戻るリンクをつけよう

リンク先の 雨とコーヒー.html にも、リンクの指定をしてゆーたろ.html に戻れるようにしてみましょう。

下の画像

ゆーたろ.html へのリンク部分に title属性も加えてみました。
これでマウスオーバーしたときに、titleに書いたテキストが表示されます。

では、ファイルを保存して、ブラウザでプレビューしてみましょう。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

こんな感じですね。

 

  • 最後に

今回はここまでにしましょう。

かなり進歩した感じがしますね、この調子で頑張って行きましょう。

 

次回 →CSSを使ってリンクをいじってみよう