0Pricing
HTML for Kids · レッスン

リンク:Webをつなぐ

クリックできるリンクの作成方法を学びます

「リンク:Webをつなぐ」はCoddyKit上の無料HTML for Kidsレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML for Kids学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML for Kidsコースには全4レッスンが含まれています。

リンク:Webをつなぐ

次のレッスンへようこそ!今日は、HTMLでリンクを作成する方法を学びます。リンクを使うと、異なるWebページをつないだり、ユーザーがインターネットを簡単に移動できるようにしたりできます。

リンク:Webをつなぐ — イラスト1

リンクとは何ですか?

リンクとは、クリックすると別のページや特定のセクション、さらにはファイルへ移動できる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をつなぐ — イラスト10

よくある質問

「リンク: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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 見出しと段落
  2. リスト:番号付きリストと箇条書きリスト
  3. リンク:Webをつなぐ
  4. 画像:ページに画像を追加する
← HTML for Kidsに戻る