HTML&CSSの初心者向け

HTML&CSS初心者向け(第12部):ハイパーリンクの定義(2)

チュートリアルのすべてのビデオ HTML&CSS入?

メールアドレスにハイパーリンクを設定できます。それがどのように機能するかを示す前に、その点についていくつかのヒントがあります。個人的にはこれらのメールリンクが好きではありません。むしろフォームの方が適しています。なぜなら、メールクライアントがインストールされていないか、現在のユーザーに構成されていない場合、メールリンクが正しく機能しないことがあるからです。最終的には、メールリンクを使用するかフォームを使用するかはご自身で決定する必要があります。フォームに関する詳細情報は、このシリーズの後続記事で引き続き提供されます。

メールリンクがクリックされると、通常、訪問者にメールウィンドウが表示されます。

HTML&CSS入門者向け(第12部):ハイパーリンクの定義(2)

しかし、これが保証されるわけではありません。こちらでは、ユーザーが実際に対応する設定を行う必要があります。再度言いますが、メールリンクの解決策は理想的ではありません。それでも、このようなリンクを時々必要とすることもできます。以下はその構文です:

<a href="mailto:kontakt@psd-tutorials.de">kontakt@psd-tutorials.de</a>



お分かりの通り、まず最初に古典的なハイパーリンクです。

HTML & CSS初心者向け(パート12):ハイパーリンクの定義(2)

ここで重要なのは、href属性に割り当てられる値です。参照先は常にmailtoで始まり、それに続いて希望する電子メールアドレスが続きます。

電子メールリンクを設定するときに、参考テキストに何を記入するかに注意する必要があります。そこには常に電子メールアドレスを再度記入するほうが良いです。そのため、ハイパーリンクをクリックしても何も起こらないユーザーでも、アドレスをコピーしてメールを送信できます。

電子メールリンクを定義する際には、宛先アドレスだけでなく、使用可能な他のオプションがあります。ここで説明されている内容がHTMLの標準ではないことに留意してくださいが、殆どのブラウザがサポートしています。

まず、Cc受信者を直接指定できます。

<a href="mailto:kontakt@psd-tutorials.de?cc=info@psd-tutorials.de">kontakt@psd-tutorials.de</a>



メインの受信者アドレスの後ろには質問符を記入します。そして、それに続くのがcc、その後に、表示用のメールコピーを送信するアドレスです。この代わりにccの代わりにbccを使用することもできます。この場合、指定されたアドレスはBccフィールドに配置され、そのアドレスには目に見えないコピーが送信されます。

定義済みの件名を指定する場合も可能です。

<a href="mailto:kontakt@psd-tutorials.de?subject=Post%20an%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



希望する件名はsubjectの後に記入します。これが機能するには、件名にスペースを使用せず、代わりに%20でマスキングする必要があります。

必要に応じて、メールの本文やその一部を指定することもできます。そのために使用されるパラメータはbodyです。

<a href="mailto:kontakt@psd-tutorials.de?body=Hallo%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



HTML&CSS初心者向け(Part 12):ハイパーリンクを定義する(2)



ここでも、subjectに関する説明と同様の注意事項が適用されます。

ダウンロードファイルを提供する

ウェブサイト上でファイルをダウンロードできるようにしたい場合は、もちろん可能です(法的な側面はこの時点では考慮しません)。これは非常に簡単に実現できます。ハイパーリンクを定義し、その対応するファイルを参照先として指定します。

<a href="buch.zip">Die Downloads zum Buch</a>



この場合、参照先はZipファイルです。ハイパーリンクをクリックすると、通常、ブラウザがダウンロードダイアログを提供するか、ファイルが直接ダウンロードされます。

HTML&CSS初心者向け(第12回): ハイパーリンクの定義(2)



そのダイアログを介してファイルをダウンロードできます。ただし、最終的にはブラウザが指定されたファイルをどのように処理するかを決定します。

PDFファイルは通常、対応するリンクをクリックするとブラウザが直接表示します。これはほとんどの場合、全く問題ありません。ただし、PDFファイルをダウンロードできることもあります。(もちろん、訪問者は右クリックしてファイルをダウンロードできますが、すべてのウェブサイト訪問者がこの機能を知っているとは限りません)。

HTML5では、ハイパーリンクをダウンロードリンクとして指定することが可能です。そのためにdownload属性を使用します。

<a href="ebook.pdf" download>Download</a>



この属性を使用して指定されたリンクは、ブラウザがその属性をサポートしている場合、ファイルをダウンロードします。

通常、ファイルはオリジナルの名前で保存されます。これもほとんどの場合は問題ありません。ただし、ダウンロードされたファイルに別の名前を付けたい場合もあります。これも問題ありません。その際に再度download属性を使用します。この属性に、希望する名前を値として指定します。

<a href="ebook.pdf" download="dk.pdf">ダウンロード</a>



ブラウザがこの機能をサポートしている場合、ダウンロード時にはdownload属性に指定された名前が使用されます。

HTML&CSSの初心者向け(第12部):ハイパーリンクを定義する(2)

論理関係を示す

リンクの定義に関連する属性の一つに興味深いものとしてrelがあります。この属性を使って、ハイパーリンクが参照先とどのような論理関係にあるかを示すことができます。ブラウザはマウスでリンクをホバーした際に適切なアイコンを表示するためにこの情報を使用する可能性がありますが、現時点ではそのような機能はまだありません。したがって、rel属性には直接的な影響はありません。

<a href="zwei.htm" rel="next">次へ</a>



rel属性には以下の値が利用可能です:

alternate – ドキュメントの代替バージョンへのリンク。

author – ドキュメントの著者へのリンク。

bookmark – ドキュメントのパーマネントなブックマークリンク。

help – ヘルプファイルへのリンク。

license – 著作権情報へのリンク。

next – 次のドキュメントへのリンク。

nofollow – 検索エンジンがリンクをたどらないことを示す。

noreferrer – ブラウザがHTTP-Referrerヘッダを送信しない。

prefetch – ドキュメントをキャッシュにロードする。

prev – 前のドキュメントへのリンク。

search – ドキュメントの検索ツールへのリンク。

tag – ドキュメントを説明するキーワード。

このように、参照先とハイパーリンクの関係を詳細に説明することができます。