『ボヘミアン・ラプソディ』はなぜ人々を魅了したのか >>

お世話になります。
Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様をCSSで作りたいと思っています。添付ファイルのように、ボタン画像の下にまたメニュー項目(background-imageがついてくる)が展開していくよくある仕様です。
ネットでの情報を参考にしながら、書いたソースが以下のものですが、
問題は(1)ダウンメニューにしたいのにむしろ上部へ表示される
(2)テキスト分しか表示されない、きちんと画像全体を表示させたい!

個人的にもいろいろ試行錯誤してみましたが、どうも分かりませんでした。
もしかしたら、ものすごく基本的なところでつまずいているかもしれませんが、どうかご容赦ください。
もしよろしければアドバイスお願いします。

HTML---

<div id="global_nav">
<ul>
<li><a href="#"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_07.gif" alt="Aボタン" class="btn"/></a>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">営業所</a></li>
</ul>
</li>
<li><a href="#"><img src="images/button_08.gif" alt="Bボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Cボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Dボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_08.gif" alt="Eボタン" class="btn"/></a></li>
</ul>
</div>

CSS---

#global_nav {
float:right;
width:720px;
margin:0;
padding-right:15px;
}
#global_nav img {
float:left;
display:block;
border:0;
}
#global_nav ul {
list-style:none;
margin:0;
padding:0;
}
#global_nav li {
min-width:120px;
white-space:nowrap;
float:left;
}
#global_nav ul ul {
display:none;
position:absolute;
z-index:10;
padding-top:2px;
}
#global_nav ul ul a {
font-family:"MS Pゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
font-size:0.75em;
color:#FFF;
background-image:url(../images/dawnmenu_button.gif);
height:40px;
width:120px;
text-decoration:none;
text-align:center;
padding:20px 10px 0 10px;
}
#global_nav li li {
clear:left;
position:relative;
width:100%
}
#global_nav ul li:hover > ul {
display:block;
}

「ドロップダウンメニューを作るこのCSSど」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (4件)

>ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。



 :hoverしているのは、どの要素でしょう。そしてプルダウンメニュー上に:hoverしているときは、その要素の上にありますか?

>これはclearする必要はないのでしょうか?

 なんのために?ここで、次に続く要素(回り込む要素)はどこにあるでしょう。

 HTMLの構造を簡単に頭に入れて、CSSだけを上から順番に何を選択しているか、セレクタの書き方を読み取ってください。大事なことは理解することです。特に詳細度の計算だけは身につけること。先の回答で示した参照先はよく読んでください。回り道のようですが、実際はもっとも早い方法です。(急がば回れ)
    • good
    • 0
この回答へのお礼

いつもありがとうございます。
>回り道のようですが、実際はもっとも早い方法です。
本当ですね、理解して記述するとしないのとでは応用力が全く違いますよね。基本的なところで足踏みしていますが、地道に勉強していきたいと思います。
ありがとうございました。

お礼日時:2012/01/12 02:06

 まあ、理屈さえ知っていれば簡単です。


position:absoluteは直近のstaticでない親コンテナブロックの位置を参照する。

 ネット上のサンプルを見るときは、必ず仕様書と照らし合わせて、なぜそうなるかを理解しないと応用は利きません。無駄に時間を浪費するだけです。
★いくつかの重要なポイント
・折角の【カスケーディング】スタイルシートです。【カスケーディング】はプロパティよりも重要です。
→6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
 カスケーディングを理解していれば無用なclass名やidを書かなくて済みます。

★HTMLはデザインにひこずられたらダメです。きちんと文書構造にしたがってマークアップしましょう。文書構造とプレゼンテーションを切り離すことがスタイルシートの最大の目的です。それが出来れば、後でデザインは自由に出来ます。
→2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 たとえば、サイト全体のナビゲーションは本文セクションに入るのはおかしいのでフッターに入れるべきですが、それでもサンプルのように希望通りデザインできます。
 floatでデザインすれば、必ず本文ないしヘッダ直前に入れなければなりませんね。

