一般的なWebサイトのメニュータブの作り方

2012/10/19 14:48

このQ&Aのポイント

Webサイトのメニュータブの作り方を紹介します。
メニュータブはフォトショップで作成するか、HTMLとCSSを使用して作成します。
CSSを使えば、カーソルを合わせた時に光るメニュータブを作成することもできます。

noname#233083

CSS
回答数3
ありがとう数3

みんなの回答 （3）
専門家の回答

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

ベストアンサー

tracer
ベストアンサー率41% (255/621)

2012/10/21 01:56 回答No.3

メニュータブというのが具体的に何を指しているか分かりませんが、「カーソルを乗せると変化するボタン」のことを指しているのでれば、CSSスプライトという技術を使う場合も多いと思います。概要だけ書きますね。・幅100px高さ20pxのボタンとする。・幅100px高さ40pxの画像をつくる。その際、上半分は通常表示のボタン画像、下半分はカーソルを乗せた時の画像でつくる。・html/cssで幅100px高さ20pxのリンクを作り、上記の画像を指定すると、画像の上半分だけ表示されたボタンができる。・cssの:hoverでカーソルを乗せた時に、画像のy座標を20px下げる処理を書く。ま、こんな感じです。「CSSスプライト」で検索すれば沢山出てくるので、技術的なことは検索した方がわかりやすいと思います。

質問者

お礼 2012/10/23 15:58

ありがとうございます！！CSSスプライトかわかりませんが、なんとかできました！！

その他の回答 (2)

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2280)

2012/10/20 06:26 回答No.2

Photoshopで作れるのは画像だけ、文字の部分は全部HTMLですし、レイアウトはCSSです。 >また、CSSを使えば、リンクテキストにカーソルを合わせれば、文字がずらせることは知っています。だけど、よくあるメニュータブの場合、カーソルを合わせると四角のタブと文字が一緒に光ったりします。文字をずらす代わりに、色を変えたり、光ったように見える画像に置き換えたりしてください。

質問者

お礼 2012/10/23 15:56

ありがとございます！光ったように見える画像に置き換えました！！

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/10/19 16:16 回答No.1

最初にHTMLを作成します。画像とかロゴとかは後回しのほうが楽ですけど・・・先のHTMLだとすると<div class="footer">のあとに・・ナビゲーションを示すclass名をつけた<div>で囲んだリストをおきます。 <div class="footer"> 　<div class="nav"> 　　<ol> 　　　<li><a href="/">トップ</a></li> 　　　<li><a href="/outline">会社概要</a></li> 　　　<li><a href="/prodact">事業内容</a></li> 　　　<li><a href="/offer">求人情報</a></li> 　　　<li><a href="/scr">社会的責任</a></li> 　　</ol> 　</div> 　<h2>文書情報</h2> のように、そしてスタイルシートを追加します。 /* ナビゲーション用にスペースを広げる */ div.header h1{margin-top:40px;} /* ナビゲーションを、たとえば最上部に */ div.footer div.nav{position:absolute;top:0;left:0;width:100%;margin:0;} /* ごく一般的なリストをブロックに変える処理 */ div.footer div.nav ol,div.footer div.nav ol li{ 　display:block;list-style:none;margin:0;padding:0; } /* 本文とサイズをあわせておく */ div.footer div.nav ol{width:70%;margin:0 auto;position:relative;} /* サイズやデザイン */ div.footer div.nav ol, div.footer div.nav ol li{ 　line-height:34px;text-align:center; } div.footer div.nav ol li{display:inline-block;width:18%;position:relative;} /* 背景に画像を配置して:hoverなどの擬似クラスで入れ替えても良い */ div.footer div.nav ol li a{ 　display:block;width:100%;height:100%; 　border:outset 3px gray;background-color:silver; 　text-decoration:none; } div.footer div.nav ol li a:hover{background-color:white;} div.footer div.nav ol li a:active{background-color:yellow;border-style:inset;} 文字を画像に置き換えるならcolor:transparent; 全体です。 <!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">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<div class="section" id="section1"> ＿＿＿<h3>見だし</h3> ＿＿</div> ＿＿<div class="section" id="section2"> ＿＿＿<h3>見だし</h3> ＿＿</div> ＿＿<div class="section" id="section3"> ＿＿＿<h3>見だし</h3> ＿＿</div> ＿＿<div id="contentTable"> ＿＿＿<ol> ＿＿＿＿<li><a href="#section1">section1</a></li> ＿＿＿＿<li><a href="#section2">section2</a></li> ＿＿＿＿<li><a href="#section3">section3</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/outline">会社概要</a></li> ＿＿＿＿<li><a href="/prodact">事業内容</a></li> ＿＿＿＿<li><a href="/offer">求人情報</a></li> ＿＿＿＿<li><a href="/scr">社会的責任</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<h2>文書情報</h2> 以下省略・・・