初歩的な質問失礼します。
最近?よく見かける、横並びのナビゲーションメニューバーがウィンドウ幅いっぱいに広がっているwebサイトのデザインについて教えていただきたいことがあります。
サイト全体がセンタリングされて、幅が固定されている横並びメニューバーは作れるのですが、
http://www.sapporoholdings.jp/
このサイトのようなナビゲーションバーを作りたいと思ったところ、自分なりに調べて幅を指定しない、などのレイアウト自体の理屈は理解しました。
しかしいざ作ろうと思ったときに画像の用意の仕方で戸惑ってしまいました。
上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか?
メニュー全体の背景画像をrepeat-xでウインドウ幅いっぱいに繰り返し指定して、各メニューのテキスト(画像)と区切りのラインを透過画像で用意しているのでしょうか?
一番左と一番右のメニューだけに背景画像repeat-xを指定しているのでしょうか?
質問がわかりにくくてすいません、本当に知りたくて困っています。
ちなみに私の流れとしてはphotoshopを使用して、先にカンプを作ってから画像をスライスして作っています。
どなたかわかりやすく説明して頂けないでしょうか??
いろいろな方法があるのでしょうが、みなさんのおすすめを教えて頂きたいです。
どうかよろしくお願いします。
No.4ベストアンサー
- 回答日時:
ちょっとした解説
>レイアウト自体の理屈は理解しました。
御存知のように、ブロック要素は幅を%指定されるとき、直近のstatic以外のブロック要素の幅を参照します。
⇒10.3.7 絶対配置の非置換要素の場合( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
ヘッダーブロックの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;}
とすれば、ウィンドウ幅が何であれスマホでもきちんと期待通りに表示されるはずですね。
No.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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
_</div>
</body>
</html>
No.5
- 回答日時:
>上記のサイトのように、メニューのテキストを画像で表示させる場合、通常時の画像/マウスオーバーの画像はどのように用意するのが効率がいいでしょうか?
「効率がよくなる」スライスの方法というのはないと思いますが、
HTML、CSS、JavaScriptなどの設計を最初に行って、それにあわせてスライスを切れば、
少なくとも、スライス作業(エクスポート作業)のやり直しがなくなり、「なんどもやり直して効率が悪くなる」ということはなくなると思います。
スライスしてから画像変更方法を決める、というのでもいいと思いますが、
スクリプトやCSSの書き方がわからなくて作れない(作業が停止して効率が悪い)という事もあるんじゃないでしょうか。
区切り画像を別途用意するとか、メニュー項目の端に合成しておくなどの作り方の違いは、
「こういうやり方でないと作れない」というのであれば、その方法で作るしかないと思います。
いろんな作り方ができるというのであれば、
もし制作会社、制作請負などをされているのであれば、複雑さに応じて料金と作り方を変えてもいいと思います。
No.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;}
No.2
- 回答日時:
そのサイト自体は、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">
[スタイルシート]は下記のように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
No.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で切り替える(画像を下にずらし、あたかも画像を切り替えるように見える。)
という感じにされていました。
・・・・ご参考になれば幸いです・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- WordPress(ワードプレス) ワードプレスで記事を書くスペースの横幅を広げたいです。 1 2022/09/24 18:16
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- 写真 写真(画像)編集スキルを質問する時 1 2022/12/07 14:14
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSS、width100%でもできる余白
-
【CSSについて】リストをフロー...
-
HTMLのiframeの入れ子について
-
【HTML】【CSS】【Swiper】 元...
-
CSSでボックスのheightが0になる
-
定義リスト dl dd dt
-
テーブル内の文字が揃わない
-
ヘッダーの高さが合わない
-
定義リストに下線をつけたいと...
-
divで囲まれたpaddingの指定を...
-
div内に外部のurlを表示させたい
-
定義リストで先頭にアイコン
-
外側のdivの高さを入れ子のdiv...
-
デスクトップ用のWEBサイトをス...
-
透明divの下に長い余白ができて...
-
背景が下まで表示されないんです。
-
Webサイトretinaディスプレイのcss
-
枠線でメイン部分を囲み、フッ...
-
CSS リンクを枠で囲み背景色を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報