下記サンプルは、HTML4.01strictです。(HTML5に変更するときは、doctypeを書き換えて、<div class="header">を<header>、同様に<section><nav><footer>にdiv要素を書き換える。
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済み
★なお、_に戻してください。詳しい説明はソースに書かれていますが、わからないときは仕様書を、まず確認すること。
★ウィンド巾に関わらず中央に表示されます。i-hone,i-padには文字が小さくなりすぎるけど読めるはず・・

<!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;}
div.header,div.section,div.footer,div.footer div.nav{
_width:720px;margin:0 auto;
_border:solid 1px silver;
}
div.header{
_height:200px;/* ナビゲーションリンクの位置のため */
_margin-bottom:40px;/* ナビゲーションリンク用 */
_background-color:silver;/* サンプルのため */
}
div.section{
_background-color:fuchsia;/* サンプルのため */
_min-height:300px;
}
div.footer div.nav{
_position:absolute;top:200px;height:40px;/* 置き場所とサイズを指定する。 */
_font-family:"MS Pゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
_line-height:40px;/* 継承されるプロパティなので */
_text-align:center;
_background-color:black;/* サンプルのため */
}
div.footer ul,div.footer ul li{
_display:block;list-style:none;/* リストをブロックにする */
_margin:0;padding:0;
}
div.footer ul li{
_width:118px;float:left;
_position:relative;/* 子孫要素の基準点 */
}
div.footer ul li a{/* 子孫セレクタで下位のaにも適用、詳細度[0,0,1,4] */
_display:block;
_width:100%;height:100%;
_text-decoration:none;
_color:#FFF;
}
div.footer ul li ul{
_font-size:75%;
_position:absolute;top:40px;left:0;/* static以外の直近の親コンテナブロックを基準に */
_display:none; /* 消す */
}
div.footer ul li ul li{
_height:60px;width:140px;
_background-image:url(../images/dawnmenu_button.gif);
}
div.footer ul li:hover{/* 詳細度[0,0,2,3] */
_background-color:rgb(255,160,0);
}
div.footer ul li ul li:hover{/* 詳細度[0,0,2,5] */
_background-color:transparent;/* 前の設定を消す */
}
div.footer ul li ul li a{/* 必要なもののみ上書き。詳細度[0,0,1,6] */
_padding-top:20px;/* 画像の吹き出し部分 */
}
div.footer ul li:hover ul{
_display:block;
}
div.footer{
_background-color:yellow;/* サンプルのため */
}
div.footer div.nav ul li:hover ul li+li:before{ /* おまけ */
_white-space:pre;
_position:absolute;
_top:-50px;left:150px;
_padding:0.5em 1em;
_width:auto;text-align:left;
_border:dotted 1px gray;
_background-color:white;
_line-height:1.4em;
_content:"Aボタンにマウスオンすると\A下部にダウンメニューが出てくるようにしたい。\Aダウンメニューはテキストリンク、でもbackground-image\Aで表現したい。";
}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>サンプル</h1>
_</div>
_<div class="section">
__<h2>本文</h2>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<div class="nav"><!-- ナビゲーションはnav -->
____<ul>
______<li><a href="/">TOP</a></li>
______<li class="botanA"><a href="./profile">会社情報</a>
________<ul>
__________<li><a href="./profile/index.html">会社概要</a></li>
__________<li><a href="./profile/office.html">営業所</a></li>
________</ul>
______</li>
______<li><a href="./B">Bボタン</a></li>
______<li><a href="./C">Cボタン</a></li>
______<li><a href="./D">Dボタン</a></li>
______<li><a href="./E">Eボタン</a></li>
____</ul>
__</div>
_</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

詳しい回答本当にありがとうございます。
実際のサンプルもとても参考になりました、感謝します。
詳細に説明くださったのに、カスケーディングという概念がいまいちよく分からなくて、リンクページも読ませていただきましたが、正直なところ?でした。申し訳ないです。

それでも、一応ORUKA1951さんのソースを参考にさせてもらいながら、記述してみたのが、以下のソースです。

2点ほど疑問が出てきました。
(1)
ORUKA1951さんのソースでは、その他のボタンと同じくドロップダウンボタンの記述ありの親ボタン、そしてul li ul liの第二階層のボタンどちらにもカーソルオンしている状態の時にも親要素のボタンはロールオーバーしていましたが、私の記述の仕方に問題ありなのでしょう、親ボタンの領域にカーソルオンした時はOKでしたが、ドロップダウンボタン領域時には親ボタンはロールオーバー表示されませんでした。
これはどうしたら解決できるのでしょうか...

(2)
それと、#global_nav ul li のCSSでfloatしていますが、これはclearする必要はないのでしょうか?

