- ベストアンサー
WEBデザイン ナビゲーションメニュー 画像
ORUKA1951の回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.4です。ちょっと時間が取れたのでたぶん最も効果的な方法 ・SEO的に ・ごく小さな画像を読み込ませる スプライトと併用することで動作も速いしネットワーク負荷も小さい ・HTMLが極めてシンプルでメンテナンスが容易 ★タブは＿に置換してあるので戻す。 ★画像は添付の物(20px×160px) <!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"> <!-- html,body{margin:0;padding:0;background-color:silver;} div.header,div.section,div.footer{ width:80%;min-width:470px;max-width:900px;/* コンテンツの幅 */ margin:0 auto; background-color:white; padding:5px; } div.header h1{ margin:0 0 60px 0; line-height:60px; } div.header div.nav h3{display:none;} /* ここから */ div.header div.nav{ position:absolute; top:60px;left:0;/* 位置を指定 */ width:100%;height:40px;/* 幅を指定 */ background-image:url(./images/background/nav.jpg);/* 背景画像(スプライトとして利用) */ } div.header div.nav ol,div.header div.nav ol li{ margin:0;padding:0;/* 余計な物 */ } div.header div.nav ol{ text-align:center; list-style:none; width:80%;min-width:470px;max-width:900px;/* コンテンツの幅と同じ */ padding:0 5px; margin:0 auto; line-height:40px;/* 文字が縦中央 */ background-color:blue;/* 枠線になる */ } div.header div.nav ol li{ width:24.2%;height:100%; display:inline-block;/* 行内ブロックに */ } div.header div.nav ol li a{ display:block; width:100%;height:100%; background-image:url(./images/background/nav.jpg); text-decoration:none; } /* リンクの擬似クラス、動的な擬似クラスで背景をずらす */ div.header div.nav ol li a:link{background-position:0 -40px;font-weight:bold;color:blue;} div.header div.nav ol li a:visited{color:red;} div.header div.nav ol li a:hover{background-position:0 -80px;color:yellow;} div.header div.nav ol li a:active{background-position:0 -120px;color:red;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<h3>サイトマップ</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="./nav.htm">トップ</a></li> ＿＿＿＿<li><a href="http://google.co.jp">製品</a></li> ＿＿＿＿<li><a href="/Info">情報</a></li> ＿＿＿＿<li><a href="/Profile">プロフィール</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-12-18</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2013-12-19 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
関連するQ&A
- WEBサイトのメニューバーを画像で作るのがいいのか、それともテキストと
WEBサイトのメニューバーを画像で作るのがいいのか、それともテキストとCSSの背景画像で作るのがいいのか、どちらがどういいのか良くわかりません。 それぞれの長所と短所を教えて下さい。 また、他にメニューバーを作る方法があれば教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳ：liで作成したメニューの一つだけ背景画像を変えたい
こんにちは。ページのメニューバーを<li>で作成していますが、 リンクがある<li>と、ない<li>で背景画像を変えたいのですが、<a:hover>の際の画像も別にしようと、背景画像を<a>で指定しまったため、どうしようかな、と行き詰りました。 ・【横並び】 ・【リンクあるなし別のボタン背景画像】 ・【hover時も背景画像チェンジ】 の３点をかなえるには、どのような記述がすっきりするでしょうか。ご意見。ご指摘・叱咤、お聞かせくださいませ。 ちなみに、作っておいて、へばった記述例が、以下です。 例）横並びのメニューボタン（メニュー１、２、３） ・メニュー１（閲覧しているページへのリンクボタンなので、リンクなし）→背景Ａ[../images/A.gif]、 ・メニュー２（他ページへのリンクボタン）→背景Ｂ[../images/B.gif]、hover時は背景Ｃ[../images/C.gif] ・メニュー３（メニュー２と同様） ----------------- ul#menu{ font-size: 12px; list-style-type:none; width:800; } ul#menu::after { visibility: hidden; clear: both; } ul#menu li{ float: left; width: 120px; list-style-type: none; display: inline; } ul#menu a{ color: #333; text-decoration: none; display: block; background-image: url(../images/B.gif); background-repeat: no-repeat; } ul#menu a:hover{ color: purple; text-decoration: underline; display: block; background-image: url(../images/C.gif); background-repeat: no-repeat; } -------------------
- ベストアンサー
- CSS
- 【CSS/HTML】ナビゲーションメニューについて
【CSS/HTML】ナビゲーションメニューについて http://pegoring.blog108.fc2.com/ ・ボタンたちをコンテンツの幅に合わせる方法（左並びからセンタリングへ）を教えてください。 ・ボタンにカーソルを合したとき（hover)にそのカーソルを合したときの高さと背景の高さが合いません。 ・そのコンテンツの時にボタンの要素（色や背景など）を変更する方法を教えてください。（たとえば、Homeならチプページにいるときだけ、そのボタンだけ背景を変えるなど） →Javascriptになるとおもいます。javascriptに詳しい方、こっちも教えていただけると幸いですorz。 画像を横幅いっぱいにrepeatさせて、中央にコンテンツを置くようにしたいんです。 オレンジの背景が横いっぱいに最後まで続き、ボタンはコンテンツの幅に揃えたいんです。 とにかく、リンクから実際に見てもらえば言いたいことのおおよそはつかんでいただけると思います。
- 締切済み
- HTML
- CSS/背景画像をセンタリングした際に、スクロールバーの有無で位置が変わってしまうのを防ぐには？
背景画像を中央で縦に並べる形でサイトを作っております. background-repeat:repeat-y; background-position:50%（或いはcenter) ページによって、スクロールバーの有無があるのですが、これによって（バーの幅による）中央の背景位置に微妙なズレが生じてしまいます。 フレーム使用のため少々対応に困っております. スクロールバーをどのページでも出す、背景画像をpx指定、これ以外に何か方法はあるものでしょうか？ よろしければお教えいただければありがたく思います.
- 締切済み
- HTML
- １枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。
はじめまして。初歩的な質問で非常に申し訳ないのですが 今日１日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。 ナビゲーションメニューを作っているのですが、 １枚画像でロールオーバーという方法でやっています。 [やりたいこと] 「横978px 縦40pxの画像を使って ６つのメニューに分けて、ロールオーバーをしているようにみせる」 [うまくいかない事] ・横並びにしたいのに、なぜか画像が縦に６つ並んでしまっている状態。 ・最初の「home」以外が全くロールオーバーしてくれない・・・ どこかおかしなところがあれば教えてください・・ よろしくお願いいたします。 【HTML】 <div id="navigation"> <ul> <li id="bttop"><a href="#" title="Home">Home</a></li> <li id="btdai"><a href="#" title="menu1">menu1</a></li> <li id="btsyo"><a href="#" title="menu2">menu2</a></li> <li id="btweb"><a href="#" title="menu3">menu3</a></li> <li id="btmap"><a href="#" title="menu4">menu4</a></li> <li id="bttel"><a href="#" title="menu5">menu5</a></li> </ul> </div> 【CSS】 #navigation { position: absolute; width: 978px; } #navigation ul { width: 978px; height:40px; margin: 0; padding: 0; list-style: none; } #navigation li { margin: 0; padding: 0; width: 978px; height: 40px; text-indent: -9999px; } #navigation li a { width: 163px; height: 40px; text-decoration: none; display: block; float:left; } #navigation li#bttop { background: url(img/navi_bar.jpg) no-repeat 0px 0px; } #navigation li#btdai { background: url(img/navi_bar.jpg) no-repeat 163px 0px; } #navigation li#btsyo { background: url(img/navi_bar.jpg) no-repeat 326px 0px; } #navigation li#btweb { background: url(img/navi_bar.jpg) no-repeat 489px 0px; } #navigation li#btmap { background: url(img/navi_bar.jpg) no-repeat 652px 0px; } #navigation li#bttel { background: url(img/navi_bar.jpg) no-repeat 815px 0px; } /* マウスオーバー時の指定 ---------------------------------------------------- */ #navigation li#bttop a:hover { background: url(img/navi_bar.jpg) no-repeat 0px -40px; } #navigation li#btdai a:hover { background: url(img/navi_bar.jpg) no-repeat 163px -40px; } #navigation li#btsyo a:hover { background: url(img/navi_bar.jpg) no-repeat 326px -40px; } #navigation li#btweb a:hover { background: url(img/navi_bar.jpg) no-repeat 489px -40px; } #navigation li#btmap a:hover { background: url(img/navi_bar.jpg) no-repeat 652px -40px; } #navigation li#bttel a:hover { background: url(img/navi_bar.jpg) no-repeat 815px -40px; }
- 締切済み
- デザイナー・クリエイティブ職
- Winで見たときfloatさせたメニュー位置がずれる問題
お世話になります。 XHTML+CSSにてウェブページを作っている者です。 WinIEで見たときのfloatさせた置換画像の位置ずれについての質問です。 内容としては、XHTMLにて<li>を使いメニューを制作し、CSSにてそれをfloatさせ横並びのメニューにします。そしてtext-indent:-9999pxでテキストを見えなくし、代わりに<a>要素で背景に画像を配置し、画像の横並びのメニューを実現している・・・というものです。 safari、Opera、MacIE5ともにMacではやりたいことが実現できているのですが、WinIE6、7だと横並びしているメニュー画像が右へいくほど少しずつ下へずれていってしまっています。ちょうど右下がりの階段のように・・・。 これはなぜなんでしょうか？？marginとかpadding関係のバグなのでしょうか？ ちなみに、メニュー大枠の幅とひとつずつのメニュー幅の合計はピッタリ一致させているのですが、この余裕のなさが原因でしょうか？（そう思ってひとつずつのメニュー幅をそれぞれ1pxずつ縮めてみたりしたんですが、ダメでした）
- 締切済み
- HTML
- ナビゲーションバー borderプロパティ
サイトの横並びのメニューバーを作成する際、それぞれのボタンの間に1pxの区切り線を2本（２色）いれて立体感を出そうとしました。 しかし、まあ当たり前ですが、cssでa要素にborder-leftとborder-rightに線を指定しても、ボタンの間は２色はいっているのですが、左右両端のボタンだけ１色ずつしか線がでません。 背景画像をrepeat-xで横長に繰り返し、テキストはhtmlタグで、区切り線はcssで表現したいと思っております。どうすればいいのでしょうか？ どなたかアドバイスをよろしくお願い致します。
- ベストアンサー
- CSS
- 背景画像がずれる現象について
フッターの背景をCSSで指定してrepeat-xで横並びに表示したのですが、 上のほうにずれて表示されてしまいます。 フッターの文字だけは、一番下の場所に表示されるのに対して、 背景画像だけが上に表示されるのはなぜでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- プルダウンメニューを画像を使って作成したいのですが
下記のサイト http://www.toyota.co.jp/jp/ir/index.html のように画像を使ってメニューバーを作成したいのですが、作り方がわかりません。 ※テキストではなく、画像作成したいです。 大変困っています。 ご指導ご鞭撻の程何卒よろしくお願い申し上げます。
- 締切済み
- JavaScript
- webデザインcss <p>タグ内の長文について
初歩的な質問失礼致します。 webデザイン初心者です。現在サイトの制作中なのですが、<p>要素の長文について何点かわからない所が出てきたので質問させていただきます。 (1) <p>要素で記述した文章の折り返し地点は、<br>を使用しない限り<p>要素に指定したwidth幅によってきまるのでしょうか？ (2) その場合、背景画像を<p>に指定したら自動的にその背景画像も同じwidthになるのでしょうか？ 添付画像の上の図のように、<p>要素にcssで背景画像を指定して、その上に上下左右それぞれ余白をとって長文を配置したいのですが、添付画像の下のような状態になってしまいます。 以下がcssです。 p { background: url(図の水色部分) no-repeat 0 0 ; width:691px; padding: 16px 230px 16px 30px; } （リセットcssでmargin.padding.borderはそれぞれ０にしてあります。） <p>を囲む<div>を作ってそれに背景画像を指定して、<p>に折り返したい幅のwidthを、marginで余白を指定する方法がいいのでしょうか？ 出来れば<p>要素へのcss指定だけで完結させたいのですが、方法がわかりません。 どなたか初心者にもわかりやすくご教授いただけないでしょうか？？ どうかよろしくお願い致します！
- ベストアンサー
- CSS
お礼
大変詳しいご回答ありがとうございます。 また機会があれば宜しくお願いいたします。