WEBデザイン ナビゲーションメニュー 画像
- ウィンドウ幅いっぱいに広がる横並びのナビゲーションメニューバーの作り方について教えてください。
- ナビゲーションメニューのテキストを画像で表示させる場合の効率的な方法を教えてください。
- Photoshopを使用してカンプを作成してから画像をスライスする方法がありますが、他におすすめの方法はありますか？
- ベストアンサー
WEBデザイン ナビゲーションメニュー 画像
初歩的な質問失礼します。 最近？よく見かける、横並びのナビゲーションメニューバーがウィンドウ幅いっぱいに広がっているwebサイトのデザインについて教えていただきたいことがあります。 サイト全体がセンタリングされて、幅が固定されている横並びメニューバーは作れるのですが、 http://www.sapporoholdings.jp/ このサイトのようなナビゲーションバーを作りたいと思ったところ、自分なりに調べて幅を指定しない、などのレイアウト自体の理屈は理解しました。 しかしいざ作ろうと思ったときに画像の用意の仕方で戸惑ってしまいました。 上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか？ メニュー全体の背景画像をrepeat-xでウインドウ幅いっぱいに繰り返し指定して、各メニューのテキスト（画像）と区切りのラインを透過画像で用意しているのでしょうか？ 一番左と一番右のメニューだけに背景画像repeat-xを指定しているのでしょうか？ 質問がわかりにくくてすいません、本当に知りたくて困っています。 ちなみに私の流れとしてはphotoshopを使用して、先にカンプを作ってから画像をスライスして作っています。 どなたかわかりやすく説明して頂けないでしょうか？？ いろいろな方法があるのでしょうが、みなさんのおすすめを教えて頂きたいです。 どうかよろしくお願いします。
- lovesms
- お礼率85% (75/88)
- CSS
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
ちょっとした解説 ＞レイアウト自体の理屈は理解しました。 御存知のように、ブロック要素は幅を%指定されるとき、直近のstatic以外のブロック要素の幅を参照します。 ⇒10.3.7 絶対配置の非置換要素の場合( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#abs-non-replaced-width ) ヘッダーブロックのpositionの指定がないため、staticのままですから、ルート要素html,body要素のサイズに従います。 そのためにdiv.navをposition:absolute;width:100%;に指定してある!! ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ そのうえで、div.nav olを他のdiv.header,div.section,div.footerと近い値にすれば、背景はきちんと背景だけウィンドウ一杯に広がり、ナビゲーションはそれらと同じサイズになる。 先のスタイルシートはリキッドですから、standard.cssの後半を div.header div.nav ol li{ display:block;float:left; width:20%;border:solid 3px gray; border-width: 0 2px; position:relative; } div.header div.nav ol li+li{ border-left-width:0px; } div.header div.nav ol li a{ display:block;width:100%;height:100%; font:bold 16px sans-serif; line-height:40px; text-decoration:none; } div.header div.nav ol li a:hover{color:yellow;} とすれば、ウィンドウ幅が何であれスマホでもきちんと期待通りに表示されるはずですね。
その他の回答 (5)
- 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>
お礼
大変詳しいご回答ありがとうございます。 また機会があれば宜しくお願いいたします。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
>上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか？ 「効率がよくなる」スライスの方法というのはないと思いますが、 HTML、CSS、JavaScriptなどの設計を最初に行って、それにあわせてスライスを切れば、 少なくとも、スライス作業（エクスポート作業）のやり直しがなくなり、「なんどもやり直して効率が悪くなる」ということはなくなると思います。 スライスしてから画像変更方法を決める、というのでもいいと思いますが、 スクリプトやCSSの書き方がわからなくて作れない（作業が停止して効率が悪い）という事もあるんじゃないでしょうか。 区切り画像を別途用意するとか、メニュー項目の端に合成しておくなどの作り方の違いは、 「こういうやり方でないと作れない」というのであれば、その方法で作るしかないと思います。 いろんな作り方ができるというのであれば、 もし制作会社、制作請負などをされているのであれば、複雑さに応じて料金と作り方を変えてもいいと思います。
お礼
丁寧なご回答ありがとうございました。 大変参考になりました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2です。スタイルシートです。 ★gradi.gifは添付画像を200×160pxに縮小してGIFにする。 ★スプライトによる背景画像の切り替えは含んでいません。 御自身で調べてください。 ★CSS3のグラデーションは対応ブラウザかが少ないので画像を背景にするほうが良いでしょう。 [standard.css] @charset "Shift_JIS"; html,body{margin:0;padding:0;width:100%;position:relative;} h1,h2,h3,h4,p{margin:0;line-height:1.8em;} p{text-indent:1em;} body{background-color:silver;} div.header,div.section,div.footer{ width:90%;min-width:470px;max-width:900px; margin:0 auto;padding:5px 10px; background-color:white; } div.nav h3{display:none;} div.nav ol,div.nav ol li{list-style:none;margin:0;padding:0;} div.section div.nav{width:640px;height:480px;margin:0 auto;position:relative;background-image:url(../images/6.jpg);} div.section ol{position:absolute;height:40px;bottom:10px;right:10px;z-index:10;} div.section ol li{display:inline-block;width:40px;height:40px;margin:5px;background-color:white;} div.section ol li ol{display:none;} div.section ol li a{display:block;width:100%;height:100%;overflow:hidden;text-indent:-10em;z-index:100;} div.section ol li a[href="/"]{background-image:url(../images/icons/top.gif);} div.section ol li a[href="/Products"]{background-image:url(../images/icons/product.gif);} div.section ol li a[href="/Info"]{background-image:url(../images/icons/info.gif);} div.section ol li a[href="/Profile"]{background-image:url(../images/icons/profile.gif);} div.section ol li a:hover:before{position:absolute;top:-430px;left:-255px;z-index:-10;} div.section ol li a[href="/"]:hover:before{content:url(../images/1.jpg);} div.section ol li a[href="/Products"]:hover:before{content:url(../images/2.jpg);} div.section ol li a[href="/Info"]:hover:before{content:url(../images/3.jpg);} div.section ol li a[href="/Profile"]:hover:before{content:url(../images/4.jpg);} div.header h1{height:60px;line-height:60px;margin:0 0 80px 0;} div.header div.nav{ width:100%;height:40px;width:100%; position:absolute;top:60px;left:0; text-align:center;line-height:40px; } div.header div.nav ol li ol{display:none;} div.header div.nav ol{ width:90%;min-width:470px;max-width:900px; margin:0 auto; } div.header div.nav ol li{ display:block;float:left; width:15%;border:solid 3px gray; border-width: 0 2px; position:relative; } div.header div.nav ol li+li{ border-left-width:0px; } div.header div.nav ol li a{ display:block;width:100%;height:100%; font:bold 20px sans-serif; line-height:40px; text-decoration:none; } div.header div.nav ol li a:hover{color:yellow;} [backImage.css] @charset "Shift_JIS"; div.header div.nav{ background:url(../images/background/gradi.gif) repeat-x; } div.header div.nav ol li a:hover{ background:url(../images/background/gradi.gif) repeat-x 0 -40px; } [css3.css] @charset "Shift_JIS"; div.header div.nav{ background:linear-gradient(rgb(160,220,255),rgb(204,255,255),rgb(160,220,255),rgb(128,192,255)); } div.header div.nav ol li a:hover{ background:linear-gradient(rgb(112,190,255),rgb(147,255,255),rgb(112,190,255),rgb(76,160,255)); } [print.css] @charset "Shift_JIS"; p{line-height:1.8em;margin:0 1em;text-indent:1em;} div.header div.nav{display:none;} div.section div.nav a{text-decoration:none;} div.nav li a:after{ content:"\A url:http://hoge.com"attr(href); font-style:italic; white-space:pre; } div.footer{page-break-before:always;}
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そのサイト自体は、javascriptで画像を置き換えていますね。 製作されているなら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxをお使いだと思いますが、firebugにて、a要素にマウスオーバーすると画像が置換されることで実現しています。画像自体も背景も文字も含んだ画像であることが、HTMLソースから確認できます。具体的には「札幌グループについて」の画像は( http://www.sapporoholdings.jp/img/shared/base/btn_navigation_02.gif )から( http://www.sapporoholdings.jp/img/shared/base/btn_navigation_02_o.gif )に変化しています。 背景画像( http://www.sapporoholdings.jp/css/shared/../../img/shared/base/bg_navigation_01.gif )はrepeat-xされています。 現在は、このような手法は余り使われなくなりました。単純にCSSでデザインするほうが良いでしょう。 ・javascriptを利用しているためjavascriptが無効なUA(ユーザーエージェント)で機能しない ・都度画像を読み込むため、画像変更時にもたつくことがある 様々な方法がありますが、 ・文書構造や内容に無関係なものは背景画像にする。 ・その場合、スプライトを使って画像をあらかじめ読ませておく スプライトについては別途検索してください。 ・動的な擬似クラスを使って背景の座標を変更する。 は共通です。 ・最近の様にスマホから超幅広ディスプレイを考慮してリキッドで製作する場合は、後方互換を考えて画像を使用する。 ・固定幅の場合は、背景にする。 の選択になるでしょう。 ＞photoshopを使用して、先にカンプを作ってから画像をスライスして作っています。 この方法では、文書構造とプレゼンテーションの分離が出来ないのでは??。スタイルシートを変更したり、メディアクエリなどでUAを変える時に困りませんか？ 「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる(2.4.1 構造とプレゼンテーションの分離 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」 ⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) で、(chromeを除く)ブラウザの[表示]メニュー⇒スタイル(シート)で、色色なスタイルを選択したり印刷したり・・が不可能。そもそもHTMLが煩雑になるし・・ サンプル[HTMLは、ホームページのナビゲーションについて教えてください - ホームページ作成ソフト - 教えて！goo( http://okwave.jp/qa/q8388912.html )のNo.2の回答のものをそのまま使用します。 ただし、スタイルシートの参照部分は、下記のように書き換えます。 <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css"> <link rel="styleSheet" type="text/css" media="screen" href="./styleSheet/backImage.css" title="画像使用"> <link rel="Alternate StyleSheet" type="text/css" media="screen" href="./styleSheet4/css3.css" title="画像未使用"> <link rel="styleSheet" type="text/css" media="print" href="./styleSheet/print.css"> [スタイルシート]は下記のように３種類用意します。 ./styleSheet/standard.css ./styleSheet/backImage.css ./styleSheet/css3.css |-- sample.html |-- images/ | |-- 2.jpg いずれも、640px×480px | |-- 3.jpg | |-- 4.jpg | |-- 6.jpg | |-- icons/ | | |-- top.gi いずれも、40px×40px | | |-- product.gif | | |-- info.gif | | |-- profile.gif | |-- background/ | | |-- gradi.gif 下記のもの( ) |-- styleSheet/ | |-- sytandard.css | |-- backImage.css | |-- css3.css | |-- print.css
- 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
お礼
丁寧な回答本当にありがとうございました。