- ベストアンサー
yahooニュースの様な見出し？メニュー？制作方法
http://headlines.yahoo.co.jp/hl?c=c_int&t=l&p=1 このページの中段左にある 1000円ギフト券プレゼント や ≪グルーポン≫限定割引クーポン のようなメニューはどうやって作るのでしょうか？ 始めは背景画像の上にテキストを入れてpositionで指定しているのかと思ったのですが、htmlにも見当たりません。 どういう風に作っているのでしょうか？ 簡単な説明でいいので教えてください。 よろしくお願いします。
- rossi46mail
- お礼率96% (251/259)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 これは、ＣＳＳ（スタイルシート）で指定しているみたいですね。 もし質問者さんが Ｉｎｔｅｎｎｅｔ Ｅｘｐｌｏｒｅｒ をお使いなら メニューの「表示」から「ソース」をクリックしてみてください。 すると、（≪グルーポン≫の例でいえば）６行目あたりに 「～/jb/css/subscriptions/lp0004.css」という記述があるでしょう。 この「lp0004.css」の中に、画面の色や配置などに関する情報が 通常は入っています。 ＣＳＳの詳細については、専門書やネットで検索してみてください。
関連するQ&A
- 共同購入について質問です。
クーポンや割引券などの共同購入が流行ってますが どの会社が一番おすすめですか？ ポンパレやグルーポン、その他にも同じようなサイトがあるようなんですが、 違いがよくわかりません。
- 締切済み
- その他（生活・暮らし）
- 【OKチップ】OKチップを貯めているのですが使い道
【OKチップ】OKチップを貯めているのですが使い道が無くないですか？ なにか期限切れのAmazonギフト券に過去には換えられたようなニュアンスを残しつつ、寄付とか割引クーポンの発行とかしかありません。 Amazonギフト券とかお金に換えられないのですか？ これは現金化は無理な子ども銀行券みたいなものですか？
- ベストアンサー
- アンケート
- jqueryでのプルダウンメニューについて
jqueryでのプルダウンメニューについて こんにちは。 現在私はWEBサイトを製作中です。 メインメニューにプルダウンをつけたいのですが、うまくいきません。 メニューはロールオーバーでの表示（CSSでやってます）です。 slideDownを使用しているのですが、 マウスオーバー時にslidDownで表示された、 サブメニューの背景が、上の要素の背景になってしまいます。 つまり、下のコードでいくとid="sub"の背景がそのまま clas="sub"の"li"要素の背景になってしまうということです。 何か対策はありますでしょうか？ html <div id="head"> <ul id="globalnavi"> <li id="gh"><a href=".">メニュー</a> <ul class="sub"> <li><a href="">サブメニュー</a></li> </ul> </li> </ul> </div> <div id="main"> </div> jquery $(function(){ $("ul.sub").hide(); $("ul#globalnavi>li").hover(function(){ $("ul:not(:animated)", this).slideDown();}, function(){$("ul.sub",this).slideUp();}); }); CSS #globalnavi a{ background-image : url(../img/navi.png); background-repeat : no-repeat; display : block; width : 160px; height : 36px; color : #333333; text-decoration : none; line-height : 36px; } #header #globalnavi li { list-style-type : none; float : left; width : 160px; position : relativ; } #header #globalnavi { clear : both; width : 960px; line-height : 36px; overflow : hidden; position : relative; text-align : center; display : block; } ul,li{ margin:0; padding:0; } .sub li{ float : none; background-color : #FFF; } #gh a{ background-position :0 0; } #gh a:hover{ background-position :0 -36px; } ロールオーバー自体はうまくいっています。 他にプルダウンの方法あるよ、などありましたら教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- アマゾンメール受信者限定キャンペーン登録
下記リンクのようなアマゾン5000円ギフト券購入で500円クーポン メール受信者限定キャンペーンの対象になるメールを受信するには どうしたらいいですか？ http://www.amazon.co.jp/b?node=3364537051 http://www.amazon.co.jp/b?node=3257490051 宜しくお願いします。
- 締切済み
- ネット通販
- 角丸を使ったメニューリスト
http://c-brains.jp/blog/wsg/ ばしゃろぐさんの右カラム「人気エントリー」の所のようなデザイン、 上下が角丸で一番上の「人気エントリー」にあたるタイトル部分は 背景ブルー、メニュー中味部分は背景グレー、 同じようにテキストリンク、メニューの個々はborderで区切り （ロールオーバーはしなくてもOK） というようなデザインを実現するにはどうしたらいいでしょうか？ メニュー中味部分はulとliで、ulにborder-left、rightをあてて、 liにborder-bottomをあてて、上下の角丸部分は背景画像でしょうか？ ie6にも対応できるやり方を教えてください！ 宜しくお願いします！
- 締切済み
- HTML
- ＣＳＳ：liで作成したメニューの一つだけ背景画像を変えたい
こんにちは。ページのメニューバーを<li>で作成していますが、 リンクがある<li>と、ない<li>で背景画像を変えたいのですが、<a:hover>の際の画像も別にしようと、背景画像を<a>で指定しまったため、どうしようかな、と行き詰りました。 ・【横並び】 ・【リンクあるなし別のボタン背景画像】 ・【hover時も背景画像チェンジ】 の３点をかなえるには、どのような記述がすっきりするでしょうか。ご意見。ご指摘・叱咤、お聞かせくださいませ。 ちなみに、作っておいて、へばった記述例が、以下です。 例）横並びのメニューボタン（メニュー１、２、３） ・メニュー１（閲覧しているページへのリンクボタンなので、リンクなし）→背景Ａ[../images/A.gif]、 ・メニュー２（他ページへのリンクボタン）→背景Ｂ[../images/B.gif]、hover時は背景Ｃ[../images/C.gif] ・メニュー３（メニュー２と同様） ----------------- ul#menu{ font-size: 12px; list-style-type:none; width:800; } ul#menu::after { visibility: hidden; clear: both; } ul#menu li{ float: left; width: 120px; list-style-type: none; display: inline; } ul#menu a{ color: #333; text-decoration: none; display: block; background-image: url(../images/B.gif); background-repeat: no-repeat; } ul#menu a:hover{ color: purple; text-decoration: underline; display: block; background-image: url(../images/C.gif); background-repeat: no-repeat; } -------------------
- ベストアンサー
- CSS
- 画像が印刷されません。
ネット上の画像や絵などを印刷しようとするのですが、テキスト部分だけが印刷されます。 たとえば割引クーポン券の印刷したいのですが「このページをプリントアウトしてください」という説明書きと切り取り線だけが印刷されますが、中のロゴというか肝心の絵の部分がすっぽりと抜けてしまいます。 どのような設定をすべきでしょうか？
- 締切済み
- プリンター・スキャナー
- CSSのプルダウンメニュー
menu1とmenu2の挙動について疑問があります。 添付画像をご覧ください。 menu2からsub4-1を選択している状態です。 この時、menu2の背景色が赤に戻らないのは仕様でしょうか？ それとも何か間違っているのでしょうか？ 背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。
- 締切済み
- CSS
- サブメニュー表示方法
以下のサイトのようなナビゲーションを作っています。 http://www.skuare.net/test/jHsubnav.html マウスオーバーでサブメニューが出るのではなく 最初からHOMEの サブメニューを表示しておくには、どのようにしたらよいでしょうか。 初心者で、わからず困っています。 よろしくお願い致します。 ------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> ul#topnav { margin: 0; padding: 0; list-style: none; position: relative; font-size: 1.2em; background: #000; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; } ul#topnav li a { padding: 10px 15px; display: block; color: #000; text-decoration: none; } ul#topnav li:hover { background: #1376c9; } ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; background: #1376c9; color: #fff; } ul#topnav li:hover span { display: block; } ul#topnav li span a { display: inline; } ul#topnav li span a:hover {text-decoration: underline;} </style> <script type="text/javascript" src="http://alphasis.info/library/javascript/jquery/jquery-1.4.2.js"></script> <title>無題ドキュメント</title> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("ul#topnav li").hover(function() { //メインメニュー（#topnavi li）にマウスが乗った時 $(this).css({ 'background' : '#1376c9'}); //その要素の背景色を変える $(this).find("span").show(); //サブメニューを表示 } , function() { $(this).css({ 'background' : 'none'}); //背景色を戻す $(this).find("span").hide(); //サブメニュー隠す }); }); </script> <ul id="topnav"> <li><a href="#">Home</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> </ul> </body> </html>
- ベストアンサー
- JavaScript
- 格安の乗車券＋指定席の入手法を教えてください。
格安の乗車券＋指定席の入手法を教えてください。 長野新幹線で東京から信州へ行くことになりました。 今のところ６枚クーポンというのを見つけましたが、 ３ヶ月間という限定で６枚あっても使い切れません。 週末割引切符というようなものも見つけましたが、 ２泊になるとために適応しないことが分かりました。 えきネットのトクだ値が一番安そうですが、 もっと格安な切符が手に入りそうでしたら教えてください。 あまり怪しいルートのものは、ちょっとひけてしまいます。
- ベストアンサー
- その他([地域情報] 旅行・レジャー)
お礼
お返事ありがとうございます。 やはりCSSですか。 「1000円ギフト券プレゼント」 の文章がテキストなのにhtmlに記載されていないことが不思議に思いました。 CSSはhtmlを装飾するための外部ファイルなのに、画像を使わずにどの様な方法でCSSでテキストをうったのか調べてみます。 それともどこか見落としてるのかな？ lp0004.cssをもう少し勉強してみます。 ありがとうございました。