もしよろしければ再度ご教授ください。

HTML---

<nav id="global_nav">
<ul>
<li><a href="index.html"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_07.gif" alt="店舗紹介ボタン" class="btn"/></a>
<ul>
<li><a href="#">Aページ</a></li>
<li><a href="#">Bページ</a></li>
<li><a href="#">Cページ</a></li>
</ul>
</li>
<li><a href="#"><img src="images/button_08.gif" alt="ご利用案内ボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_09.gif" alt="説明ボタン" class="btn"/></a></li>
<li><a href="blog.html"><img src="images/button_10.gif" alt="ブログボタン" class="btn"/></a></li>
<li><a href="#"><img src="images/button_11.gif" alt="お問い合わせボタン" class="btn"/></a></li>
</ul>
</nav>


CSS---

#global_nav {
width:720px;
margin:0;
padding-right:15px;
}
#global_nav img {
float:left;
border:0;
}
#global_nav ul, #global_nav ul li {
list-style:none;
display:block;
margin:0;
padding:0;
}
#global_nav ul li {
width:120px;
position:relative;
float:left;
}
#global_nav ul li a {
clear:both;
display:block;
width:100%;
height:100%;
}
#global_nav ul li ul {
display:none;
position:absolute; top:52px;left:0;
}
#global_nav ul li ul li a{
width:120px;
height:30px;
color:#FFFFFF;
font-size:0.75em;
font-family:"MS Pゴシック", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height:30px;
text-align:center;
background-image:url(../images/dawnmenu_button.gif);
text-decoration:none;
padding-top:0px;
}
#global_nav ul li ul li a:hover {
background-image:url(../images/dawnmenu_button02.gif);
}
#global_nav ul li:hover ul{
display:block;
}


それと、今回記述しているDOCTYPEはXHTML1.0 Traditionalです。

お礼日時:2012/01/08 23:01

(1)ダウンメニューにしたいのにむしろ上部へ表示される


この問題は再現されませんでした。他のcssの指定が継承されているものと思われます。試しに、ここに挙げたものだけで、独立したファイルを作り表示させてみてください。下に垂れると思います。


(2)テキスト分しか表示されない、きちんと画像全体を表示させたい!
#global_nav ul ul a {
に対する指定ですよね?a要素はインライン要素です。つまり、高さや幅を持てませんので、heightやwidthに対する指定は無視されます。インライン要素とブロックレベル要素の違いの把握は重要です。基礎を復習してください。

で、この「#global_nav ul ul a {」内に、display:block;を入れるとheight:40px;width:120px;の画像でしたら表示されるようになるでしょう。html的にはインライン要素だけど、表示はブロックライン要素として表示するという意味です。
    • good
    • 0
この回答へのお礼

回答ありがとうございます!
display:blockこれか!
非常に基礎的なことだと思いますが、いまいちこの要素の役割がよく分からなくて...でも今回の説明で復習することができました。
ありがとうございます!!

お礼日時:2012/01/08 23:02

HTMLちゃんと書かなきゃ・・


<div class="nav"><!-- ナビゲーションはnav -->
  <ul>
    <li><a href="/">TOP</a></li>
    <li><a href="./profile">会社情報</a>
      <ul>
        <li><a href="./profile/index.html">会社概要</a></li>
        <li><a href="./profile/office.html">営業所</a></li>
      </ul>
    </li>
    <li><a href="./B">Bボタン</a></li>
    <li><a href="./C">Cボタン</a></li>
    <li><a href="./D">Dボタン></a></li>
    <li><a href="./E">Eボタン</a></li>
  </ul>
</div>
もちろん、画像でもよいが・・・
class名をnavにしたのは、HTML5では
<nav id="global_nav"><!-- ナビゲーションはnav -->
  <ul>
    <li><a href="/">TOP</a></li>
    <li><a href="./profile">会社情報</a>
      <ul>
        <li><a href="./profile/index.html">会社概要</a></li>
        <li><a href="./profile/office.html">営業所</a></li>
      </ul>
    </li>
    <li><a href="./B">Bボタン</a></li>
    <li><a href="./C">Cボタン</a></li>
    <li><a href="./D">Dボタン></a></li>
    <li><a href="./E">Eボタン</a></li>
  </ul>
