- ベストアンサー
CSS画像・文字混在縦メニュー
- CSSを使用して画像と文字を組み合わせた縦メニューを作成する方法について
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
画像が見えなくなっているので詳細はわからないですが、とりあえず簡単な見本です。 ★サブメニューは、メインメニューの項目の詳細ですから、 <ul> <li><a href=""></a> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </li> <li><a href=""></a></li> </ul> とマークアップすべきです。 メニュー項目のテキストはdiv.nav h3 spanのようにspanで囲み、visibiltyで消すほうが良いです。そうするとスタイルシート読まない携帯電話や読み上げソフト、点字端末などの端末や検索エンジンにも理解できるHTMLになります。 CSSの工夫としては、同じプロパティは一度しか書かない。必要なら詳細度または順番で上書きする。 ★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" media="screen"> <!-- p{line-height:2em;margin:0;text-indent:1em;} div.section{position:relative;} div.section div.section,div.section h2{margin-left:210px;} div.section div.nav{ ＿position:absolute;top:0;left:0;width:200px;height:100%;text-align:center;} div.section div.nav ul,div.section div.nav ul li{ ＿display:block;list-style:none;margin:0;padding:0; } div.section div.nav h3{ ＿width:100%;margin:0;background-color:rgb(255,200,200);height:40px;line-height:40px; } div.section div.nav h3 span{color:red;visibility:hidden;} div.section div.nav ul li{width:200px;min-height:30px;line-height:30px;} div.section div.nav ul li ul li{width:196px;margin-left:2px;border-top:1px dotted white;background-color:gray;} div.section div.nav ul li a{display:block;width:100%;height:100%;background-color:aqua;text-decoration:none;} div.section div.nav ul li ul li a{ ＿margin:0 40px 0 40px; ＿width:116px; ＿background-color:gray; ＿position:relative; } div.section div.nav ul li ul li a:before{content:"●";position:absolute;left:-15px;} /* 以下のコメントアウトを外すとプルダウンメニューになる*/ /* div.section div.nav ul li ul li{display:none;} div.section div.nav ul li:hover ul li{display:block;} */ --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2><span>CSS画像・文字混在縦メニュー</span></h2> ＿＿<div class="section"> ＿＿＿<p>画像と文字使った縦メニューを作成しています。</p> ＿＿＿<p>レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。</p> ＿＿＿<p>どうぞお知恵をお貸しください。</p> ＿＿＿<p>よろしくお願いいたします。</p> ＿＿＿<div class="article"> ＿＿＿＿<h3>詳細</h3> ＿＿＿＿<ul> ＿＿＿＿＿<li>←グレー部分はw190px</li> ＿＿＿＿＿<li>←空白は画像の両サイドが透過で、そこに合わせるため</li> ＿＿＿＿＿<li>←●はリストマーク画像<br> ＿＿＿＿＿●は数段になる11pxのテキストの一段目に合わせたい</li> ＿＿＿＿＿<li>←テキストとテキストの間は点線(余白も含めて)</li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿＿<div class="article"> ＿＿＿＿<p> ＿＿＿＿＿とりあえずHTML4.01＋CSS2.1です。古いブラウザ用には少し手を加える必要があります。表示メニュー→スタイルシートなしで、スクリーン端末以外の理解がわかります。各項目の背景画像の指定はしてありません。 ＿＿＿＿</p> ＿＿＿</div> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3><span>サイトマップ</span></h3> ＿＿＿<ul> ＿＿＿＿<li><a href="#">メインメニュー１</a><!-- メインメニュー --> ＿＿＿＿＿<ul><!-- サブメニュー --> ＿＿＿＿＿＿<li><a href="#">サブメニュー1-1</a></li> ＿＿＿＿＿＿<li><a href="#">サブメニュー1-2</a></li> ＿＿＿＿＿＿<li><a href="#">サブメニュー1-3</a></li> ＿＿＿＿＿＿<li><a href="#">サブメニュー1-4</a></li> ＿＿＿＿＿＿<li><a href="#">サブメニュー1-5</a></li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="">メインメニュー2</a></li> ＿＿＿＿<li><a href="">メインメニュー3</a></li> ＿＿＿＿<li><a href="">メインメニュー4</a></li> ＿＿＿＿<li><a href="">メインメニュー5</a></li> ＿＿＿＿<li><a href="">メインメニュー6</a></li> ＿＿＿＿<li><a href="">メインメニュー7</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> </body> </html>
その他の回答 (3)
- yui56544
- ベストアンサー率69% (85/123)
うーん、空白をどんな感じで使いたいのかよく分かりませんでしたので ご要望にあうかわかりませんが、簡単に組んでみました。イメージとしてはこんな感じでしょうか？ 【CSS部分】 #navi1 { margin:0; padding:0; width:200px; } #navi1 h2 { margin:0; /*念のため、消して崩れないなら消してもOK*/ padding:0; /*念のため、消して崩れないなら消してもOK*/ width: 200px; height:50px; overflow:hidden; /*念のため、消して崩れないなら消してもOK*/ text-indent:-9999px; background:#FF0000 url(タイトル画像のURL) left top no-repeat; } #navi1 dl,#navi1 ul,#navi1 dt,#navi1 dd { margin:0; padding:0; list-style:none; } #navi1 dt { width:200px; height:32px; text-indent:-9999px; overflow:hidden; /*念のため、消して崩れないなら消してもOK*/ background:#FFFF00 url(メニュータイトル画像のURL) left top no-repeat; } #navi1 dd ul { margin: 0 2px 0 2px; } #navi1 dd li { margin: 0; padding:0; background: url(リスト画像のURL) 2px top no-repeat; border-bottom: 1px dashed #CCCCCC; } #navi1 dd li a { padding: 4px 3px 4px 20px;/*最後のパディング数値はリスト画像の表示に合わせて調整*/ width:196px; display: block; background:#F3F0EA; color: #666; text-decoration: none; font-size: 11px; } #navi1 dd li a:hover { background:#E4DECF; } .imgmenu a { width:200px; height:32px; display:block; } .im01,.im02,.im03,.im04,.im05 { width:200px; height:32px; text-indent:-9999px; } .im01 {background:#FF0000 url(画像メニュー1の画像URL) left top no-repeat;} .im01 a:hover {background:#000000 url(画像メニュー1のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ .im02 {background:#FF3300 url(画像メニュー2の画像URL) left top no-repeat;} .im02 a:hover {background:#000000 url(画像メニュー2のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ .im03 {background:#FF6600 url(画像メニュー3の画像URL) left top no-repeat;} .im03 a:hover {background:#000000 url(画像メニュー3のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ .im04 {background:#FF9900 url(画像メニュー4の画像URL) left top no-repeat;} .im04 a:hover {background:#000000 url(画像メニュー4のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ .im05 {background:#FFCC00 url(画像メニュー5の画像URL) left top no-repeat;} .im05 a:hover {background:#000000 url(画像メニュー5のロールオーバー画像URL) left top no-repeat;}/*ロールオーバー不要なら消す*/ 【HTML部分】 <div id="navi1"> <h2>タイトル名</h2> <dl> <dt>メニュー</dt> <dd> <ul> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> <li><a href="#">テキストメニュー</a></li> </ul> </dd> </dl> <ul class="imgmenu"> <li class="im01"><a href="#">画像メニュー1</a></li> <li class="im02"><a href="#">画像メニュー2</a></li> <li class="im03"><a href="#">画像メニュー3</a></li> <li class="im04"><a href="#">画像メニュー4</a></li> <li class="im05"><a href="#">画像メニュー5</a></li> </ul> </div> positionやfloatはスタイルシートに入れていませんので #navi1 のスタイルシート部分に自力で追加してください また、わかりやすいようにbackground要素にムダにカラーコード入ってますので 消してください
お礼
参考になるご指摘でした！ ありがとうございました！
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSSがとっても解りにくいものになっていて何をしたいかわからないのでパスします。(これじゃ将来メンテナンス困るでしょうね。)カスケーディングスタイルシートですから、カスケーディングの仕組みを使いましょう。 原因は、HTMLにも相当あるので、まずHTMLを直しましょう。Lynxでテストすると良いです。(Win日本語版もあります) 「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。」 ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ 技術に関するガイドライン ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp#2 ) 「テキストを画像に置き換えて表現する。」 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )のも極力避けましょう。 <div id="navi1"> <h2><span>サイトマップ</span></h2> <ul> <li><a href="#">yyy</a><!-- メインメニュー --> <ul><!-- サブメニュー --> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> </li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div> とかじゃないのかな？subMenueがメインと思われる<ul>より上にあるのもおかしいような?? HTMLは、どのようにプレゼンテーションするかではなく、きちんと文書構造にしたがってマークアップする。そうすれば、CSSで自在に配置できます(将来横にしたいとか、プルダウンにしたいとか)し、そもそも簡潔になる。 まず、HTMLを示してください。画像はとりあえず考えない。どの項目にどの画像を使うかがわかればよい。 そのうえで、CSSを書きましょう。数分の一の量で済むし、解りやすくなるはずです。
- yui56544
- ベストアンサー率69% (85/123)
どんな完成品にしたいのかが想像できないので、とりあえずの回答 文字メニューがズレるのは、コレをスタイルシートに加えてください #navi1 ul{ margin:0; padding:0; } どこかのテンプレートを加工したものかと思いますが、結構スタイルシートに粗があるように感じられます 例えばスタイルシートの li の横幅がwidth:190px; と指定されているのにHTMLではその内側に入るメニュー画像がwidth="200"とリストの190px の指定を超えるサイズになっているなどは崩れの原因の一端になると思います。 加工した画像でもなんでも構わないので完成予定図のようなものが分かれば修正はできそうですが、質問内容だけだとどの辺をどの程度なおせばよいのか判別しかねるので、部分的な修正箇所しか挙げられないです＾＾；
補足
朝早くからご回答ありがとうございます。 こんなイメージです↓ http://uploader.sakura.ne.jp/src/up55324.gif
お礼
XHTMLで作っていたのですが参考になりました。 ありがとうございました！