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

2023/10/24 14:24

このQ&Aのポイント

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

ベストアンサー

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

2012/10/19 14:48

初めてWebサイトを作っているのですが、まずは素材を集める必要があると思い、フォトショップでサイトのロゴなどを作りました。また、「メールでのお問い合わせはこちら」というリンク画像も作りました。そして次に、よくあるメニュータブ（例えば、会社概要や事業内容、求人情報、CSRなど）にとりかかろうと思っているのですが、これは一般的にどうやって作っているのでしょうか？フォトショップで作っているのでしょうか？それとも、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/2281)

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> 以下省略・・・

質問者

お礼 2012/10/23 15:56

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

関連するQ&A

効率よくWebサイトを制作するには？
Webデザイナーの卵です。いくつかサイトを制作したのですが、まだ慣れないこともあり物凄く時間がかかってしまいます。時間短縮が必要不可欠だと思うのですが、皆様はどのような工程で、どのようなソフトを使ってサイトを制作しますか？ちなみに自分は… 　ものすごーく簡単なラフ画を制作　　↓ 　ロゴをイラレで作ったりして、　全体のイメージ制作はフォトショップで。　　↓ 　パーツごとに切り取り　　↓ 　ドリームウィーバーでコーディング全体のイメージを作ったけど、それをHTMLにしていく過程に物凄く時間がかかっている感じです。アプリケーション間の連携もうまくいっていないというか…。ちなみに会社のPCスペックが低すぎて、フォトショップとイラレ同時起動はできず、フォトショップ立ち上げたり、イラレ立ち上げたり…　この辺もストレスですね。皆様のやり方を教えていただけるとうれしいです。
- ベストアンサー
- グラフィックソフト
IE７のタブに表示されるサイトのロゴ
　検索しても過去の回答が見つからなかったので投稿します。　IE7のタブに各サイトのロゴ（gooなら赤い四角にｇ）が表示されますが、タブに違うサイトのロゴが表示されることが日常化しています。　もちろん、サイト名とロゴがあっているタブもあるのですが、2割くらいは異なるロゴの表示になっています。　解決方法を教えてください。
- ベストアンサー
- その他(Windows)
プロっぽいWEBデザイン
私はHTML・CSSを勉強しています。しかし素人っぽい地味なサイトになってしまいます。 (10年前の素人がHTMLを学んで作ったような) このようなサイト→http://dougaset.com/sample/xhtml/samplesite/webpage/about.html そうではなくて、商業色を全面に押し出した、ITベンチャー企業が作りそうな、キャッチーで大衆受けする小綺麗なサイト作りたいです。このようなサイト→http://pr.cgiboy.com/　　※左記はWEBデザインについての例です。動的プログラムには言及していません。例えば上記サイトで言うなら、虫眼鏡、星マーク、ハートの画像、光沢のあるボタン、ロゴ、可愛いキャラクター等です。いくらHTML・CSSを学んだところで、これらは作れませんよね。既にadobe系のソフトは買ってしまいました。それらを勉強するための書籍を教えてください(amazonのURLでお願い致します) 素材が必要ならば、 WEBデザインの下請け会社が提携している素材・モデル屋を教えてください。 ※外注という方向は無しでお願い致します。
- ベストアンサー
- HTML
Webサイト製作で他のサイトに「リンク」するのと「組み込む」の違いは何ですか？
無料でウェブショップを開くサービスのサイトで、商品をページに配置したり、カート機能などを設定した後、つぎのような表示がありました。『Webショップの設置について』既に(利用者が)作成されているＨＰにこのショッピングサイトを組み込む場合、下記のコードをＨＰに組み込んでください。』そして、その次の行には、利用者であるわたしのIDを含んだHTMLの文字列が記されていました。 (1) 「リンク」と同じようなものだとは推測できますが、「組み込む」とは、どういうものなのでしょうか？ HPビルダーの本の目次や索引でさがしましたが、そのような言葉はありません。 (2) リンクにしないで、組み込む、の利点などありましたら教えてください。 (3) HTMLでないと出来ないのでしょうか？　HPビルダーなどのソフトの新しいバージョンには機能がついているのでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
HTMLでのWebサイト作成について
現在、HTMLWebサイトを作成しています。そこで質問があります。例えば、<LI class="gnav01"><A href="http://www.○○○/">テスト</A></LI>というリンクを作ったのですが、実際にWebサイトを見ると、文字が見えずリンクがあるであろう場所にカーソルを持って行くと画面の左下に<http://www.○○○/>というアドレスが出ます。文字を見えるようにするにはどうすれば良いでしょうか？
- ベストアンサー
- ホームページ作成ソフト
Webサイトのデザインは手打ち派？テンプレート派？
Webサイトのデザインって皆さんどうしているのでしょうか？・全て手打ちで作っていますか？・CSSテンプレートなどを他のサイトからダウンロードして、一部をカスタマイズして作っていますか？どちらのパターンでしょうか？　私の場合、HTMLもCSSも全て手打ち。絵心もないのにロゴマーク画像もGIMPなどで自作してしまったので、大失敗してしまいました。個人Webサイトの運営者様で、自分はこうしているというご意見を訊かせてください。参考にしたいのです。
- ベストアンサー
- CSS
htmlとフォトショップのフォントについて
初めてwebサイトを作成しているのですが、テキストの表示はCSSでsans-serifを指定しております。そしてフォトショップで画像を作成しているのですが、一部だけ文字も作っています。そのフォトショップでの文字は、CSSで指定したsans-serifと同じように、sans-serifを指定したかったのですが、ありませんでした。そのため、フォトショップの文字にはMSPゴシックを指定したら、CSSで指定したsans-serifに近くなりましたが、やはり若干違います。他のWebサイトを見ると、CSSで指定した文字と画像の文字が、ほとんど同じようなケースがあります。私のような問題がある場合、どのようなフォントを指定すればCSSとフォトショップの文字は同じようになるのでしょうか？宜しくお願い致します。
- ベストアンサー
- CSS
イラストレーターで印刷物を作成する時レイヤーの分け方がわかりません。
イラストレーターで印刷物を作成する時レイヤーの分け方がわかりません。クラブイベントのフライヤーを作るのを頼まれました。イラストレーターは、いくつものレイヤーにいくつも写真やロゴなどのオブジェクトをリンクで配置してますが、下記のようにそれぞれ分けていますがあっていますか？ 1背景(写真)、2イベントの名前のロゴ、3出演者等の写真、4出演者の名前の文字、5場所や時間やチケットの金額などの文字、です。そして入稿する際に最後はレイヤーを統合しなくてもいいんですか？？私はフォトショップは使うのですが、イラストレーターは簡単なイラストを描いたことがあるくらいで全く初心者です。背景、出演者の写真は、写真素材を使用しているのでフォトショップで加工した後でイラストレータに貼り付けています。大きさはA6で小さいし、出来れば文字もロゴもすべて使い慣れたフォトショップで作りたいのですが、イラストレーターで作成するメリットを教えてください。
- 締切済み
- グラフィックソフト
ＨＰ製作中です　幾つか解からないとことが有り困っています
yahooのジオシティーズで今ＨＰ製作中です出来ないところが幾つか有り、質問させて頂きますまず　リンクする文字にカーソルを合わせると、（色　反転）　するようにしたいのですが出来ませんいろいろ調べたのですが、解かりませんそれと、レイヤーを重ねて作った　文字（題名）を１つのロゴにしたいのですがどうするのか解かりませんメモ帳では出来るのできるのですが・・・・？解かりませんＨＴＭＬが違うのでしょうかヨロシクお願いします
- 締切済み
- その他([技術者向] コンピューター)
ＷＥＢで反映されません、お願いします！
ホームページのトップページをindex.htmlと保存して、ファイル名も英数小文字入力し、マイドキュメントに保存してあります。サーバーのファイルマネージャーから参照ボタンでindexを選んでアップロードする事はできるんんですが、WEB上では反映されません。 Goliveを使いHTMLテキストを作成してます、Goliveの新規ページに直接入力した文字はトップページで反映されましたが、その周りの色の付いてる見出しや、またフォトショップで作ったロゴなども消えてしまいます。
- 締切済み
- その他（インターネット・Webサービス）