リンク:Webをつなぐ
クリックできるリンクの作成方法を学びます
「リンク:Webをつなぐ」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。
リンク:Webをつなぐ
次のレッスンへようこそ!今日は、HTMLでリンクを作成する方法を学びます。リンクを使うと、異なるWebページをつないだり、ユーザーがインターネットを簡単に移動できるようにしたりできます。

リンクとは何ですか?
リンクとは、クリックすると別のページや特定のセクション、さらにはファイルへ移動できるWebページ上の要素です。
リンクは<a>タグを使って作成します。このタグは「anchor(アンカー)」を表します。
簡単なリンクを作成してみましょう。
基本的なリンクを作成する
リンクを作成するには、href属性を付けた<a>タグを使います。hrefにはリンク先を指定します。
例:
<a href="https://www.google.com">
Visit Google</a>
リンクを新しいタブで開く
target="_blank"属性を<a>タグに追加すると、リンクを新しいタブで開けます。
例:
<a href="https://www.wikipedia.org"
target="_blank">Open Wikipedia in a New Tab</a>
他のページにリンクする
リンクをWebサイト内の他のページにつなぐこともできます。完全なWebアドレスではなく、相対URL(ファイル名)を使用します。
例:
<a href="about.html">About Us</a>
特定のセクションにリンクする
IDを使うと、同じページ内の特定のセクションにリンクできます。リンク先の要素にIDを追加し、href属性で#idを指定します。
例:
<!-- Link -->
<a href="#contact">Go to Contact Section</a>
<!-- Section -->
<h2 id="contact">Contact Us</h2>
<p>Email us at contact@example.com</p>
メールアドレスにリンクする
href属性でmailto:を使うと、ユーザーのメールアプリケーションを開くリンクを作成できます。
例:
<a href="mailto:hello@example.com">
Send an Email</a>
リンクにツールチップを追加する
title属性を使うと、ユーザーがリンクにカーソルを合わせたときに表示されるツールチップを追加できます。
例:
<a href="https://www.python.org"
title="Visit the Python website">Learn Python</a>
よくできました!
おめでとうございます!リンクの作成方法、新しいタブでリンクを開く方法、特定のセクションへのリンク方法、さらにはメールアドレスへのリンク方法を学びました。リンクはWebの基盤であり、あらゆるものをつないでいます。次のレッスンでは、Webページに画像を追加する方法を学びます。ページをよりカラフルにしていきましょう!

よくある質問
「リンク:Webをつなぐ」レッスンは無料ですか?
はい。「リンク:Webをつなぐ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、HTML for Kidsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML for Kidsコースには全4レッスンが含まれています。
「リンク:Webをつなぐ」で何を学びますか?
クリックできるリンクの作成方法を学びます ブラウザで直接実行するハンズオンコードでHTML for Kidsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML for Kidsを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのHTML for Kidsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「リンク:Webをつなぐ」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML for Kidsレッスンでコードを書いて実行できますか?
はい。すべてのHTML for Kidsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 見出しと段落
- リスト:番号付きリストと箇条書きリスト
- リンク:Webをつなぐ
- 画像:ページに画像を追加する