http://total-home.co.jp/
こちらのサイトの施工事例のようなレイアウトで、
マウスをのせると背景色がかわり、
色内のどこをクリックしてもリンク先へいける。
というようにしたいです。
背景色の変え方、色内をクリックでリンク先へ
の2つはできましたが、
中身を作ることができません。
上記サイトのソースを見てみると
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.3
- 回答日時:
>tableを使わずに画像,文章の配置する方法を一番知りたいです。
tableにtable。table同士の間隔を拡大 ( http://oshiete.goo.ne.jp/qa/6484811.html )の回答をご覧ください。
きちんと文書構造に従って、かつデザインを考慮してマークアップされていればどのようにもできます。
DMM.com( http://www.dmm.com/ )とか・・・ここのサイトはウィンドウ幅が狭くても並び変えられる。
>
>【マウスをのせると背景色がかわり、色内のどこをクリックしてもリンク先へいける】
>この説明を付けた理由ですが、
>こういう機能がつくつかないで方法が変わるかもしれないと思ったからです。
これは、上記の説明通り
No.2ベストアンサー
- 回答日時:
提示された参考サイトのソースを見る限り、そんなに複雑な内容ではなさそうですよ。
まず、施工事例全体を内包する入れ物(仮に、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.1
- 回答日時:
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を使わずに画像,文章の配置する方法を一番知りたいです。
【マウスをのせると背景色がかわり、色内のどこをクリックしてもリンク先へいける】
この説明を付けた理由ですが、
こういう機能がつくつかないで方法が変わるかもしれないと思ったからです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS/日本語のID・クラス名につ...
-
【VBA/HTML】IE画面内のページT...
-
スタイルシートで、id属性の中...
-
brにクラスをつけてcssでdispla...
-
最近、HTMLのヘッダーをIDで定...
-
HP作成(ワッパーを中心に)
-
CSSが効かずどのように指定すれ...
-
HTML要素のid/class名の長さに...
-
透過背景を解除するにはどうす...
-
Bootstrap3でcontainerがずれる...
-
サイトにjQueryが使用されてい...
-
webサイト印刷時に特定の画像を...
-
<div align="right"> を css で...
-
マウスカーソルを当てた時だけ...
-
<span>で2重にかけているものを...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
name属性とid属性
-
cssでIEとFIREFOX(とchrome)の...
-
CSS リンクのスタイル指定をせ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idの中のid指定
-
CSSに同じclass名がいっぱい‥。...
-
個別にリンクの色を変える方法
-
HTML要素のid/class名の長さに...
-
最近、HTMLのヘッダーをIDで定...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
スタイルシートで、id属性の中...
-
リンク文字の 一部だけ色を変...
-
外部css定義したclassをht...
-
ページの左右の余白(枠外)に...
-
<span>で2重にかけているものを...
-
CSSでテキストリンクの色を複数...
-
同ページ内でリンクの色を変え...
-
CSSが効かずどのように指定すれ...
-
display:table-cell内でこんな...
-
CSSで下まで背景色を伸ばす方法
おすすめ情報