WEBデザイン　ナビゲーションメニュー　画像

Question

初歩的な質問失礼します。

最近？よく見かける、横並びのナビゲーションメニューバーがウィンドウ幅いっぱいに広がっているwebサイトのデザインについて教えていただきたいことがあります。
サイト全体がセンタリングされて、幅が固定されている横並びメニューバーは作れるのですが、
http://www.sapporoholdings.jp/
このサイトのようなナビゲーションバーを作りたいと思ったところ、自分なりに調べて幅を指定しない、などのレイアウト自体の理屈は理解しました。

しかしいざ作ろうと思ったときに画像の用意の仕方で戸惑ってしまいました。

上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか？

メニュー全体の背景画像をrepeat-xでウインドウ幅いっぱいに繰り返し指定して、各メニューのテキスト（画像）と区切りのラインを透過画像で用意しているのでしょうか？
一番左と一番右のメニューだけに背景画像repeat-xを指定しているのでしょうか？

質問がわかりにくくてすいません、本当に知りたくて困っています。
ちなみに私の流れとしてはphotoshopを使用して、先にカンプを作ってから画像をスライスして作っています。

どなたかわかりやすく説明して頂けないでしょうか？？
いろいろな方法があるのでしょうが、みなさんのおすすめを教えて頂きたいです。
どうかよろしくお願いします。

ORUKA1951 · Accepted Answer

ちょっとした解説
＞レイアウト自体の理屈は理解しました。
御存知のように、ブロック要素は幅を%指定されるとき、直近の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;}

とすれば、ウィンドウ幅が何であれスマホでもきちんと期待通りに表示されるはずですね。

ORUKA1951 · Answer

No.4です。ちょっと時間が取れたのでたぶん最も効果的な方法・SEO的に・ごく小さな画像を読み込ませる　スプライトと併用することで動作も速いしネットワーク負荷も小さい・HTMLが極めてシンプルでメンテナンスが容易 ★タブは＿に置換してあるので戻す。 ★画像は添付の物(20px×160px) ＿＿サンプル＿＿＿＿＿＿＿

＿＿

見出し

＿

taloo · Answer

>上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか？

「効率がよくなる」スライスの方法というのはないと思いますが、
HTML、CSS、JavaScriptなどの設計を最初に行って、それにあわせてスライスを切れば、
少なくとも、スライス作業（エクスポート作業）のやり直しがなくなり、「なんどもやり直して効率が悪くなる」ということはなくなると思います。

スライスしてから画像変更方法を決める、というのでもいいと思いますが、
スクリプトやCSSの書き方がわからなくて作れない（作業が停止して効率が悪い）という事もあるんじゃないでしょうか。

区切り画像を別途用意するとか、メニュー項目の端に合成しておくなどの作り方の違いは、
「こういうやり方でないと作れない」というのであれば、その方法で作るしかないと思います。

いろんな作り方ができるというのであれば、
もし制作会社、制作請負などをされているのであれば、複雑さに応じて料金と作り方を変えてもいいと思います。

ORUKA1951 · Answer

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 · Answer

そのサイト自体は、javascriptで画像を置き換えていますね。

　製作されているなら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/dev … )の豊富なfirefoxをお使いだと思いますが、firebugにて、a要素にマウスオーバーすると画像が置換されることで実現しています。画像自体も背景も文字も含んだ画像であることが、HTMLソースから確認できます。具体的には「札幌グループについて」の画像は( http://www.sapporoholdings.jp/img/shared/base/bt … )から( http://www.sapporoholdings.jp/img/shared/base/bt … )に変化しています。
　背景画像( http://www.sapporoholdings.jp/css/shared/../../i … )はrepeat-xされています。

　現在は、このような手法は余り使われなくなりました。単純にCSSでデザインするほうが良いでしょう。
・javascriptを利用しているためjavascriptが無効なUA(ユーザーエージェント)で機能しない
・都度画像を読み込むため、画像変更時にもたつくことがある

様々な方法がありますが、
・文書構造や内容に無関係なものは背景画像にする。
・その場合、スプライトを使って画像をあらかじめ読ませておく
　　スプライトについては別途検索してください。

・動的な擬似クラスを使って背景の座標を変更する。
は共通です。
・最近の様にスマホから超幅広ディスプレイを考慮してリキッドで製作する場合は、後方互換を考えて画像を使用する。
・固定幅の場合は、背景にする。
の選択になるでしょう。

＞photoshopを使用して、先にカンプを作ってから画像をスライスして作っています。
　この方法では、文書構造とプレゼンテーションの分離が出来ないのでは??。スタイルシートを変更したり、メディアクエリなどでUAを変える時に困りませんか？
「文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる(2.4.1 構造とプレゼンテーションの分離 http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　で、(chromeを除く)ブラウザの[表示]メニュー⇒スタイル(シート)で、色色なスタイルを選択したり印刷したり・・が不可能。そもそもHTMLが煩雑になるし・・

サンプル[HTMLは、ホームページのナビゲーションについて教えてください - ホームページ作成ソフト - 教えて！goo( http://oshiete.goo.ne.jp/qa/8388912.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 · Answer

HTML作成、CSS設定、画像作成を前提に、記載致します。 1.ナビゲーション部分の横いっぱい画像についてホームページの読み込みやすさ、メンテナンスのしやすさを求められる場合、画像はなるべく少なく、CSS の background-color などで色を指定するとよりシンプルになるかと存じます。提示いただいたHPの構造は下記の通りでした。 ※簡略化しています。また、社名個所はあいまい検索回避のため、　***と置き換えております。＊＊＊＊HTML＊＊＊＊　　　

~

　　　＊＊＊＊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で切り替える（画像を下にずらし、あたかも画像を切り替えるように見える。）という感じにされていました。・・・・ご参考になれば幸いです・・・。

WEBデザイン ナビゲーションメニュー 画像

ちょっとした解説

No.4です。

>上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか？

No.2です。

そのサイト自体は、javascriptで画像を置き換えていますね。

HTML作成、CSS設定、画像作成を前提に、記載致します。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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

WEBデザイン　ナビゲーションメニュー　画像