HTMLで画像をリンクする：画像からリンクを作成する方法
私たちは、あなたのウェブサイト上の画像リンクを作成する方法で初心者フレンドリーな見てみましょう。
コードでどのHTMLタグを使用する必要があるかを見ていきます。
あなたが前にこれを行ったことがない場合は、心配しないでください！ 私は全体のプロセスをご案内します。
この記事の終わりまでに、あなたのwebページおよびインターネット上のイメージリンクを作成する。,
我々はまた、あなたが勇敢に感じている場合は、記事の最後に向かっていくつかのより高度な技術を見ていくつかのつもりです。
コーヒーをつかんで、飛び込みましょう！
ハイパーリンクを作成するにはどうすればよいですか？
ホームページ上のリンクを取得するには、ハイパーリンクを作成する必要があります。 HTMLでこれを行うには、<a>タグを使用する必要があります。 各<a>タグには、開始タグと終了タグの二つの部分があります。,
例を次に示します。
<a href="..."> ...</a>上記では、開いているタグがわかります。
<a href="...">
ハイパーリンクの開始を作成します。 次に、タグを閉じます。
</a>
開いたタグと閉じたタグの間に書き込むテキストは、リンクテキストです。 たとえば、
<a href="..."> My Great Link</a>これをリンクにするには、URLを追加する必要があります。 これを行うには、href属性にURLを追加します。, のURLでポイントイズできます。 この例では、PageDartホームページを使用します。
<a href="https://pagedart.com"> My Great Link</a>HTTPSで完全なURLを前面に含めるようにしてください。
HTMLでテキストのみのリンクを作成するだけです。 次に、HTMLを使用してwebページに画像を追加する方法を見てみましょう。
HTMLで画像を作成するにはどうすればよいですか？
webページに画像を追加するには、imgタグを使用します。,
このタグは、開始タグと終了タグがないという点で、aタグとは少し異なります。
imgタグを作成するには、タグにソースファイルを与える必要があります。 これを行うには、src属性を使用します。
<img src="https://pagedart.com/favicon-32x32.png">これにより、次のように画面に画像が追加されます。
それをリンクに変えてください。, これを行うには、<img>タグを<a>タグ内に追加してHTMLでリンクイメージを作成する必要があります。
次に例を見てみましょう。
画像をリンクとして
画像をリンクにするには、<img>タグを<a>タグ内に追加する必要があります。, したがって、以前の例を取ると、ソースコードは次のようになります。
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>このHTMLを生成します。
<img><a>タグブラウザは、画像がクリック可能であることを確認できます。 あなたはリンクに画像を回しました！
WordPressを使用している場合は、ページエディタのテキストビューを使用して、このHTMLコードをページに追加できます。
あなたはまた、リンク内のテキストや画像を追加することができます、”sはこれを見てみましょう。,
リンクとしての画像とテキスト
上記の例では、リンクとして画像のみを追加する方法を示しました。
画像とテキストの両方をリンクに追加したい場合はどうすればよいですか。
この場合、<a>タグを閉じる前にテキストを追加する必要があります。
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>上記では、<img>タグと一緒にタグを付けます。, ページ上のwebブラウザに表示されると、次のようになります。
<img>タグにはもう一つの属性があります。
これはalt属性です。
画像リンクとAlt属性
インターネット上の画像はalt属性を持つ必要があります。 これは画像のテキスト説明です。
スクリーンリーダーは、視覚障害者を助けるためにaltテキストを使用します。 スクリーンリーダーは、画像を見つけるとテキストの説明を読み取ります。,
これを行うには、alt属性をimgタグに次のように追加します。
<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>スクリーンリーダーがこの画像を読み取ると、”PageDart.com”大声で。
画像のaltテキストを書くときは、ベストプラクティスに従うことが重要です。
スクリーンリーダーを使用している人について考えるようにしてください。 書altテキスト説明として記述するイメージどお願い致します。
HTMLでリンク画像を作成するために必要なのはこれだけです。, しかし、あなたが使用できるいくつかのより高度な技術があります。 あなたが勇敢に感じているなら、次にこれらを見ていきます。
高度な技術：CSSを使用してリンクとしての画像
より高度な技術は、CSSを使用することです。 CSSはCascading Style Sheetの略で、HTMLページの外観を変更することができます。
CSSを使用すると、<a>タグのような要素に背景画像を設定できます。,
ここでは、次のようなHTMLがあります。
<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>今回は<a>タグ内には何もありませんが、画像はCSSスタイル これにより、ブラウザに次のように表示されます。
同様の手法を<button>タグで使用できます。
高度なテクニック：ボタンを使用して
この例では、<button>タグの代わりに<a>タグを使用します。,
このHTMLを使用して、上記の例と同じ出力を作成できます。
この出力を作成します。
ここでは、JavaScriptを使用して新しいブラウザタブを開きます。 ユーザーをPageDartホームページに送信します。
なぜこんなことをするのか分かりません！
しかし、私は何が可能であり、HTML、CSS、JavaScriptがどれほど柔軟であるかを示したかったのです。
最後に示す例は、イメージマップを使用することです。
高度な技術：イメージマップ
イメージマップは、クリック可能な領域を持つ単一の画像です。, 彼らは長年にわたって人気を失ってきましたが、依然としてHTML5仕様の一部です。 これは、Internet Explorer、Chrome、Safariなどのブラウザがサポートすることを意味します。
グラフは組織図などのイメージマップの良い例です。
各ピンクの領域をクリック可能なリンクにするために、map次のように作成します。
属性usemapをimgタグ。,
次に、mapタグ内にareaタグがあります。 これらの各領域は、ボタンとして機能するクリック可能な領域を作成します。
HTMLでのリンク画像の使用
ウェブページにリンクとして画像を追加するための五つの異なる方法を見てきました。
- リンクとしての画像
- リンクとしての画像とテキスト
- CSSを使用して画像をリンクとして設定する
- ボタンを使用してリンクとして画像を設定する
- 画像マップを使用する
これらはすべて画像をリンクに変えることができます。 あなたは今、これを自分で試す自信を持っているはずです。,
また、アクセシビリティと視覚障害者を助けるためにAltテキストを設定する方法についても検討しました。