</nav>
と書かなければならないからです。

 あとはスタイルシートを書くだけ。シンプルでしかも、どのようにでもデザインできます。デザインのためにHTMLを書くとHTMLもスタイルシートも複雑になる。そしてデザインを変えるときHTMLまで書き直さなきゃならなくなる。それじゃスタイルシートを導入する意味がない。

 今晩は遅いので寝る。明日の夜にでも続きを
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSプルダウンメニューとjQueryの重なりについて

CSSプルダウンメニューとjQueryの重なりについて

下記サイト
http://www.karuizawanet.com/cgi-bin/database/database.cgi?cmd=s&sc=hotel

にてCSSプルダウンメニューと

Simple jQuery Spy Effect(要素の自動スクロール)
http://f32.aaa.livedoor.jp/~azusa/index.php?t=ajax&p=jquery_plugin_scroll

を設置していますが、

CSSプルダウンメニューが
要素の自動スクロールの下に隠れてしまい
困っています。

CSSのz-indexを入れてみましたが、改善されません。

どなたかお力添えをお願いいたします。

Aベストアンサー

cssでul.menu ulを下記の通り書き換え。

position:relative;

position:absolute;

以下追加。
z-index:2;

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qjquery ドロップダウンメニューの挙動不審を治す方法

http://makasete-web.net/dropdown-menu

こちらのサイトを元にドロップダウンメニューを作ってみたのですが、
すぐに引っ込んでしまったり、うまく選べません。
jqueryは借りてくるだけなので、内容はわかってないです;
大元のドロップダウンメニューは安定しているようですが、
どこを治せば安定してボタンを選べるようになるでしょうか(´・ω・`)?

ちょっと、長くなっちゃうのですが、こんな感じのメニューで
上段の中2つがドロップダウンします。
よろしくお願い致しますm(==)m


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tesuto</title>
<style type="text/css">
a:link {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
* {
margin: 0px;
padding: 0px;
}
body {
line-height: 180%;
}
header {
text-align: center;
}

nav {
width: 930px;
margin-top: 20px;
}
ul{
list-style-type: none;
padding: 0;
color: #fff;
margin: 0;
}
ul#menu li{
display: block;
padding: 0px;
float: left;
position: relative;
height: 27px;
width: 150px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
color: #FFF;
text-align: center;
background-color: #933;
}
ul#menu li a {
display: block;
color: #FFF;
}
ul.child{
display: none;
position: absolute;
padding: 0;
opacity: 0.9;
background-color: #CCC;
font-size: 14px;
width: 150px;
}
ul.child li a{
display: block;
color: #fff;
}
li a:hover {
background-color: #FFBB00;
color: #FFF;
}
ul#menu2 li {
float: left;
width: 155px;
background-color: #666666;
display: block;
margin-right: 5px;
text-align: center;
height: 26px;
color: #FFF;
}
ul#menu2 li a {
color: #FFF;
display: block;
}
#titlle {
margin-top: 100px;
width: 700px;
}
#navmenu {
width: auto;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#cl2 {
height: 100px;
width: 100%;
float: left;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 3px;
background-color: #FFC;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});
</script>
</head>
<body>
<nav>
<ul id="menu">
<li><a href="#">ご案内</a></li>
<li>ご案内
<ul class="child">
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
</ul>
</li>
<li>ご案内
<ul class="child">
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
<li><a href="#">ご案内</a></li>
</ul>
</li>
<li class="menu"><a href="#">ご案内</a></li>
</ul>
</nav>
<div id="titlle">
<div id="cl2"></div>
<div id="navmenu">
<ul id="menu2">
<li><a href="#a">ご挨拶</a></li>
<li><a href="#i">ご挨拶</a></li>
<li><a href="#u">ご挨拶</a></li>
<li><a href="#e">ご挨拶</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</body>
</html>

http://makasete-web.net/dropdown-menu

こちらのサイトを元にドロップダウンメニューを作ってみたのですが、
すぐに引っ込んでしまったり、うまく選べません。
jqueryは借りてくるだけなので、内容はわかってないです;
大元のドロップダウンメニューは安定しているようですが、
どこを治せば安定してボタンを選べるようになるでしょうか(´・ω・`)?

ちょっと、長くなっちゃうのですが、こんな感じのメニューで
上段の中2つがドロップダウンします。
よろしくお願い致しますm(==)m


<!doc...続きを読む

Aベストアンサー

スクリプトそのものは単純で、指定のLI要素に対してマウスエンターでスライドダウン、マウスリーブでスライドアップという内容になっています。


