【ご案内】このページの内容は、AI(GPT)が作成したテキストをもとに構成されています。必ずしも完全に正確とは限らないため、学習や制作に利用する際は、公式ドキュメントや信頼できる資料とあわせて確認することをおすすめします。
このページでは、a タグを使ってリンクを作る方法を説明します。
あわせて、p や h1〜h5、color、font-size、background-color も使ってレイアウトしています。
a タグは「アンカー(anchor)」の略で、リンクを作るためのタグです。
Web ページの別のページや、同じページ内の別の場所、メールアドレスなどに移動したいときに使います。
a タグの基本的な書き方は次のとおりです。
<a href="リンク先のURL">リンクとして表示したい文字</a>
見出しの文字全体をリンクにすることもできます。
<a href="https://example.com/">Example サイト</a>
実際の表示: Example サイト
相対パスで書くこともできます。
<a href="about.html">このサイトについて</a>
移動先に id をつけて、href に #id名 を書きます。
例:下の「ページの一番下へ」のリンクは、id="bottom" の場所に移動します。
<a href="#bottom">ページの一番下へ</a>
実際の表示: ページの一番下へ
a タグにも color や background-color、font-size を指定できます。
例:ボタン風のリンク
<a href="index.html" style="background-color: #1976d2; color: #ffffff; font-size: 18px; padding: 6px 12px;"> トップページへ戻る </a>
実際の表示: ページトップへ戻る(見た目だけボタンっぽいリンク)
通常、ブラウザは a タグの文字を青色+下線で表示します。
CSS で色や下線を変えることもできますが、「どこがリンクなのか」が分かるようにデザインすることが大切です。
通常のテキスト: これはただのテキストです。
リンクのテキスト: これはリンクのテキストです(Yahoo! JAPAN)
a タグはリンクを作るための HTML タグです。
href 属性にリンク先の URL や #id 名などを書いて使います。
p や h1〜h5 の中で使うこともでき、color、font-size、background-color で見た目を調整できます。
リンクはユーザーが移動したい場所へ導く大切な要素なので、分かりやすく目立たせるデザインを心がけましょう。
ここがページの一番下(id="bottom")です。