ハイパーリンクを作成する方法

ハイパーリンクを作成する方法

「ハイパーリンク」は、一般的に「リンク」とも呼ばれ、インターネットの重要な部分であり、すべての Web サイトに不可欠な部分です。ユーザーがテキストまたは画像内のリンクをクリックすると、別の Web ページを開くことができます。したがって、リンクは Web ブラウジング エクスペリエンスの重要な部分です。ほんの少しの HTML コード スニペットを使用するだけで、Web サイトにハイパーリンクを作成できます。この記事のコードを使用して、リンクをすばやく作成します。

方法1方法1/2:

基本的なリンクの確立

  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/90\/Create-a-Link-Step-1-Version-3.jpg\/v4-460px-Create-a-Link-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/90\/Create-a-Link-Step-1-Version-3.jpg\/v4-728px-Create-a-Link-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1リンクとして使用するテキストまたは画像を作成します。ウェブサイトのコード編集時に、シンプルな HTML タグを使用してリンクが作成されます。ただし、まず、マークアップ シンボルに配置するコンテンツを作成する必要があります。コンテンツは、テキスト、画像、または別の HTML 要素にすることができます。この例では、テキストが使用されています。
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ec\/Create-a-Link-Step-2-Version-3.jpg\/v4-460px-Create-a-Link-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ec\/Create-a-Link-Step-2-Version-3.jpg\/v4-728px-Create-a-Link-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2作成したコンテンツにタグを付けます。ハイパーリンクは、単純なペアワイズ表記法を使用して注釈が付けられます。属性がなければ、これらのタグは効果がありません。心配しないでください。すぐにプロパティを追加できるようになります。
    • たとえば、リンクは次のようになります: 新しいページにアクセスするには、ここをクリックしてください。
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Create-a-Link-Step-3-Version-3.jpg\/v4-460px-Create-a-Link-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Create-a-Link-Step-3-Version-3.jpg\/v4-728px-Create-a-Link-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3ハイパーリンクのターゲット アドレスを示す "href" 属性を追加します。ユーザーがリンクをクリックすると、「href」属性がブラウザにユーザーをどこに誘導するかを伝えます。 「href」の後に等号が続き、その後に引用符で囲んだ宛先 URL が続きます。
    • 前の手順の例を続けると、リンクは次のようになります。新しいページにアクセスするには、ここをクリックしてください。
    • リンクのターゲット URL が外部 Web サイトの場合は、完全な URL (通常は「http」で始まる) を使用する必要があることに注意してください。上記のようにページ名のみを指定すると、現在のページのディレクトリが親ディレクトリとして使用されます。
    広告する
方法2方法2/2:

修飾子の追加

  1. : {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Create-a-Link-Step-4-Version-3.jpg\/v4-460px-Create-a-Link-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Create-a-Link-Step-4-Version-3.jpg\/v4-728px-Create-a-Link-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1画像リンクを作成します。画像リンクを作成するには、リンク タグ内に画像タグを追加するだけです。代わりに、画像がホストされている URL (つまり、自分のサーバーまたは他のサーバー上の場所) を使用する必要があります。サンプル画像リンクを以下に示します。
    • <a href="the_intended_link_url.html"><img src="the_picture_in_question.jpg" /></a>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d6\/Create-a-Link-Step-5-Version-3.jpg\/v4-460px-Create-a-Link-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d6\/Create-a-Link-Step-5-Version-3.jpg\/v4-728px-Create-a-Link-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 メール リンクを作成するには、 「mailto:」修飾子を使用します。ユーザーが特定のアドレスに電子メール メッセージの作成を開始するためのリンクを作成するには、電子メール アドレスの前に「 mailto: 」修飾子を使用します。
    • たとえば、電子メール リンクは次のようになります: 質問したり懸念事項を表明したりするには、ここをクリックしてください。
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fd\/Create-a-Link-Step-6-Version-2.jpg\/v4-460px-Create-a-Link-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fd\/Create-a-Link-Step-6-Version-2.jpg\/v4-728px-Create-a-Link-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3後で参照できるように、大きな Web ページ内にアンカーを作成します。 Web ページの特定の部分にリンクするには、アンカーを使用する必要があります。アンカーは、目次を含む大きなページで役立ちます。テキストの各セクションに、目次がリンクするアンカーを割り当てることができます。アンカーを作成するには、「name」属性を使用します。
    • アンカーを作成するには、次のタグをページの適切な場所に挿入します。例: 第 3 章 - HTML でのアンカーの使用
    • 作成したアンカーにリンクするには、次のように#タグを使用します。第3章にスキップ
    広告する

ヒント

  • ウェブサイトを構築するために特別なソフトウェアを使用する必要はありません。ほとんどのコンピュータには、HTML ファイルを作成できるテキスト編集ソフトウェアが付属しています。たとえば、Microsoft のメモ帳プログラム。コードを入力して HTML 形式で保存するだけです。ただし、より高度なプログラムのようにネイティブ テキスト エディターでいつでもプレビューを表示することはできず、コードをチェックしてすべてが正しく動作し、適用される規制に準拠していることを確認できる機能がいくつか欠けています。
  • CSS スタイルやその他の方法を使用して、リンクの外観を変更できます。
広告する

準備が必要です

  • コンピューター
  • テキストエディタまたはWebデザインソフトウェア

<<:  迷子の猫を探す方法

>>:  速く走る方法

推薦する

血栓を溶かす方法

血管の内壁が損傷すると、血小板が集まって血管壁を塞ぎ、体は凝固因子を活性化する化学物質を放出して血栓...

Android で Chrome をアンインストールする方法

このwikiHowでは、AndroidスマートフォンまたはタブレットのアプリトレイからGoogle ...

隠しファイルとフォルダを表示する方法

誰かがあなたのコンピュータにファイルを隠しているのではないかと疑ったら、どうしますか?漏洩を防ぐため...

パソコンでWeChatにログインする方法

このwikiHowでは、ウェブ版またはブラウザアプリを使用してコンピューターでWeChatを使用する...

愛、熱狂、欲望の違いを見分ける方法

恋愛関係にあるときでも、遠くから誰かを尊敬しているときでも、自分の気持ちを整理するのは難しいことがあ...

ヘーゼルナッツのトーストの仕方

ヘーゼルナッツをローストすると、ナッツの中の水分が除去され、ナッツに含まれる天然オイルが加熱後にナッ...

ビジネスメモの書き方

ビジネスメモは社内コミュニケーションの一形態です。もちろん、2 社間の通信であれば、外部方式とみなす...

Flickrから写真をダウンロードする方法

Flickr にはさまざまな写真共有オプションがあり、活気のある写真ソーシャル ネットワーキング サ...

Androidでワイヤレスヘッドフォンを接続する方法

このガイドでは、ワイヤレス ヘッドフォンを Android セットアップに接続する方法について説明し...

不安を抱える少女たちを助ける

誰もが人生のある時点で不安を感じますが、ほとんどすべてのことについて心配したり悩んだりする人もいます...

カップケーキの作り方

カップケーキは美味しくて、どんな機会にもぴったりです。パーティーを企画するとき、誕生日を祝うとき、あ...

...

痔を治す方法

痔は最も一般的な直腸疾患の一つで、50歳以上の人の半数が罹患しています。痔は痛くて恥ずかしいものです...

タスクマネージャーを開く方法

プログラムを開いたり、プログラム プロセスを終了したりする場合は、Windows タスク マネージャ...

失踪した友人を見つける方法

連絡が途絶えてしまった友人を見つける方法を知っていれば、昔の友情を簡単に取り戻すことができます。昔の...