>すぐに引っ込んでしまったり、うまく選べません。

ご提示のソースを表示してみると、親メニューと子メニューの間に隙間ができていますので、そこをマウスが通るとマウスリーブとなって、メニューが閉じるという事象が発生します。
マウスを素早く動かすと、うまくいけば子要素のLIへのマウスエンターが間に合って、表示されたままとなります。
ご質問の「安定しない」とはこれではないかと推測しました。

スクリプトを修正して対応することも不可能ではないでしょうが、レイアウトの方法を修正する方が遥かに簡単そうです。
(スクリプトの修正で対応するにしても、レイアウトの方法を変えた方がやりやすそうに思います)


要は、隙間部分をなくすか、隙間を設けるにしてもその部分をLI要素の一部として評価されるようなレイアウトになさればよろしいのではないでしょうか。
一番簡単なのは、
 ul.child{ top:27px; }
みたいに、位置を明示的に指定することで隙間をなくしてしまえば、とりあえずはご期待の動作になるのではないかと推測します。

スクリプトそのものは単純で、指定のLI要素に対してマウスエンターでスライドダウン、マウスリーブでスライドアップという内容になっています。


>すぐに引っ込んでしまったり、うまく選べません。

ご提示のソースを表示してみると、親メニューと子メニューの間に隙間ができていますので、そこをマウスが通るとマウスリーブとなって、メニューが閉じるという事象が発生します。
マウスを素早く動かすと、うまくいけば子要素のLIへのマウスエンターが間に合って、表示されたままとなります。
ご質問の「...続きを読む

Qプルダウンメニューが隠れてしまいます

indexページにFlashで制作したswf形式のムービーを配置しました。
ところが
ヘッダに配置してたメニューからJavaScriptでプルダウン表示されるメニューと
ムービーが重なる部分がレイヤーのような状態となり
プルダウンメニューがムービーの背面へ隠れてしまい
メニューの機能が失われてしまいました

・swfはhtmlに直接配置して表示
・プルダウンのメニューは外部に置いたjsファイルを読み込んで表示
・メニューも外部JavaScriptからの読み込み

以上の仕様なのですが問題点はswfの配置方法でしょうか?
それともJavaScriptのレイヤーに問題があるのでしょうか?

アドバイスをお願い致します

Aベストアンサー

問題点は,ブラウザの仕様です。
また Flash だけで起こる問題でもありません。
enbed や object で貼り付けるたぐいの動画などもそうなります。
そういうたぐいのものの上には何も表示できません。

OS が Windows で, ブラウザも IE と他少々に限定すれば,
SWF を貼り付けるタグを,
背景透明 か 背景不透明 にすると,
プルダウンメニューは隠れずに表示されます。
wmode="transparent"
とか
wmode="opaque"
とかです。

しかし,Mac 環境や,Win+Firefox などでは,
そもそもそのタグ自体を受けつけないので,
その方法も使えません。

この件に関しましては私も何度も回答していて,
どれが良いかわからなくなっていまいましたが,
とりあえず次のURLのものでも参考にしてみてください。

「swfファイルとHTMLを重ねる」
http://oshiete1.goo.ne.jp/qa1620013.html
  ↑教えて!goo  ↓OKWave (同じです)
http://okwave.jp/qa1620013.html



Adobe のサイトも一時期 SWF の上にプルダウンが重なるようになっていましたが,
そのときはブラウザによって出すページを振り分けていましたよ。
Win+IE なら Flash + JavaScriptのプルダウンのページを表示
Mac なら JPEG + JavaScriptのプルダウンのページを表示
のように。

面倒なので,
最初から Flash の上にプルダウンメニューを作らない人の方が多いと思います。

問題点は,ブラウザの仕様です。
また Flash だけで起こる問題でもありません。
enbed や object で貼り付けるたぐいの動画などもそうなります。
そういうたぐいのものの上には何も表示できません。

OS が Windows で, ブラウザも IE と他少々に限定すれば,
SWF を貼り付けるタグを,
背景透明 か 背景不透明 にすると,
プルダウンメニューは隠れずに表示されます。
wmode="transparent"
とか
wmode="opaque"
とかです。

しかし,Mac 環境や,Win+Firefox などでは,
そもそもそのタグ自体を...続きを読む

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

Q「いずれか」と「いづれか」どっちが正しい!?

