1枚の画像でナビゲーション＋ドロップダウンの設定

2014/01/20 03:45

このQ&Aのポイント

1枚の画像を使用して、ナビゲーションメニューとドロップダウンメニューを設定する方法について教えてください。
単純なマウスオーバーで色が変わる設定のメニューに加えて、一部のメニューにはドロップダウンメニューを追加したいです。
ペライチで作成する場合、どのように画像を設定すれば良いか迷っています。普通のメニューは1枚の画像で作成し、ドロップダウンメニューは別の画像で設定する方法も教えてください。

RiodeJanei
お礼率29% (48/163)

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

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

質問者が選んだベストアンサー

ベストアンサー

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

2014/01/20 17:26 回答No.2

細かい修正 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　のDATA入力 ★W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options ) でチェックすみ <!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"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">Top</a></li> ＿＿＿＿<li><a href="/News">News</a></li> ＿＿＿＿<li><a href="/Products">Products</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="/Products/P1">P1</a></li> ＿＿＿＿＿＿<li><a href="/Products/P2">P2</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ＿＿＿＿<li><a href="/Support">サポート</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿</div> </body> </html>

その他の回答 (1)

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

2014/01/20 09:57 回答No.1

いわゆるスプライトと言う技法です。 ※スプライトの利点は、画像を一枚だけ読み込むので、動作のたびに読み替えるより動作が機敏になる事です。 CSSは兎も角、HTMLはきちんと書きましょう。そうすればどのようにもデザインできる。　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 　にてブラウザの表示メニューからスタイルシートを選択 [HTML4.01] <div class="header"></div> <div class="section"></div> <div class="footer"> 　<div class="nav"> 　　<ol> 　　　<li><a href="/">Top</a></li> 　　　<li><a href="/News">News</a></li> 　　　<li><a href="/Products">Products</a> 　　　　<ol> 　　　　　<li><a href="/Products/P1">P1</a></li> 　　　　　<li><a href="/Products/P2">P2</a></li> 　　　　</ol> 　　　</li> 　　　<li><a href="/Support">サポート</a></li> 　　</ol> 　</div> </div> [HTML5]参考 <header></header> <section></section> <footer> 　<nav> 　　<ol> 　　　<li><a href="/">Top</a></li> 　　　<li><a href="/News">News</a></li> 　　　<li><a href="/Products">Products</a> 　　　　<ol> 　　　　　<li><a href="/Products/P1">P1</a></li> 　　　　　<li><a href="/Products/P2">P2</a></li> 　　　　</ol> 　　　</li> 　　　<li><a href="/Support">サポート</a></li> 　　</ol> 　</nav> </footer> のように書かれていると思いますので、後はスタイルシートで・・。スラスラと・・ HTMLがちゃんと書かれていたら、簡単ですね。 ★画像は添付のものをそのまま./images/menue.jpgとして利用してます。 ★子孫セレクタで指定してあるので、sectionやheaderなど他の場所のnavには影響しない。 html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:80%;margin:0 auto;} div.header{height:100px;} div.section{margin-top:30px;} div.footer div.nav{position:absolute;top:100px;left:0;width:100%;} div.footer div.nav ol,div.footer div.nav ol li{margin:0;padding:0;} div.footer div.nav ol{list-style:none;text-align:center;} div.footer div.nav ol li{display:inline-block;width:105px;height:30px;position:relative;} div.footer div.nav ol li a{ display:block;width:100%;height:100%;background-image:url(./images/menue.jpg); overflow:hidden;text-indent:-20em; } /* スプライト */ div.footer div.nav ol li ol{position:absolute;top:30px;display:none;} div.footer div.nav ol li:hover ol{display:block;} div.footer div.nav ol li ol li{height:17px;} div.footer div.nav ol li a[href="/"]{background-position:0 -2px;} div.footer div.nav ol li a[href="/News"]{background-position:-105px -2px;} div.footer div.nav ol li a[href="/Products"]{background-position:-210px -2px;} div.footer div.nav ol li a[href="/Products/P1"]{background-position:-210px -102px;} div.footer div.nav ol li a[href="/Products/P2"]{background-position:-210px -150px;} div.footer div.nav ol li a[href="/Support"]{background-position:-305px 0;} div.footer div.nav ol li a[href="/"]:hover, div.footer div.nav ol li:hover a[href="/"]{background-position:0 -36px;} div.footer div.nav ol li:hover a[href="/News"], div.footer div.nav ol li a[href="/News"]:hover{background-position:-105px -36px;} div.footer div.nav ol li:hover a[href="/Products"], div.footer div.nav ol li a[href="/Products"]:hover{background-position:-210px -36px;} div.footer div.nav ol li a[href="/Products/P1"]:hover{background-position:-210px -119px;} div.footer div.nav ol li a[href="/Products/P2"]:hover{background-position:-210px -169px;} div.footer div.nav ol li:hover a[href="/Support"], div.footer div.nav ol li a[href="/Support"]:hover{background-position:-305px -36px;} div.footer div.nav ol li a[href="/"]:active{background-position:0 -68px;} div.footer div.nav ol li a[href="/News"]:active{background-position:-105px -68px;} div.footer div.nav ol li a[href="/Products"]:active{background-position:-210px -68px;} div.footer div.nav ol li a[href="/Products/P1"]:active{background-position:-210px -135px;} div.footer div.nav ol li a[href="/Products/P2"]:active{background-position:-210px -185px;} div.footer div.nav ol li a[href="/Support"]:active;{background-position:-305px -68px;}

1枚の画像でナビゲーション＋ドロップダウンの設定

1枚の画像でナビゲーション＋ドロップダウンの設定

質問者が選んだベストアンサー

その他の回答 (1)

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう