締切済み

CSSでUL全体をリンクアクティブにしたい。

2012/04/01 23:04

いろいろ、試してみたのですが、CSSがわからなくて困っています。添付したように、縦にリストを並べたボタンを作っています。赤線枠でくくったようにメニューの一つを全体でリンクでくくりたいのですが、 <ul><a href="aaaa.html"><li><li></a></ul> なんてしてはだめですよね。今は、青でくくったように画像を除いた部分しかリンクアクティブになりません。全体をリンクさせるにはどうしたらよいでしょうか。知識不足と下手な添付でもうしわけありませんが、お助けください。よろしくお願いします。 <div class="section" id="memu"> <ul> <li id="top1"> <a href="aaaa.html"><span>Aメニュー</span><br /> textAtextAtextAtextAtextAtextAtextAtextA</a></li> </ul> <ul> <li id="top2"> <a href="bbbb.html"><span>Bメニュー</span><br /> textBtextBtextBtextBtextBtextBtextBtextBtextB </a></li> </ul> <ul> <li id="top3"> <a href="cccc.html"><span>Cメニュー</span><br /> textCtextCtextCtextCtextCtextCtextCtextCtextCtextC </a></li> </ul> </div> ■■CSS■■ .section { clear:both; margin:0 auto; padding:0; overflow:hidden; } #index { margin:0 auto; } #index #memu ul { clear:both; display:block; margin:0 0 2px 0; padding:10px 0 10px 0; background:url(../img/top_bg.jpg) repeat-x left bottom; border-top: #CCC solid 0px; overflow:hidden; } #index #memu li { padding:1px 10px 0 100px; } #index #memu li a { display:block; height:59px; padding-bottom:10px; color:#000; overflow:hidden; } /* img画像設定*/ #index #memu #top1 { background:url(../img/top1.jpg) no-repeat 10px 5px; } #index #memu #top2 { background:url(../img/top2.jpg) no-repeat 10px 5px; } #index #memu #top3 { background:url(../img/top3.jpg) no-repeat 10px 5px; } /* リンクの見出し部分*/ #index #memu span { color: #AAA; font-size: 1.5em; font-size: 140%; font-weight: bold; }

noname#153155

CSS
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/04/03 01:18 回答No.3

HTMLがどうであれ、同じようにプレゼンテーションできますので、サンプルを示しておきます。　言い換えれば、文書構造とプレゼンテーションを切り離すことで、好きなようにデザインできるし、逆にプレゼンテーションが同じでもHTMLはまったく異なっていてもよいということ。要はHTMLを作成するときプレゼンテーションは考える必要がないということです。 <!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> ＿</div> ＿<div class="section"> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="./cooking">男の料理</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><img src="./image/a-1.gif" width="60" height="50" alt="肉じゃが"></li> ＿＿＿＿＿＿<li>男子厨房に入らず・・とは言っても、アウトドアでは腕を振るうことも・・</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="./camp">キャンプ</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><img src="./image/a-2.gif" width="60" height="50" alt="愛車"></li> ＿＿＿＿＿＿<li>トータルすると、すでに１００泊を超えてしまったキャンプの記録</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="./dog">犬</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li><img src="./image/a-3.gif" width="60" height="50" alt="シェリー"></li> ＿＿＿＿＿＿<li>大事な家族の一員である我が家のペットのこと</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿</div> </body> </html>

質問者

お礼 2012/04/03 08:50

丁寧なサンプル、本当にありがとうございます！試してみます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/04/02 19:56 回答No.2

ひとつのナビゲーションですから、 <div class="nav"> 　<ul> 　　<li><a href=""></a></li> と言う形になります。デザインのためにHTMLを書こうとするから無理が生じる。リンクに、リンク先のタイトル/サムネイル/説明文が入るのですから、ごく普通に <div class="nav"> 　<ul> 　　<li><a href=""><span class="title">title</span><img><span class="message">なんたらかんたら・・・・</a></li> 　あるいは、 <div class="nav"> 　<dl> 　　<dt><a href="">title</a></dt> 　　<dd><img></dd> 　　<dd>なんたらかんたら・・・・・・・・・・・</dd> 　あるいは、 <div class="nav"> 　<ul> 　　<li><a href="">title</a> 　　　<ul> 　　　　<li><a href=""><img></a></li> 　　　　<li><a href-="">なんたらかんたら・・・・</a></li> 　とかすべきです。　background-imageは、文字通り背景です。背景ではなくサムネイルのように意味のある画像なら<img>でマークアップすべきです。・・・スタイルシートのためだけに、無意味なIDはつけないようにしましょう。

質問者

お礼 2012/04/02 23:06

ありがとうございます。無意味なID、使ってますね。CSSが全体的な部分が勉強しても、全くわからず、考え物です。。 <div class="nav"> 　<ul> 　　<li><a href=""><span class="title">title</span><img><span class="message">なんたらかんたら・・・・</a></li> やってみます。ありがとうございます。