ホームページ作成 - 範囲でリンクする - WEBサイト作成　フリー素材コード　の1uphp.com スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。

ホームページ作成ＴＯＰ > マウスで変化 > 範囲でリンクする

範囲でリンクする

画像でのリンクではない場合などで、リンクさせる部分を文字部分だけではなく、段落全部などのブロック範囲などでリンクする方法です。

細かくマウスを動かす必要がなくなるので、分かりやすいページが作成できます。

sample

この文字部分でリンクしてます。
（分かりやすくする為、範囲を高く，外枠線を表示にしてあります。）

この枠内でリンクしてます。
（分かりやすくする為、範囲を高く，外枠線を表示にしてあります。）

ＨＴＭＬ　

スタイルシートを使用する事で実現できます。

ホームページ作成ＴＯＰ > マウスで変化 > 範囲でリンクする > このページのＴＯＰ　▲

スタイルシート　display:block

～内にリンク（文字に対して）を設置し～内部全体にリンク範囲を広げるという考え方で実現します。

リンクの<a>の範囲を広げる準備として、インラインの要素からブロックの要素に変更する様、display:blockを設定する。
ブロック要素の範囲を～の内部全体を範囲とする為に、<a>に対してheight,widthを１００％にする。

これで、リンクの文字が無い余白の部分にマウスを移動した時も、リンク対象部分として機能します。

今回のサンプルでは、マウスがリンク範囲に入った場合に背景色を変更する設定（a:hover{background-color:#ffcccc})を行ってます。これに関してはＴＯＰ > リンク > マウスが来た時に背景色を変更するにて説明してますので確認して下さい。

リストをメニューとして使用する場合にも使用されますので、参考にして下さい。

要素に直接書く

書き方は


<p>
<a href="リンク先" style="display:block;height:100%;width:100%">
この枠内でリンクしてます。</a>
</p>

ホームページ作成ＴＯＰ > マウスで変化 > 範囲でリンクする > このページのＴＯＰ　▲

headに書く

書き方は


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

     a     {display:block;height:100%;width:100%;}

 -->
 </style>
 </head>
 <body>

    <p>
    <a href="リンク先">この枠内でリンクしてます。</a>
    </p>

 </body>
</html>

こうなります