教えて下さいっ!
”どちらか”と言う意味の「いずれか」のかな表記として
「いずれか」と「いづれか」のどちらが正しいのでしょう???

私は「いずれか」だと思うんですが、辞書に「いずれか・いづ--。」と書いてあり、???になってしまいました。
どちらでもいいってことでしょうか?

Aベストアンサー

「いずれか」が正しいです.
「いづれ」は「いずれ」の歴史的かな遣いですので,昔は「いづれ」が使われていましたが,現代では「いずれ」で統一することになっていますので,「いずれ」が正しいです.

Qプルダウンメニュー表示時の高さの指定方法

ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ(タテ幅)の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか?

ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:(幅を指定);"」を記述することで固定幅の設定が可能でしたが・・・

なお、プルダウンメニューは初期表示として、1件のみ表示させるものとします(すなわち、<select>タグ内の「size="1"」の指定は変えないこととする)。

というのも、プルダウンに表示させる項目(条件によって可変)の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。
よって、方法としては、
1.プルダウン表示させる際の高さ(タテ幅)を固定で指定する
2.可能であれば、登録されている全項目の表示をさせる
以上2つの方法を考えています。

なにかよい方法があれば、ぜひ教えてください。

Aベストアンサー

ご存知のように<select>タグの属性で縦幅を設定することはできませんね。

http://tohoho.wakusei.ne.jp/html/select.htm

スタイルでも設定はできないようですね。

異なるOSで同じブラウザで同じページの<select>タグ内を
表示しても縦幅が異なりますので
OSに依存されてしまうのでしょうか?
また、画面の解像度によるかもしれません。

Q拡張子 epsの開き方、どなたか教えて下さい!

拡張子EPSの開き方をどなたか教えていただけませんか? 開こうとすると、WEBサービスを使用して適切なプログラムを探す、もしくは一覧からプログラムを選択する、という項目がでますが、どうすればよいかわかりません。

全くの初心者なので、わかりやすく記載して頂ければすごく助かります。
宜しくお願い致します。

Aベストアンサー

少し本道から外れた回答を。私は会社でIllustratorでロゴ等のデザインをして(epsで保存)、それをWordやExcelに貼ったりして使うことが良くあります。

ファイルがロゴ等の小さいものであればWord,Excelで中身を見ることは可能です。
(やり方)
1.Word,Excelのツールバー「挿入」→「図」→「ファイルから」・・・と進み、ファイルを指定、「OK」

これでIllustratorで作ったロゴがWord,Excelに取り込むことが出来ます。もともとWord、ExcelはEPSを読める仕様になっていますのでとても便利です。

(注意)
気をつけて欲しいのがフォントが入っているファイルはどうも読めないようです。(今までの経験から)

フォントをIllustrator上でアウトライン化してフォントの属性を無くしてしまえば読み込み可能なんですが、フォントそのままが入っているとエラーが表示されます。

そのEPSファイルって何が書いてあるんでしょうか?文章がたくさん入っている内容でしたら本件のやり方では不可です。ロゴやデザインなどだったらきっとOKのはずです。

だめもとでやってみてはいかがでしょうか?

少し本道から外れた回答を。私は会社でIllustratorでロゴ等のデザインをして(epsで保存)、それをWordやExcelに貼ったりして使うことが良くあります。

ファイルがロゴ等の小さいものであればWord,Excelで中身を見ることは可能です。
(やり方)
1.Word,Excelのツールバー「挿入」→「図」→「ファイルから」・・・と進み、ファイルを指定、「OK」

これでIllustratorで作ったロゴがWord,Excelに取り込むことが出来ます。もともとWord、ExcelはEPSを読める仕様になっていますのでとても便利です。

(注...続きを読む

Q画面サイズ変更時のレイアウトの崩れ

サイトをHTML+CSSで作成しているんですが
ブラウザのサイズが最大化のときは平気なのですがサイズを変更する(縮める)とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。
これを直す方法はあるでしょうか?

背景は1024×50の画像をy軸でリピートさせています。
レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。
最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

Aベストアンサー

スクロールバーが表示されないのが問題なのでしょうか?
テンプレートを使っている場合は、デフォルトで表示されないようにしてあったりする場合があると思います。

overflow-x:hidden;
overflow-y:hidden;
などがないか確認してみるといいと思います。

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい


人気Q&Aランキング