アプリ版：「スタンプのみでお礼する」機能のリリースについて

CSS画像・文字混在縦メニュー

解決済

  • 質問者：gamaco
  • 質問日時：
  • 回答数：4件

画像と文字使った縦メニューを作成しています。
レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。
どうぞお知恵をお貸しください。
よろしくお願いいたします。


【CSS】
@charset "utf-8";
/* CSS Document */

/* ナビ設定 */
#navi1 {
margin: 0px;
padding: 0px;
position: relative;
right: 10px;
width: 200px;
float: right;
}
#navi1 li {
margin: 0px;
padding: 0px;
position: relative;
width: 200px;
float: right;
}
#navi1 #navi1_title {
width: 200px;
position: relative;
}


.sub_menu {
width: 190px;
position: relative;
float: right;
left: 5px;
}

.sub_menu ul {
list-style: none;
border-top: 1px solid #CCCCCC;
width: 190px;
position: relative;
}

.sub_menu li {
border-bottom: 1px dashed #CCCCCC;
background: #F3F0EA url(img/xx.jpg) no-repeat left center;
width: 190px;
}

.sub_menu a {
display: block; /*Windows IE対策のため、ボックス幅を指定 */
width /**/: 180px; /*Window IE5用の値を指定 */
color: #666;
text-decoration: none;
font-size: 11px;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 10px;
background-color: #F3F0EA;
background-image: url(img/xx.jpg);
background-repeat: no-repeat;
background-position: left center;
left: 3px;
}

.sub_menu a:hover {
color: #666;
width: 180px;
background-color: #E4DECF;
background-image: url(img/xx.jpg);
background-repeat: no-repeat;
background-position: left center;
}


【HTML】

<div id="navi1">
<h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2>
<ul>
<li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li>
</ul>
<ul class="sub_menu">
<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>
<li><a href="#">yyy</a></li>
</ul>
<ul>
<li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li>
<li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li>
<li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li>
</ul>
</div>

通報する

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

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

画像が見えなくなっているので詳細はわからないですが、とりあえず簡単な見本です。


★サブメニューは、メインメニューの項目の詳細ですから、
<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

XHTMLで作っていたのですが参考になりました。
ありがとうございました！

通報する
お礼日時：2011/09/04 14:51

No.3

  • 回答者： yui56544
  • 回答日時：

うーん、空白をどんな感じで使いたいのかよく分かりませんでしたので


ご要望にあうかわかりませんが、簡単に組んでみました。イメージとしてはこんな感じでしょうか？

【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要素にムダにカラーコード入ってますので
消してください
「CSS画像・文字混在縦メニュー」の回答画像3
    • good
    • 0
    • 件
通報する
この回答へのお礼

参考になるご指摘でした！
ありがとうございました！

通報する
お礼日時：2011/09/04 14:53

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　CSSがとっても解りにくいものになっていて何をしたいかわからないのでパスします。

(これじゃ将来メンテナンス困るでしょうね。)カスケーディングスタイルシートですから、カスケーディングの仕組みを使いましょう。

　原因は、HTMLにも相当あるので、まずHTMLを直しましょう。Lynxでテストすると良いです。(Win日本語版もあります)

「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。」
　ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ
　技術に関するガイドライン
　 ( http://www.google.com/support/webmasters/bin/ans … )

「テキストを画像に置き換えて表現する。」 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )のも極力避けましょう。

<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を書きましょう。数分の一の量で済むし、解りやすくなるはずです。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yui56544
  • 回答日時：

どんな完成品にしたいのかが想像できないので、とりあえずの回答


文字メニューがズレるのは、コレをスタイルシートに加えてください

#navi1 ul{
margin:0;
padding:0;
}

どこかのテンプレートを加工したものかと思いますが、結構スタイルシートに粗があるように感じられます
例えばスタイルシートの　li　の横幅がwidth:190px; と指定されているのにHTMLではその内側に入るメニュー画像がwidth="200"とリストの190px の指定を超えるサイズになっているなどは崩れの原因の一端になると思います。

加工した画像でもなんでも構わないので完成予定図のようなものが分かれば修正はできそうですが、質問内容だけだとどの辺をどの程度なおせばよいのか判別しかねるので、部分的な修正箇所しか挙げられないです＾＾；

この回答への補足

朝早くからご回答ありがとうございます。
こんなイメージです↓
http://uploader.sakura.ne.jp/src/up55324.gif

補足日時：2011/09/01 10:26
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報