HTMLでリダイレクトを作成する方法

ページ名：HTMLでリダイレクトを作成する方法

HTMLは最もオープンソースでクリエイティブなマークアップ言語のひとつです。ウェブページがどんなに複雑に見えても、HTMLはウェブページのベースとして常に必要です。しかし、ウェブページ全体をつなぐさまざまなハイパーリンクを作成するのは、特に初心者にとっては混乱しがちです。この記事では、HTMLでリダイレクトやハイパーリンクを作成するためのさまざまな方法を紹介します。

方法1

リダイレクトボタンの作成

  1. テキストエディタツールを使って、基本的なHTMLウェブページを作成します。例えば、無料のWindowsシステムアプリケーションであるメモ帳を使用することができます。すでにこの作業を行っている場合は、このステップを飛ばしてもかまいません。
    • .NETを含める必要があります。
  2. CSSを使ってボタンを作成します。
    。
    • デザイン機能は、あなたがやりたいことに応じて、括弧の間に入れます。
      <!DOCTYPE html> <html> <head> <style> .button { } </style> </head> <body> ボタンをクリックするとwikiHowのメインページが表示されます。
  3. ボタンをカスタマイズしましょう。色、ボーダー、フォント、その他いろいろ追加できます。CSSプロパティの詳細なリストが必要な場合は、こちらを参照してください。以下は、基本的なデザインです。
    <!DOCTYPE html> <html> <head> <style> .button { color: pink; padding：15px 32px; text-align: center; display: inline-block; font-size: 16px; margin：4px 2px; cursor: pointer; } </style> </head> <body> ボタンをクリックするとwikiHowのメインページが表示されます！ </body> </html> <head> <body> <body>ボタンをクリックするとwikiHowのメインページが表示されます。
  4. リダイレクトを追加します。<body>タグの下に<a href="">タグを使います。
    • <a href="">タグはリダイレクトを示すために使用します。リンク／ファイルは、吹き出しの間に記述します。別のウェブページにリダイレクトされる場合は、そのリンクを記述します。別のファイルにリダイレクトしている場合は、拡張子も含めてファイル名を記述し、htmlファイルと同じ場所に保存されていることを確認してください。そうでない場合は、その場所を明記してください。例えば、/downloads/music.mp3。
      <!DOCTYPE html> <html> <body> ウィキハウのメインページを表示するには、ボタンをクリックしてください！ <a href="https://www.wikihow.com/Main-Page"> </body> </html>
  5. ボタンをリダイレクトに追加します。<a href="">タグの下にある<button class="">を使用して、ボタンにリダイレクトを適用します。ボタンに "button "という名前を付けた場合は、ボタンクラスとして "button "を挿入します。
    • <button class="">は、どのボタンを使うかを指定するために使います。ボタン名は吹き出しの間に挿入します。
    • <button class="">と</button>の間のテキストは、ボタンの中に表示されます。
      <!DOCTYPE html> <html> <body> ボタンをクリックするとwikiHowのメインページが表示されます！ <a href="https://www.wikihow.com/Main-Page"> <button> ここをクリック</button> </body> </html>
  6. 拡張子.htmlを使ってファイルを保存します。ファイル "を押して名前を付けて保存し、最後に.htmlを追加してください。このステップは重要です。拡張子を変更しないと、ファイルはテキストファイルとみなされるだけだからです。
  7. ボタンをテストしてください。正しくできていれば、正しい結果が表示されるはずです。ボタンの位置は、コードに従って配置した場所によりますが、ボタンの機能には影響しないはずです。
方法2

