🔗 HTMLリンク生成器
属性付きHTMLリンクタグを生成:href、target、rel、title、class、id、download。ライブプレビュー、コピー、クリア付き——すべてブラウザ内で完結、アップロード不要、瞬時に結果表示。
HTMLリンク生成器について
このHTMLリンク生成器は、すべてブラウザ内で完結します。URL、リンクテキスト、オプション属性(target、rel、title、class、id、download)を入力すると、そのまま貼り付けられる <a> タグをライブプレビュー付きで生成します。サーバーへのアップロードは一切なく、JavaScript によってあなたのデバイス上で瞬時に処理されます。
主な属性
- href —— リンク先URL。リンクを機能させるには必須です。
- target —— リンクを開く場所。
_blankは新規タブで開き、_self(デフォルト)は同じタブで開きます。 - rel —— 現在のページとリンク先ページの関係。
target="_blank"と併用する場合はセキュリティのためnoopener noreferrerを推奨。 - title —— リンクにカーソルを合わせたときに表示されるツールチップ。
- class —— スタイル用の1つ以上のCSSクラス名。
- id —— 要素の一意の識別子。
- download —— ブラウザにリンク先へ遷移せずリソースをダウンロードするよう指示。ファイル名も指定可能。
使い方
- URL と リンクテキスト を入力——これらは必須フィールドです。
- 新規タブで開く場合は target を選びます。
- rel 値を選びます。新規タブで開く外部リンクには
noopener noreferrerが安全なデフォルトです。 - 必要に応じて title、class、id、download 属性を追加します。
- コピー をクリックし、生成されたHTMLをページに貼り付けます。
よくある質問
データはアップロードされますか? いいえ。すべてローカルブラウザで行われ、入力がデバイスから外に出ることはありません。
target="_blank" で rel="noopener noreferrer" が必要な理由は? これがないと、新規タブが元ページの window.opener にアクセスでき、セキュリティリスクになります。最近のブラウザはデフォルトでこの動作ですが、明示的に記載するのが良い習慣です。
nofollow と noopener の違いは? nofollow は検索エンジンにランキング目的でリンクを追跡しないよう指示します。noopener はセキュリティ属性で、新規タブが opener ウィンドウにアクセスするのを防ぎます。
メールや電話リンクも生成できますか? はい——href に mailto:[email protected] や tel:+819012345678 を指定するだけで、有効なリンクタグを生成します。