プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：fujino00
  • 質問日時：
  • 回答数：3件

初めてWebサイトを作っているのですが、まずは素材を集める必要があると思い、フォトショップでサイトのロゴなどを作りました。また、「メールでのお問い合わせはこちら」というリンク画像も作りました。

そして次に、よくあるメニュータブ（例えば、会社概要や事業内容、求人情報、CSRなど）にとりかかろうと思っているのですが、これは一般的にどうやって作っているのでしょうか？

フォトショップで作っているのでしょうか？
それとも、HTMLとCSSだけで作っているのでしょうか？

また、CSSを使えば、リンクテキストにカーソルを合わせれば、文字がずらせることは知っています。だけど、よくあるメニュータブの場合、カーソルを合わせると四角のタブと文字が一緒に光ったりします。

この方法についても教えて下さい。お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： tracer
  • 回答日時：

メニュータブというのが具体的に何を指しているか分かりませんが、「カーソルを乗せると変化するボタン」のことを指しているのでれば、CSSスプライトという技術を使う場合も多いと思います。


概要だけ書きますね。


・幅100px高さ20pxのボタンとする。

・幅100px高さ40pxの画像をつくる。その際、上半分は通常表示のボタン画像、下半分はカーソルを乗せた時の画像でつくる。

・html/cssで幅100px高さ20pxのリンクを作り、上記の画像を指定すると、画像の上半分だけ表示されたボタンができる。

・cssの:hoverでカーソルを乗せた時に、画像のy座標を20px下げる処理を書く。


ま、こんな感じです。
「CSSスプライト」で検索すれば沢山出てくるので、技術的なことは検索した方がわかりやすいと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/10/23 15:58

No.2

  • 回答者： taloo
  • 回答日時：

Photoshopで作れるのは画像だけ、


文字の部分は全部HTMLですし、レイアウトはCSSです。

>また、CSSを使えば、リンクテキストにカーソルを合わせれば、文字がずらせることは知っています。だけど、よくあるメニュータブの場合、カーソルを合わせると四角のタブと文字が一緒に光ったりします。

文字をずらす代わりに、色を変えたり、光ったように見える画像に置き換えたりしてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2012/10/23 15:56

No.1

  • 回答者： ORUKA1951
  • 回答日時：

最初に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">
<!--
html,body{margin:0;padding:0;background-color:gray;}
h1,h2,h3,p{margin:0;line-height:1.6em;}
body>div.header,body>div.section,body>div.footer{
width:70%;min-width:480px;max-width:800px;
margin:0 auto;
background-color:silver;
}
body>div>*{margin:0 20px;}
div.header h1{
margin:0 20%;
text-align:center;
background-color:yellow;
}
body>div.section{
min-height:300px;
position:relative;
background-color:white;
}
body>div.section>*{
margin-left:25%;
}
#contentTable{
position:absolute;top:0;left:0;width:24%;
margin:0;
background-color:yellow;
height:100%;
}
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;}
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;}

-->
＿</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>
以下省略・・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しく教えて頂き、ありがとうございます！！

通報する
お礼日時：2012/10/23 15:56

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

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

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報