diff options
Diffstat (limited to 'files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html')
| -rw-r--r-- | files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html | 338 |
1 files changed, 338 insertions, 0 deletions
diff --git a/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..34d846cd4c --- /dev/null +++ b/files/ja/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,338 @@ +--- +title: ハイパーリンクの作成 +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relative + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">ハイパーリンクとは本当に重要なものです— ウェブが網状組織を構成しているのもハイパーリンクのおかげです。この記事ではリンクを作るために必要な構文を示し、リンクに関するベストプラクティスについて議論します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a>に載っている、基本的な HTML に精通していること。<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a>に載っている、HTML テキストフォーマット。</td> + </tr> + <tr> + <th scope="row">目的:</th> + <td>ハイパーリンクを効率的に実装する方法、複数のファイルを互いにリンクする方法を学ぶ。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_hyperlink" name="What_is_a_hyperlink">ハイパーリンクとは</h2> + +<p>ハイパーリンクは Web が提供する最も刺激的なイノベーションです。Web の始まりから機能していましたが、Web を Web たるものにするものです — 文書から別の文書 (やリソース) へとリンクできたり、文書の特定の部分にリンクできたり、簡単な Web アドレスからアプリを利用できるようになります (ネイティブアプリと比較して、そちらはインストールが必要なだけです)。あらゆる Web コンテンツはリンクに変換できて、クリック (またはその他の有効化) した時に Web ブラウザーは別の Web アドレス ({{glossary("URL")}}) に移動します。</p> + +<div class="note"> +<p><strong>メモ</strong>: URL は HTML ファイルや、テキストファイル、画像、テキスト文書、動画やオーディオファイルや、その他 Web に載せられるものを指すことができます。Web ブラウザーにそのファイルの扱い方・表示法がわからない場合、それを本当に開きたいのか聞く (この場合ファイルを開いたり扱ったりする義務は適切な端末上のネイティブアプリに渡されます) か、ファイルをダウンロードします (この場合あとで処理することができます)。</p> +</div> + +<p>例えば、BBC のホームページでは、複数のニュース記事だけでなく、色々なサイトのエリアを指すリンク (ナビゲーション機能) や、ログイン/登録ページ (ユーザーツール) その他多数のリンクがあります。</p> + +<p><img alt="bbc.co.uk のフロントページで、たくさんのニュース項目と、ナビゲーションメニューの機能を表示しています" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomy_of_a_link" name="Anatomy_of_a_link">リンクの解剖</h2> + +<p>基本的なリンクは、リンクにしたいテキスト (またはその他のコンテンツ、{{anch("Block level links")}} を参照) を {{htmlelement("a")}} 要素の中に囲むことで作成し、{{htmlattrxref("href", "a")}} (<strong>ハイパーテキスト参照</strong>または<strong>ターゲット</strong>とも) にリンク先にしたい Web アドレスを入れます。</p> + +<pre class="brush: html"><p>I'm creating a link to +<a href="https://www.mozilla.org/ja/">the Mozilla homepage</a>. +</p></pre> + +<p>これは以下のような結果をもたらします。</p> + +<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/ja/">the Mozilla homepage</a>.</p> + +<h3 id="Adding_supporting_information_with_the_title_attribute" name="Adding_supporting_information_with_the_title_attribute">title 属性による補足情報の追加</h3> + +<p>あなたのリンクに追加したいかもしれない別の属性は title です。これには、ページに含まれる情報の種類や注意すべき事項など、リンクに関する補足的な有用な情報が含まれています。 例えば、</p> + +<pre class="brush: html"><p>I'm creating a link to +<a href="https://www.mozilla.org/ja/" + title="The best place to find more information about Mozilla's + mission and how to contribute">the Mozilla homepage</a>. +</p></pre> + +<p>これにより、次のような結果が得られます (リンクがホバーされるとタイトルがツールチップとして表示されます)。</p> + +<p>I'm creating a link to <a class="ignore-external" href="https://www.mozilla.org/ja/" title="The best place to find more information about Mozilla's mission and how to contribute">the Mozilla homepage</a>.</p> + +<div class="note"> +<p><strong>メモ</strong>: リンクのタイトルはマウスのホバーでのみ表示されます。つまり、Web ページをナビゲートするためにキーボードコントロールに頼る人々はタイトル情報にアクセスするのが困難になります。タイトルの情報がページの使いやすさにとって本当に重要な場合は、通常のテキストに入れるなどして、すべてのユーザーがアクセスできる方法で表示する必要があります。</p> +</div> + +<h3 id="Active_learning_creating_your_own_example_link" name="Active_learning_creating_your_own_example_link">アクティブラーニング: 独自のサンプルリンクを作成する</h3> + +<p>アクティブラーニングタイム：ローカルのコードエディタを使用して HTML ドキュメントを作成してください (私たちの<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">入門用テンプレート</a>でうまくいくでしょう)。</p> + +<ul> + <li>HTML の本文の中に、1 つ以上の段落または他の種類の既に知っているコンテンツを追加してみてください。</li> + <li>コンテンツの一部をリンクにします。</li> + <li>タイトル属性を含めます。</li> +</ul> + +<h3 id="Block_level_links" name="Block_level_links">ブロックレベルリンク</h3> + +<p>前述したように、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">ブロックレベル要素</a>であっても、あらゆるコンテンツをリンクに変えることができます。リンクに変換したい画像がある場合は、その画像を <code><a></a></code> タグの間に配置することで実現できます。</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/ja/"> + <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> +</a></pre> + +<div class="note"> +<p><strong>メモ</strong>: 今後の記事では Web 上での画像の使用についてさらに多くのことがわかります。</p> +</div> + +<h2 id="A_quick_primer_on_URLs_and_paths" name="A_quick_primer_on_URLs_and_paths">URL とパスに関する簡単な入門</h2> + +<p>リンク先を完全に理解するには、URL とファイルパスを理解する必要があります。このセクションでは、これを達成するために必要な情報を提供します。</p> + +<p>URL (Uniform Resource Locator) は、Web 上のどこにあるのかを定義するテキストの文字列です。たとえば、Mozilla の日本語のホームページは <code>https://www.mozilla.org/ja/</code> にあります。</p> + +<p>URL はファイルを見つけるためにパスを使います。パスはファイルシステム内の目的のファイルが存在する場所を指定します。ディレクトリー構造の簡単な例を見てみましょう (<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a> ディレクトリーを参照してください)。</p> + +<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>このディレクトリー構造の <strong>root</strong> は <code>creating-hyperlinks</code> と呼ばれます。Web サイトを使用してローカルで作業する場合は、サイト全体が入る 1 つのディレクトリーがあります。ルート内には、<code>index.html</code> ファイルと <code>contacts.html</code> があります。実際の Web サイトでは、<code>index.html</code> が私たちのホームページまたはランディングページ (Web サイトまたは Web サイトの特定のセクションのエントリポイントとして機能する Web ページ) になります。</p> + +<p>私たちのルートの中にも二つのディレクトリー — <code>pdfs</code> と <code>projects</code> があります。これらはそれぞれ中に PDF (<code>project-brief.pdf</code>) と <code>index.html</code> ファイルというファイルがあります。ファイルシステム内の別の場所にある限り、1 つのプロジェクトに 2 つの <code>index.html</code> ファイルを非常にうまく入れることができることに注意してください。多くの Web サイトはそうします。2番目の <code>index.html</code> は、おそらくプロジェクト関連の情報のメインランディングページになります。</p> + +<ul> + <li> + <p><strong>同じディレクトリー</strong>: <code>index.html</code> (最上位の <code>index.html</code>) 内に <code>contacts.html</code> を指すハイパーリンクを含める場合は、現在のファイルと同じディレクトリーにあるため、リンクしたいファイルの名前を指定するだけです。そのため使用する URL は <code>contacts.html</code> です：</p> + + <pre class="brush: html"><p>Want to contact a specific staff member? +Find details on our <a href="contacts.html">contacts page</a>.</p></pre> + </li> + <li> + <p><strong>サブディレクトリーに移動する</strong>: <code>index.html</code> (最上位の <code>index.html</code>) 内に <code>projects/index.html</code> を指すハイパーリンクを含める場合は、リンクしたいファイルを指定する前に <code>projects</code> ディレクトリーに移動する必要があります。これはディレクトリーの名前、スラッシュ、そしてファイルの名前を指定することでできます。そのため使用する URL は <code>projects/index.html</code> です：</p> + + <pre class="brush: html"><p>Visit my <a href="projects/index.html">project homepage</a>.</p></pre> + </li> + <li> + <p><strong>親ディレクトリーに戻る</strong>: <code>projects/index.html</code> の中に <code>pdfs/project-brief.pdf </code>を指すハイパーリンクを含めたい場合は、ディレクトリー階層を上がってから <code>pdf</code> ディレクトリーに戻る必要があります。「ディレクトリーを上る」は 2 つのドット — <code>..</code> — を使用して表します。そのため使用する URL は <code>../pdfs/project-brief.pdf</code> です：</p> + + <pre class="brush: html"><p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 例えば <code>../../../complex/path/to/my/file.html</code> のように、必要に応じて、これらの機能の複数のインスタンスを複雑な URL に組み合わせることができます。</p> +</div> + +<h3 id="Document_fragments" name="Document_fragments">ドキュメントフラグメント</h3> + +<p>HTML 文書の上部だけでなく、HTML 文書の特定の部分 (<strong>ドキュメントフラグメント</strong>と呼ばれる) にリンクすることもできます。これを行うには、まずリンク先の要素に {{htmlattrxref("id")}} 属性を割り当てる必要があります。通常は特定の見出しにリンクするのが理にかなっているので、次のようになります。</p> + +<pre class="brush: html"><h2 id="Mailing_address">Mailing address</h2></pre> + +<p>次にその特定の <code>id</code> にリンクするには、URL の最後にハッシュ/ポンド記号を付けてそれを含めます。次に例を示します。</p> + +<pre class="brush: html"><p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p></pre> + +<p><em>同じドキュメントの別の部分</em>にリンクするために、ドキュメントフラグメント参照を単独で使用することさえできます。</p> + +<pre class="brush: html"><p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p></pre> + +<h3 id="Absolute_versus_relative_URLs" name="Absolute_versus_relative_URLs">絶対 URL vs 相対 URL</h3> + +<p>Web 上で見かける 2 つの用語は<strong>絶対 URL</strong> と<strong>相対 URL</strong> です。</p> + +<p><strong>絶対 URL</strong>: {{glossary("protocol")}} と {{glossary("domain name")}} を含む、Web 上の絶対位置で定義された位置を指します。たとえば、<code>index.html</code> ページが Web サーバーのルート内にある <code>projects</code> というディレクトリーにアップロードされ、その Web サイトのドメインが <code>http://www.example.com</code> の場合、そのページは <code>http://www.example.com/projects/index.html</code> (あるいは <code>http://www.example.com/projects/</code> だけでも、URL で指定されていない場合、Web サーバーは <code>index.html</code> のようなランディングページを探してロードします) で入手可能です。</p> + +<p>絶対 URL は、使用されている場所に関係なく、常に同じ場所を指します。</p> + +<p><strong>相対 URL</strong>: あなたがリンクしているファイルからの<em>相対的な</em>場所を指しています。たとえば、<code>http://www.example.com/projects/index.html</code> にあるサンプルファイルから同じディレクトリー内の PDF ファイルにリンクする場合、URL は単にファイル名 — 例えば <code>project-brief.pdf</code> — となり、追加情報は不要です。PDF が <code>projects</code> 内の <code>pdfs</code> という名前のサブディレクトリーにある場合、相対リンクは <code>pdfs/project-brief.pdf</code> (同等の絶対 URL は <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>) になります。</p> + +<p>相対 URL は内部で使用されているファイルの実際の場所によって、異なる場所を指します。たとえば、<code>index.html</code> ファイルを <code>projects</code> ディレクトリーから Web サイトのルート (最上位レベル、どのディレクトリーの中でもありません) に移動した場合、<code>pdfs/project-brief.pdf</code> 相対 URL リンクの内部は、<code>http://www.example.com/pdfs/project-brief.pdf</code> にあるファイルを指し、<code>http://www.example.com/projects/pdfs/project-brief.pdf</code> にあるファイルではありません。</p> + +<p>もちろん、<code>index.html</code> ファイルを移動しても <code>project-brief.pdf</code> ファイルと <code>pdfs</code> フォルダーの場所が突然変わることはありません — <span class="tlid-translation translation" lang="ja"><span title="">これは</span></span>リンクが間違った場所を指しているため、クリックしても機能しません。注意する必要があります。</p> + +<h2 id="Link_best_practices" name="Link_best_practices">リンクのベストプラクティス</h2> + +<p>リンクを書くときに従うべきベストプラクティスがいくつかあります。今これらを見てみましょう。</p> + +<ul> +</ul> + +<h3 id="Use_clear_link_wording" name="Use_clear_link_wording">明確なリンク用語を使う</h3> + +<p>ページにリンクを張るのは簡単です。それだと十分じゃありません。現在の状況やツールの好みに関係なく、リンクをすべての読者がアクセスできるようにする必要があります。例えば：</p> + +<ul> + <li>スクリーンリーダーのユーザーは、ページ上のリンクからリンクへと飛び回ったり、文脈の外でリンクを読んだりします。</li> + <li>検索エンジンはリンクテキストを使用してターゲットファイルにインデックスを付けます。したがって、リンクテキストにキーワードを含めて、リンクされているものを効果的に説明することをお勧めします。</li> + <li>視覚的な読者はすべての単語を読むのではなくページを読み飛ばします、そして彼らの目はリンクのように目立つページの特徴に引き寄せられるでしょう。彼らは説明的なリンクテキストが役に立つと思うでしょう。</li> +</ul> + +<p>具体的な例を見てみましょう。</p> + +<p><em><strong>良い</strong> リンクテキスト:</em> <a href="https://firefox.com">Download Firefox</a></p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Download Firefox +</a></p></pre> + +<p><em><strong>悪い</strong> リンクテキスト:</em> <a href="https://firefox.com/">Click here</a> to download Firefox</p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Click here +</a> +to download Firefox</p> +</pre> + +<p>その他のヒント</p> + +<ul> + <li>リンクテキストの一部として URL を繰り返さないでください。スクリーンリーダーが 1文字ずつ読み上げると、URL は見苦しくなり、さらに見苦しくなります。</li> + <li>リンクテキストに「リンク」や「へのリンク」と書いてはいけません — それは単なるノイズです。スクリーンリーダーは、リンクがあることを人々に伝えます。リンクは一般的に異なる色で表示され、下線が引かれているので、見ているユーザーもリンクがあることを知っているでしょう (ユーザーは慣れているので、この規約は一般に壊れてはいけません)。</li> + <li>リンクラベルはできるだけ短くしてください — 長いリンクは、特に全体を読み上げなければならないスクリーンリーダーのユーザーを悩ませます。</li> + <li>同じテキストが複数存在し、かつ異なる場所にリンクされている場合を最小限に抑えます。これはスクリーンリーダーのユーザーにとって問題となる可能性があり、リンクの一覧が文脈からはずれて表示されることがよくあります。</li> +</ul> + +<h3 id="Use_relative_links_wherever_possible" name="Use_relative_links_wherever_possible">できるだけ相対リンクを使う</h3> + +<p>上記の説明から、絶対リンクを常に使用することが賢明だと思うかもしれません。結局のところ、ページが相対リンクのように移動されても壊れません。ただし、<em>同じ Web サイト</em>内の他の場所にリンクする場合は、できるだけ相対リンクを使用する必要があります (他の Web サイトにリンクする場合は、絶対リンクを使用する必要があります)。</p> + +<ul> + <li>まず最初に、コードをスキャンするのがはるかに簡単です。相対 URL は一般に絶対 URL よりはるかに短いので、コードを読むのはずっと簡単です。</li> + <li> + <p>次に、可能な限り相対 URL を使用するほうが効率的です。<br> + 絶対 URL を使用すると、ブラウザーはドメインネームシステム ({{glossary("DNS")}}; 詳細は<a href="/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works">ウェブの仕組み</a>をご覧ください) 上のサーバーの実際の場所を検索することから開始し、次にそのサーバーに移動して要求されているファイルを見つけます。一方相対 URL では、ブラウザーは要求されているファイルを同じサーバー上で検索するだけです。そのため、相対 URL のように絶対 URL を使用する場合は、常にブラウザーに余分な作業を行わせることになります。つまりブラウザーの効率が低下します。</p> + </li> +</ul> + +<h3 id="Linking_to_non-HTML_resources_—_leave_clear_signposts" name="Linking_to_non-HTML_resources_—_leave_clear_signposts">HTML 以外のリソースへのリンク - 明確な道標を残す</h3> + +<p>(PDF や Word 文書のように) ダウンロードされたり (ビデオやオーディオのように) ストリーミングされたり、ポップアップウィンドウを開いたり、Flash ムービーを読み込んだりするなど、予期せぬ効果をもたらすリソースにリンクする場合は、混乱を避けるために明確な表現を追加します。例えば、それはかなりいらいらさせることができます。</p> + +<ul> + <li>低帯域幅の接続を使用している場合は、リンクをクリックすると、数メガバイトのダウンロードが突然開始されます。</li> + <li>Flash プレーヤーがインストールされていない場合は、リンクをクリックすると突然 Flash が必要なページに移動します。</li> +</ul> + +<p>ここではどのような種類のテキストを使用できるかを見るために、いくつかの例を見てみましょう。</p> + +<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> + Download the sales report (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/" target="_blank"> + Watch the video (stream opens in separate tab, HD quality) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Play the car game (requires Flash) +</a></p></pre> + +<h3 id="Use_the_download_attribute_when_linking_to_a_download" name="Use_the_download_attribute_when_linking_to_a_download">ダウンロードへのリンクは download 属性を使う</h3> + +<p>ブラウザーで開くのではなくダウンロードするリソースにリンクしている場合は、<code>download</code> 属性を使用してデフォルトの保存ファイル名を指定できます。これは最新の Windows 版 Firefox へのダウンロードリンクの例です。</p> + +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US" + download="firefox-latest-64bit-installer.exe"> + Download Latest Firefox for Windows (64-bit) (English, US) +</a></pre> + +<h2 id="Active_learning_creating_a_navigation_menu" name="Active_learning_creating_a_navigation_menu">アクティブラーニング: ナビゲーションメニューの作成</h2> + +<p>この演習では、ナビゲーションメニューを使用していくつかのページをリンクして、複数ページの Web サイトを作成してください。これは Web サイトが作成される一般的な方法の 1 つです。同じナビゲーションメニューを含め、すべてのページで同じページ構造が使用されます。リンクをクリックすると、同じ場所に留まっているという印象が与えられ、異なるコンテンツが表示されます。</p> + +<p>次の 4 ページのローカルコピーをすべて同じディレクトリーに作成する必要があります (完全なファイルリストについては <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> ディレクトリーも参照してください)。</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>あなたがすべきことは：</p> + +<ol> + <li>リンク先のページの名前を含む、順序なしリストを 1 ページの指示された場所に追加します。ナビゲーションメニューは通常単なるリンクのリストなので、意味的には問題ありません。</li> + <li>各ページ名をそのページへのリンクにします。</li> + <li>ナビゲーションメニューを各ページにコピーします。</li> + <li>各ページで、その同じページへのリンクだけを削除します - ページに自分自身へのリンクを含めることは混乱を招き、無意味です。また、リンクがないことは、現在表示しているページを視覚的に思い出させるものです。</li> +</ol> + +<p>完成した例では、次のようになります。</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>メモ</strong>: 動けなくなったり、正しいかどうかわからない場合は、<a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">ナビゲーションメニューのマークアップ</a>ディレクトリーをチェックして正しい答えを確認できます。</p> +</div> + +<h2 id="E-mail_links" name="E-mail_links">メールのリンク</h2> + +<p>クリックすると、リソースまたはページにリンクするのではなく、新しい送信メールメッセージを開くリンクまたはボタンを作成することができます。これは {{HTMLElement("a")}} 要素と <code>mailto:</code> URL スキームを使って行われます。</p> + +<p>最も基本的で一般的に使用されている形式では、<code>mailto:</code> リンクは単に意図した受信者のメールアドレスを示します。例えば：</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">メールをどこにも送信しません</a> +</pre> + +<p>この結果、次のようなリンクが表示されます。<a href="mailto:nowhere@mozilla.org">メールをどこにも送信しません</a>。</p> + +<p>実際、メールアドレスはオプションです。省略した場合 (つまり、{{htmlattrxref("href", "a")}} は単に "mailto:" です)、<span class="tlid-translation translation" lang="ja"><span title="">宛先アドレスがまだ指定されていないユーザーのメールクライアントによって、新しい送信メールウィンドウが開かれます。</span><span title="">これは、ユーザーがクリックして自分が選択したアドレスに E メールを送信できる「共有」リンクとして役立つことがよくあります。</span></span></p> + +<h3 id="Specifying_details" name="Specifying_details">詳細の指定</h3> + +<p>メールアドレスに加えて、他の情報を提供することができます。実際、提供する <code>mailto</code> URL には標準のメールヘッダフィールドを追加できます。最も一般的に使用されるのは "subject"、"cc"、および "body" です (これは本当のヘッダーフィールドではありませんが、新しいメールのための短い内容のメッセージを指定することを可能にします)。各フィールドとその値は、クエリ用語として指定されています。</p> + +<p>これは cc、bcc、件名、本文を含む例です。</p> + +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> + Send mail with cc, bcc, subject and body +</a></pre> + +<div class="note"> +<p><strong>メモ:</strong> 各フィールドの値は URL エンコードされている必要があります。つまり、非印刷文字 (タブ、キャリッジリターン、改ページなどの不可視文字) とスペースの<a href="http://en.wikipedia.org/wiki/Percent-encoding">パーセントエスケープ</a>が含まれています。また、疑問符 (<code>?</code>) を使用してメイン URL とフィールド値を区別し、アンパサンド (＆) を使用して <code>mailto:</code> URL 内の各フィールドを区別します。これは標準の URL クエリ表記です。<a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">GET メソッド</a>を読んで、どの URL クエリ表記がより一般的に使用されているかを理解してください。</p> +</div> + +<p>以下は <code>mailto</code> の他の URL の例です。</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>とにかく今のところ、それはリンクのためのそれです！<br> + スタイルの設定を見始めると、コースの後半のリンクに戻ります。次に HTML について説明します。テキストのセマンティクスに戻って、役に立つと思われるより高度な機能や変わった機能について説明します。高度なテキストの書式設定は、次に行うことです。</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML 入門</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Head とは？HTML のメタデータ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML テキストの基礎</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">上級のテキスト整形</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">文書と Web サイトの構造</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML のデバッグ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">文字のマークアップ</a></li> + <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">コンテンツのページの構造化</a></li> +</ul> |