画像のハイパーリンクを作成する

  1. 任意のテキストエディタツールを使用して、基本的なHTMLウェブページを作成します。例えば、無料のWindowsシステム・アプリケーションであるメモ帳を使用することができます。すでにこの作業を行っている場合は、このステップを飛ばしてもかまいません。
    • .CSSを含める必要があります。
  2. CSSを使って画像のサイズを変更します。画像を配置する前に、CSSを使ってウェブサイトの画像サイズを指定することができます。<style>タグの下にリサイズクラスを作成し、幅と高さ（ピクセル）を指定します。
    <!DOCTYPE html> <html> <h1>wikiHowメインページ</h1> <style> img.resize { width:100px; height:80px; } </style> <body> </body> </html>
  3. リダイレクトを追加します。ハイパーリンクを設置する場所を決めます。ハイパーリンクは、ウェブページをどのように見せたいかによって、どこにでも設置できます。<a href="">タグを使って、リダイレクトを追加します。ウェブページのリンクでも、お好きなファイルでもかまいません。リダイレクトは必ず吹き出しの間に記述してください。
    • このタグは、リダイレクト先のファイルやリンクへのリダイレクトを行い、画像は表示しません。ただし、画像にリダイレクトしたい場合は、ここに画像ファイルを置くことができます。
    • ファイルがhtmlファイルと同じ場所に保存されていることを確認してください。そうでない場合は、その場所を明記してください。例：/downloads/music.mp3.
      <!DOCTYPE html> <html> <h1>wikiHowメインページ</h1> <style> img.resize { width:100px; height:80px; } </style> <body> <a href="https://www.wikihow.com/Main-Page"> </body> </html>
  4. 画像を追加する。HTMLに画像を追加するには、<img class="" src=''>タグを使います。このタグは、<a href="">タグの直後に配置します。リサイズ・プロパティは<img class=""の中に記述します。 画像ファイルやリンクは、src="">セクションのスピーチマークの間に配置します。
    • ファイルがhtmlファイルと同じ場所に保存されていることを確認してください。そうでない場合は、その場所を明記してください。例えば、/downloads/wikiHow.pngのようにします。
      <!DOCTYPE html> <html> <h1>wikiHowメインページ</h1> <style> img.resize { width:100px; height:80px; } </style> <body> <a href="https://www.wikihow.com/Main-Page"> <img src="wikihow.jpg"> </body> </html>
  5. 拡張子.htmlを使ってファイルを保存します。このステップは重要です。拡張子を変更しないと、ファイルはテキストファイルとみなされるだけだからです。
  6. リダイレクトをテストしてください。正しく行われた場合、画像をクリックするとリンク/ファイルにリダイレクトされるはずです。ウェブページ上の画像の位置は、配置した場所によって異なりますが、機能には影響しません。
方法3

テキストハイパーリンクの作成

  1. テキストエディタツールを使って、基本的なHTMLウェブページを作成します。例えば、無料のWindowsシステム・アプリケーションであるメモ帳を使用することができます。すでに作成済みの場合は、このステップをスキップしてください。
  2. リダイレクトを追加します。<a href="">タグを使って、テキストにリダイレクトを追加します。このタグは、ハイパーリンクに変換したい部分の直前に使用します。リダイレクト先のリンク／ファイルは、スピーチマークの間に記述します。タグは必ず</a>で閉じてください。
    • リダイレクト先が別のファイルの場合は、拡張子も含めてファイル名を記述し、htmlファイルと同じ場所に保存されていることを確認してください。そうでない場合は、その場所を記述してください。例えば、/downloads/AboutwikiHow.pdfのように。
      <!DOCTYPE html> <html> <head> wikiHowメインページ </head> <body> <a href="https://www.wikihow.com/Main-Page">ここをクリック</a> </body> </html>
  3. リンクターゲットを追加します。HTMLでは、リンクターゲットはリンク/ファイルが新しいタブで開くか、現在のブラウザウィンドウで開くかを指定する方法です。<a href="">タグの中で、リンクの後に<a href="" target="">と記述します。ターゲット・プロパティは、スピーチマークの中に挿入されます。
    • blankは、URL/ファイルを新しいブラウザ・ウィンドウで開くときに使用します。
    • selfは、URL/ファイルを現在開いているブラウザ・ウィンドウで開く場合に使用します。
    • parentは、現在開いているブラウザ・ウィンドウ内の親フレームでURL/ファイルを開きます。これは、ウェブサイトでフレームを使用している場合にのみ適用されます。
    • topは、URL/ファイルを現在のブラウザウィンドウで開きます。これは、ウェブページでフレームを使用していて、リダイレクト中にフレームを無視したい場合に適用されます。
      <!DOCTYPE html> <html> <head> wikiHowメインページ</head> <body> <a href="https://www.wikihow.com/Main-Page" target="_self">ここをクリック</a> </body> </html>
  4. 拡張子.htmlを使用してファイルを保存します。このステップは重要です。拡張子を変更しないと、ファイルはテキストファイルとみなされるだけだからです。
  5. ハイパーリンクをテストしてください。正しくできていれば、テキストがクリックされると、希望の場所にリダイレクトされるはずです。ハイパーリンクの位置は、配置した場所によって異なります。
