♪ちょこっと気になるホムペ♪

♪ちょこっと気になるホムペ♪

リンクを貼る



がい3 HPにリンクを貼りたい場合 がい3



HPを作るとなると、やはり他のサイトとのやり取りなど、色々としたい事も出てくると思われます。ここでは、他のサイトとリンクをする為の方法・・ってかタグを教えます。


ペングー リンクタグ一覧 白さん



一般タグ <a href="アドレス">ここをクリック</a>
画像付リンクタグ
(囲い線あり)
<a href="アドレス"><img src=""></a>
画像付きリンクタグ
(囲い線なし)
<a href="アドレス"><img src="" border="0"></a>
リンク先ウィンドウをどこに
表示させるかの指定
<a href="アドレス" target="_top">ここをクリック></a>



【参考】



画像をリンクボタンに指定すると、標準では画像の枠に線が入ってしまいます。この線を消したい場合には次のように指定します。

<a href="index.html"><img src="sample.gif" border=""></a>


<img src>タグ内に border="数値"を追加して、 枠線の太さを 0 に指定します。


【使用例】



例1. 一般的に使われるリンクタグの使用例(画像なしの場合)

<center><a href="http://plaza.rakuten.co.jp/dejiko21/">ここをクリック</a></center>

↑のタグにより、↓のようにHP上に表示されるようになります

ここをクリック







例2. 画像を使ったリンクタグの使用例(画像の周りに囲い線がある場合)

<center><a href="http://plaza.rakuten.co.jp/dejiko21/"><img src="http://plaza.rakuten.co.jp/img/user/21/43/1612143/29.jpg" width="180" height="136" alt="ぷちこ(縮小版)"></a></center>

↑のタグにより、↓のようにHP上に表示されるようになります

ぷちこ(縮小版)







例3. 画像を使ったリンクタグの使用例(画像の周りに囲い線を付けない場合)

<center><a href="http://plaza.rakuten.co.jp/dejiko21/"><img src="http://plaza.rakuten.co.jp/img/user/21/43/1612143/29.jpg" width="180" height="136" alt="ぷちこ(縮小版)" border="0" ></a></center>


↑のタグにより、↓のようにHP上に表示されるようになります

ぷちこ(縮小版)







例4. リンク先ウィンドウをどこに表示させるかの指定(target="_blank"の場合)

この target="" の指定は、新たにブラウザを立ち上げてページを表示する場合や、 フレームタグ を使って画面を分割している場合などに使用します。


target=""
_blank … (新たにブラウザを立ち上げて表示します)
_top … (フレームの分割を廃止して画面全体で表示します)
_self … (リンク元と同じウィンドウ(フレーム)に表示します)デフォルト
_parent … (親フレームに表示します)
ウィンドウ名(フレーム名) … (任意のウィンドウ(フレーム)に表示します)


<center><a href="http://plaza.rakuten.co.jp/dejiko21/" target="_blank" ><img src="http://plaza.rakuten.co.jp/img/user/21/43/1612143/29.jpg" width="180" height="136" alt="ぷちこ(縮小版)" border="0" ></a></center>

↑のタグにより、↓のようにHP上に表示されるようになります

ぷちこ(縮小版)


※画像についての詳細は、 こちら の項目をご覧ください。


↓の画像をクリックするとトップページに戻ります。


↓↓↓   【CLICK HERE】   ↓↓↓


危険!


↑↑↑   【CLICK HERE】   ↓↓↓





© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: