tableを使わずに画像,文章を複雑に配置、そして

質問

http://total-home.co.jp/
こちらのサイトの施工事例のようなレイアウトで、
マウスをのせると背景色がかわり、
色内のどこをクリックしてもリンク先へいける。
というようにしたいです。

背景色の変え方、色内をクリックでリンク先へ
の２つはできましたが、
中身を作ることができません。
上記サイトのソースを見てみると
tableを使わずにできています。
再現しようとしましたが無理でした。

このような画像,文章の配置の仕方で
tableを使わずに背景色変化内クリックでリンク
するにはどうしたらいいのでしょうか。
教えて下さい。お願いします。

<style type="text/css">
/* リンク全体の装飾 */
p.boxlinks a {
display: block;
padding: 0.5em;
border: 1px solid #ccccff;
text-align: center;
text-decoration: none;
line-height: 1.5;
width: 400px; /* 横幅を指定する場合のみ記述 */
}
/* ガイド文の装飾 */
p.boxlinks a span.siteguide {
font-size: 70%;
}
/* サイト名の装飾 */
p.boxlinks a span.sitename {
text-decoration: underline;
}
/* URLの装飾 */
p.boxlinks a span.siteurl {
font-size: 75%;
font-family: Verdana,Arial,sans-serif;
}

/* 全体(マウスが載ったとき)の色 */
p.boxlinks a:hover {
background-color: #ccffff;
border-color: #0000ff;
}
/* ガイド文部分の表示色 */
p.boxlinks a:link span.siteguide { color: black; }
p.boxlinks a:visited span.siteguide { color: black; }
p.boxlinks a:hover span.siteguide { color: blue; }
/* サイト名部分の表示色 */
p.boxlinks a:link span.sitename { color: blue; }
p.boxlinks a:visited span.sitename { color: #800080; }
p.boxlinks a:hover span.sitename { color: blue; }
/* URL部分の表示色 */
p.boxlinks a:link span.siteurl { color: green; }
p.boxlinks a:visited span.siteurl { color: green; }
p.boxlinks a:hover span.siteurl { color: #cc00ff; }
</style>

<p class="boxlinks">
<a href="★リンク先URL★">
<span class="siteguide">◆ガイド文◆</span><br>
<span class="sitename">●サイト名●</span><br>
<span class="siteurl">★リンク先URL★</span><br>
</a>
</p>

回答No.2

4649panda · ベストアンサー

提示された参考サイトのソースを見る限り、そんなに複雑な内容ではなさそうですよ。

まず、施工事例全体を内包する入れ物(仮に、Aボックスとします)を作り、その中に施工事例を個別に内包する入れ物(B
ボックス)を作り、その中に画像の入る入れ物(Cボックス)と説明文が入る入れ物(Dボックス)を左右に並べて入れます。
各個別施工例の右下にあるリンクは、Dボックスの一番下に、右寄せで書いてあります。

HTMLの例としては、

<div class="A">
<div class="B">
<div class="C">画像(*)</div>　
<div class="D">説明文。<p style="text-align: right; ">リンク</p></div>
</div>
</div>

です。

CSSの方で、Dボックス
float: right;
で指定してやればOKです。
あと、Aボックスは何度も出てくる(float指定の後で)ので、
clear:both;
を忘れずに付けて下さい。

*
ここにオンマウスで背景色が変わる設定をしているなら、写真の代わりに無色透明のGIFを画像を張って、そこにリンクをつけてはどうでしょうか？
(全然ちがっていたらすみません)

参考URL：

http://total-home.co.jp/

お礼

ありがとうございました。

回答No.3

ORUKA1951

>tableを使わずに画像,文章の配置する方法を一番知りたいです。

　tableにtable。table同士の間隔を拡大 ( http://okwave.jp/qa/q6484811.html )の回答をご覧ください。
　きちんと文書構造に従って、かつデザインを考慮してマークアップされていればどのようにもできます。
　DMM.com( http://www.dmm.com/ )とか・・・ここのサイトはウィンドウ幅が狭くても並び変えられる。

>
>【マウスをのせると背景色がかわり、色内のどこをクリックしてもリンク先へいける】
>この説明を付けた理由ですが、
>こういう機能がつくつかないで方法が変わるかもしれないと思ったからです。
　これは、上記の説明通り

お礼

ありがとうございました。

回答No.1

ORUKA1951

anchor要素<a>はインライン要素で、サイズは内容物で伸縮しますが、これをブロック要素にすればできます。
　ナビゲーションリスト、HTML5だと<nav>でよいのですが、HTML4.01以前だと
　<ul class="nav">
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ul>
のような場合、
ul.nav li{display:inline-block;width:100px;height:80px;}
ul.nav li a{display:block;width:100%;height:100%;}
とか・・・

お礼

ありがとうございました。

補足

有難うございます。

すみません、私の質問の仕方が紛らわしかったです。
http://total-home.co.jp/
こちらのサイトの施工事例のようなレイアウトで、
tableを使わずに画像,文章の配置する方法を一番知りたいです。

【マウスをのせると背景色がかわり、色内のどこをクリックしてもリンク先へいける】
この説明を付けた理由ですが、
こういう機能がつくつかないで方法が変わるかもしれないと思ったからです。