方法4

Mailtoリンクを作成する

  1. テキストエディタツールを使って、基本的なHTMLウェブページを作成します。例えば、無料のWindowsシステム・アプリケーションであるメモ帳を使うことができます。すでに作成済みの場合は、このステップを省略できます。
    • その際、.NET Frameworkを含める必要があります。
  2. リダイレクトを追加します。ハイパーリンクに変換したいテキストの直前に<a href="mailto:">タグを使用します。リダイレクトさせたいEメールアドレスは、mailto: の後のスピーチマークの間に記述します。同じメールを複数のメールアドレスに送りたい場合は、カンマで区切ってください。タグは</a>で閉じてください。
    <!DOCTYPE html> <html> <h1>ウィキハウサポート</h1> <body> <a href="mailto:wiki@wikihow.com">ウィキハウにメールを送る</a> </body> </html>
  3. CC/BCCを自動入力します。 これはオプションですが、HTMLではメールの特定のプロパティを自動入力することができます。 CC/BCCを自動入力するには、?cc=または&bcc=パラメータを使用します。これは、mailtoメールアドレスの後に、a href=""タグ内に挿入する必要があります。cc/bccメールアドレスは、等号の後に挿入してください。CCとBCCの両方を追加したい場合は、&bcc=を使ってCCの後にBCCを追加してください。
    <!DOCTYPE html> <html> <h1>ウィキハウ サポート</h1> <body> <a href="mailto:wiki@wikihow.com?cc=email@example.com &bcc=email@example2.com &subject=Mail To wikiHow">ウィキハウにメールを送る</a> </body> </html>
  4. 件名を自動入力します。これはオプションですが、HTMLではメールの特定のプロパティを自動入力することができます。件名を自動入力するには、&subject=パラメータを使用します。これは、<a href="">タグ内に挿入する必要があります。件名は等号の後に挿入します。
    <!DOCTYPE html> <html> <h1>ウィキハウサポート</h1> <body> <a href="mailto:wiki@wikihow.com" &subject=Mail To wikiHow>ウィキハウにメールを送る</a> </body> </html>
  5. 本文を自動入力します。これはオプションですが、HTMLではメール内の特定のプロパティをオートフィルすることができます。 本文をオートフィルするには、&body=パラメータを使います。これはa href=""タグの中に挿入します。本文は等号の後に挿入します。
    <!DOCTYPE html> <html> <h1>ウィキハウ サポート</h1> <body> <a href="mailto:wiki@wikihow.com?cc=email@example.com &bcc=email@example2.com &subject=Mail To wikiHow &body=Insert Question Here">ウィキハウにメールを送る</a> </body> </html>
  6. 拡張子.htmlを使ってファイルを保存します。ファイル "を押して名前を付けて保存し、最後に.htmlを追加してください。このステップは重要です。拡張子を変更しないと、ファイルはテキストファイルとみなされるだけだからです。
  7. リダイレクトをテストします。正しく行われた場合、テキストがクリックされると、ユーザーのデフォルトのメールサービスアプリが、すべてのオートフォーマットとともに開きます。ハイパーリンクの位置は配置した場所によって異なりますが、この場合は本文に配置されています。
この記事は、CC BY-NC-SAで公開されている「 HTMLでリダイレクトを作成する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAで利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