#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を使ってリンクをいじってみよう