こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

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

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

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

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

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

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

投稿日時 - 2013-12-17 23:49:49

QNo.8390687

すぐに回答ほしいです

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

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

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

投稿日時 - 2013-12-18 15:06:05

お礼

丁寧な回答本当にありがとうございました。

投稿日時 - 2014-01-17 19:25:06

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(6)

ANo.6

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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>

投稿日時 - 2013-12-19 19:10:50

お礼

大変詳しいご回答ありがとうございます。

また機会があれば宜しくお願いいたします。

投稿日時 - 2014-01-17 19:22:34

ANo.5

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

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

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


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

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

投稿日時 - 2013-12-18 18:39:54

お礼

丁寧なご回答ありがとうございました。
大変参考になりました。

投稿日時 - 2014-01-17 19:23:18

ANo.3

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;}

投稿日時 - 2013-12-18 14:36:23

ANo.2

そのサイト自体は、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">

[スタイルシート]は下記のように3種類用意します。
./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

投稿日時 - 2013-12-18 12:29:49

ANo.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.通常時とマウスオーバー時の画像を2種用意して
   (aaa.png と aaa_o.png のように)
  2.Jqueryを使用し、マウスオーバー時 aaa_o.png に HTMLが
書き変わるように設定しています。

 JQueryの設定方法等が不明な場合は、オススメできません。


 もうちょっとシンプルに、

  1.ナビゲーション画像部分背景に濃いめの背景色を設定しておいて
2.css に img a:hover{opacity:0.8;}
   画像を透過させるcssです。=濃いめの背景色が薄く出て、
   結果マウスオーバーで色が変わったように見える

 ですと、メニュー1つにつき、画像1つ作成で済みます。


ちなみに、アメブロブログの申し込みメニュー部分は、メニュー部分全て一つの画像を使用し(スライスしない)、a:hoverで切り替える(画像を下にずらし、あたかも画像を切り替えるように見える。)

という感じにされていました。

・・・・ご参考になれば幸いです・・・。

投稿日時 - 2013-12-18 10:16:44

お礼

大変参考になりました。

丁寧なご回答ありがとうございました。

投稿日時 - 2014-01-17 19:26:22

あなたにオススメの質問