HTML,CSSの記述について

解決済

質問者：Ruddy95
質問日時：2012/08/10 04:10
回答数：2件

添付画像のようなレイアウトにする場合，どのように記述すればよいでしょうか？
（画像マウスオーバー時に画像のみが切り替わるという事です）

初心者なのでサンプルを書いてくださると助かります

↓これは自分で考えてみたものです。自分のブログからのコピペなのでおかしいかもしれません。
【html】
<div class="rolloverPositionMenu">
<div align=left>
<img src="a.jpg">
</div></div>

<div align=right>
<div class="left">text-areaA</div><div class="right">text-areaB</div>
<div class="left">text-areaC</div>
</div>

【CSS】
.left {
float:left;
}
.right {
float:right;
}

a.rolloverPositionMenu {
background: #fff url(b.jpg) left top no-repeat;
color: #fff;
display: block;
overflow: hidden;
text-align: center;
position: relative;
}
a.rolloverPositionMenu:hover{
background-color: #f73;
color: #f00;
}
a.rolloverPositionMenu img {
background-color: #fff;
}
a.rolloverPositionMenu:hover img {
position: relative;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2012/08/10 17:35

No.1です。

dl.photoList dt,dl.photoList dt{display:block;list-style-type:none;margin:0;padding:0;}
dl.photoList dt{
＿border:solid 1px gray;
＿width:590px;margin:0 auto;
＿height:200px;
＿padding-left:210px;
}
dl.photoList dt+dd{
＿position:
}
は不要でした。dl(定義リスト)でやってみようと思った名残です。

ちょっと、かっこよく修正・・

ul.photoList,ul.photoList li{display:block;list-style-type:none;margin:0;padding:0;}
ul.photoList li{
＿border:solid 1px gray;
＿width:800px;margin:5px auto;
＿position:relative;
}
ul.photoList li a{
＿position:absolute;left:-2px;top:-2px;
＿display:block;width:200;height:200;
＿display:none;
}
ul.photoList li a img{
＿display:block;
＿border:solid gray 0.5px;
＿border-radius:10px;
＿box-shadow: 5px 5px 10px rgba(0,0,0,0.8);
}
ul.photoList li img:hover+a,
ul.photoList li a:hover{
＿display:block;
}
ul.photoList li ul li{
＿position:absolute;
＿width:auto;
＿top:0;left:210px;
＿border:none;
}
ul.photoList li ul li+li{
＿right:10px;
＿text-align:right;
}
ul.photoList li ul li+li+li{
＿top:30px;
＿text-align:left;
＿text-indent:1em;
＿font-size:1.2em;
＿text-indent:1em;
}

- 0
- 件

通報する

この回答へのお礼

ご丁寧にありがとうございました

もっと勉強します(*^^)

おかげで思った通りのものができ感謝の気持ちでいっぱいです

本当にありがとうございました

通報する

お礼日時：2012/08/12 02:22

No.1

回答者： ORUKA1951
回答日時：2012/08/10 12:10

HTMLから間違っている--デザインのためにHTMLを書いてはなりません。

・構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　など、様々なところで言及されています。---とってもとっても大事です。

たとえば、次のような二枚の画像で構成されるリストがあったとします。
<ul class="photoList" id="productList">
　<li><img src="./images/abc.jpg" width="240" height="180" alt="掃除機1"><img src="./images/abc2" width="240" height="180" alt=掃除機1-2"">
　　<ul>
　　　<li class="name">商品名</li>
　　　<li class="price">定価</li>
　　　<li class="explain">商品説明</li>
　　</ul>
　</li>
・・・・以下省略・・・・
　このようにHTMLは、文書構造だけを記述します。もちろん、文書構造がこれと異なるものでしたら、まったく異なるHTMLになるでしょう。それでも、同じようにデザインできます。
　逆の見方をすれば、きちんとHTMLが書かれていれば、どのようにもデザインできますし、また、同じHTMLであっても、スタイルシートを書き換えるだけで、まったく異なるデザインにできます。

★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済みHTML4.01strict + CSS2.1
※タブは＿に置換してあるので戻すこと。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<ul class="photoList" id="productList1">
＿＿＿<li><img src="./images/abc1.jpg" width="200" height="200" alt="掃除機1"><a href="./product/abc.html"><img src="./images/abc2.jpg" width="200" height="200" alt="掃除機1-2"></a>
＿＿＿＿<ul>
＿＿＿＿＿<li class="name">商品名</li>
＿＿＿＿＿<li class="price">定価</li>
＿＿＿＿＿<li class="explain">商品説明</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li><img src="./images/efg1.jpg" width="200" height="200" alt="掃除機1"><a href="./product/abc.html"><img src="./images/efg2.jpg" width="200" height="200" alt="掃除機1-2"></a>
＿＿＿＿<ul>
＿＿＿＿＿<li class="name">商品名</li>
＿＿＿＿＿<li class="price">定価</li>
＿＿＿＿＿<li class="explain">商品説明</li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿</ul>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2005-06-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>