- ベストアンサー
tableを使わずに背景色変化内クリックでリンクする方法
- 画像や文章を複雑に配置して、マウスを乗せると背景色が変わり、クリックでリンク先に遷移する方法について教えてください。
- 上記のようなレイアウトを実現するために、tableを使用しない方法を探していますが、うまくできませんでした。どのようにすれば実現できるでしょうか。
- http://total-home.co.jp/の施工事例のようなレイアウトを作りたいですが、tableを使用しない方法を教えてください。
- tekkenman7
- お礼率70% (150/212)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
提示された参考サイトのソースを見る限り、そんなに複雑な内容ではなさそうですよ。 まず、施工事例全体を内包する入れ物(仮に、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/
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>tableを使わずに画像,文章の配置する方法を一番知りたいです。 tableにtable。table同士の間隔を拡大 ( http://okwave.jp/qa/q6484811.html )の回答をご覧ください。 きちんと文書構造に従って、かつデザインを考慮してマークアップされていればどのようにもできます。 DMM.com( http://www.dmm.com/ )とか・・・ここのサイトはウィンドウ幅が狭くても並び変えられる。 > >【マウスをのせると背景色がかわり、色内のどこをクリックしてもリンク先へいける】 >この説明を付けた理由ですが、 >こういう機能がつくつかないで方法が変わるかもしれないと思ったからです。 これは、上記の説明通り
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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を使わずに画像,文章の配置する方法を一番知りたいです。 【マウスをのせると背景色がかわり、色内のどこをクリックしてもリンク先へいける】 この説明を付けた理由ですが、 こういう機能がつくつかないで方法が変わるかもしれないと思ったからです。
お礼
ありがとうございました。