- ベストアンサー
WEBデザイン ナビゲーションメニュー 画像
simplewebの回答
- simpleweb
- ベストアンサー率0% (0/1)
HTML作成、CSS設定、画像作成を前提に、記載致します。 1.ナビゲーション部分の横いっぱい画像について ホームページの読み込みやすさ、メンテナンスのしやすさを求められる場合、 画像はなるべく少なく、CSS の background-color などで色を指定すると よりシンプルになるかと存じます。 提示いただいたHPの構造は下記の通りでした。 ※簡略化しています。また、社名個所はあいまい検索回避のため、 ***と置き換えております。 ＊＊＊＊HTML＊＊＊＊ <body> <div id="***-header-area">~</div> <!--ヘッダー（XX株式会社）の部分--> <div id="***-navigation-area"> <!--ナビゲーション全体の部分--> <div class="navigation company"> <!--メニュー全体を入れ子にし、幅を指定することで中央に表示--> <ul> <li>ホーム</li>…. </ul> </div> </div> </body> ＊＊＊＊CSS＊＊＊＊ body{background-color:#EBEBEB;} /* ページ全体を予め灰色で設定 */ #***-header-area{background-color:#FFFFFF;} /* ヘッダー部分背景色を白に指定。背景色を変えたいパーツはこのように都度指定*/ #***-navigation-area{background-image:~;} /* ナビゲーション全体部分にrepeat-x で文字が何も入っていない画像を背景に設定 */ 2.マウスオーバー時の画像用意について 上記ホームページは 1.通常時とマウスオーバー時の画像を２種用意して （aaa.png と aaa_o.png のように） 2.Jqueryを使用し、マウスオーバー時 aaa_o.png に HTMLが 書き変わるように設定しています。 JQueryの設定方法等が不明な場合は、オススメできません。 もうちょっとシンプルに、 1.ナビゲーション画像部分背景に濃いめの背景色を設定しておいて 2.css に img a:hover{opacity:0.8;} 画像を透過させるcssです。＝濃いめの背景色が薄く出て、 結果マウスオーバーで色が変わったように見える ですと、メニュー１つにつき、画像１つ作成で済みます。 ちなみに、アメブロブログの申し込みメニュー部分は、メニュー部分全て一つの画像を使用し（スライスしない）、a:hoverで切り替える（画像を下にずらし、あたかも画像を切り替えるように見える。） という感じにされていました。 ・・・・ご参考になれば幸いです・・・。
関連する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
お礼
大変参考になりました。 丁寧なご回答ありがとうございました。