『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

HTML04 リンクの設定・属性と属性値の書き方(7分3秒)

リンクの設定・属性と属性値の書き方

今回は、リンクを設定するための記述と属性と属性値の書き方について解説しています。

概要

  • リンクの設定のための記述
  • HTML要素の持つ「属性」と「属性値」の書き方

補足・ポイント

リンクタグ

テキストや画像にリンクを設定するには、aタグを使用します。

aは、anchor (アンカー 錨)の頭文字です。

リンクを設定したいテキストや画像をaタグで挟みます。

aの持つhref属性に、リンクの飛び先であるURL(インターネット上のURLやファイルの位置情報)を記述します。

href属性は、ハイパーテキスト(Hypertext:HTML文書)の参照先という意味です。

<a href="http://www.yahoo.co.jp/">Yahoo!Japanのサイトへ</a>
<a href="sample.html">次のページへ</a>

属性と属性値の書き方

属性と属性値の書き方

aタグの後ろに、半角スペースを挟んでhref=”sample.html”と記述されています。

このhrefが属性でsample.htmlが属性値になります。

属性と属性値を記述するときには、開始タグの要素の後ろに、半角スペースをはさみ、属性を記述し、属性の文字列の後ろに=を付け、属性値の文字を””で囲みます。

属性が2つ以上ある場合には、半角スペースを空けて、属性と属性値を記述します。

属性が2つ以上ある場合

動画で解説しているソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの練習です!</title>
</head>
<body>
<h1>リンクの設定</h1>
<hr>
<h2>インターネット上のWebサイトへのリンク</h2>
<p><a href="http://www.yahoo.co.jp/">Yahoo!Japanのサイトへ</a></p>
<h2>同じフォルダ内のファイルへのリンク</h2>
<p><a href="sample.html">次のページへ</a></p>
</body>
</html>

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!