ドロップダウンメニューやスライドショーの配置について

分類:[その他]

2015/02/03(Tue) 11:15:54 編集(投稿者)
2015/02/03(Tue) 10:31:10 編集(投稿者)

こんにちは。

いつか自身でHPを作成できるようにと、先日からhtml/cssをかじり出した者です。

開発環境は【MAC OS X 10.7.5】【safari】で行っています。


現在、再下記記述のコードにてページ作成をしていますが、以下の点がわからずにいます。

１．ドロップメニューが左右センター寄せできない。

（http://makasete-web.net/dropdown-menu） 『誰でも出来る！jQueryでドロップダウンメニューをわずか7行で完成させる方法』
上記のサイトを参考に、下記のコードを記述したのですが、メニューバーがどうしても左寄りのまま動きません。
試みとして以下を行いましたが配置は左寄りのまま変わらずでした。
・html内のメニューバー設置用の(div id="topmenu")にalignでcenterをかける。
(スライドショーには効いたのに。。それも見当違い？)
・css内の#topmenuにmargin-leftとrightにautoをかける。


２．スライドショーが上下センター寄せできない。

（http://makasete-web.net/bxslider）『超簡単！jQueryスライドショーを10分で実装する方法』
上記のサイトを参考に下記のコードを記述、スライダー自体は機能しているのですが、div(topimage)内で上下の中央揃えにすることが出来ません。
試みとして以下を行いましたが配置は上寄りのまま変わらずでした。
・http://blog.3streamer.net/html5-css3/css-box-be-centerd-483/『CSSでボックスを上下左右中央に配置する第３の方法』を参考にしながら、
ネガティブマージンを用いる方法（→cssに.bxsliderの項目を作って記述しましたがブラウザで開くと画像が飛んでしまいました。しかも中央揃いにならず。。）
その他の方法は、beforeノ概念がよくわからずどこをいじればいいのか分かりませんでした。（そもそもpタグや画像を対象に記事は書かれてるけど、bxsliderって何になるんだろう。。html上ではulだからul？その場合どうなるんだ。。という情けない限りで。）


３．ドロップダウンメニューを半透明にしたい。

厳密にはドロップダウンしてくるサブメニューを半透明にしたいと考えています。
(http://black-flag.net/css/20110513-3045.html)『CSSで透明度／透過度（opacity）の指定をする方法 』を参考にしながら、
『opacity: 任意;』やwinにて『filter:alpha(opacity=任意);』などを試してみたのですが、変化しませんでした。サブメニューということでcssのul.childに記述したのですが、それが間違っているのでしょうか…。


色々なサイトや参考書を見ながら進めているため、皆様方にとりまして非常にお粗末な質問になっていれば大変申し訳ないのですが、どうかご助言頂きたく思います。


※タグが使えないのでタグは()で記載しています
---【HTML】----------------------------------------------------------------

(!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd")
(html lang="ja")
(head)
(meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS")
(meta http-equiv="Content-Language" content="ja")
(meta http-equiv="Content-Style-Type" content="text/css")
(link rel="stylesheet" type="text/css" href="css/style.css")

(title)タイトル(/title)


(script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script)
(script src="js/jquery.bxslider.min.js")(/script)
(link href="css/jquery.bxslider.css" rel="stylesheet" /)

(script type="text/javascript")
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
controls: true,
speed: 900,
pause: 5000,
slideWidth : 800,
});
});


$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});
(/script)
(/head)

(body)
(div id="header")
(p align="center">ホームページ(/p)
(/div)

(div align="center" id="topmenu")
(ul id="menu")
(li)メニュー1(/li)
(li)メニュー2
(ul class="child")
(li)(a href="#")サブメニュー1(/a)(/li)
(li)(a href="#")サブメニュー2(/a)(/li)
(/ul)
(/li)
(li)メニュー3
(ul class="child")
(li)(a href="#")サブメニュー1(/a)(/li)
(li)(a href="#")サブメニュー2(/a)(/li)
(/ul)
(/li)
(li class="menu")メニュー4
(ul class="child")
(li)(a href="#")サブメニュー1(/a)(/li)
(li)(a href="#")サブメニュー2(/a)(/li)
(li)(a href="#")サブメニュー3(/a)(/li)
(/ul)
(/li)
(/ul)
(/div)

(div align="center" id="topimage")
(ul class="bxslider")
(li)(img src="images/example-slide-1.jpg" /)(/li)
(li)(img src="images/example-slide-2.jpg" /)(/li)
(li)(img src="images/example-slide-3.jpg" /)(/li)
(li)(img src="images/example-slide-4.jpg" /)(/li)
(/ul)
(/div)

(div id="main")
(/div)

(div id="footer")
(a href="sitemap.html")サイトマップ(/a)　(a href="privacy.html")プライバシーポリシー(/a)　(a href="about.html")当サイトについて(/a)　(a href="company.html")会社概要(/a)(br /)
&copy;サンプル All Rights Reserved.
(/div)
(/body)
(/html)

---【CSS（style.css）】----------------------------------------------------

html,body {
height: 100%;
font: normal normal 14px/1.6 Lucida Grande,Hiragino Kaku Gothic ProN,Meiryo, sans-serif;
margin: 0px;
padding: 0px;
}

#header {
width: 980px;
height: 50px;
font-size: 30px;
margin-left: auto;
margin-right: auto;
}

#topmenu{
width: 100%;
height: 50px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
}


ul{
list-style-type: none;
z-index: 9999;
margin: 0;
padding: 0;
color: #fff;
}
ul#menu li{
float: left;
position: relative;
margin: 0;
padding: 5px;
width: 200px;
background-color: #555555;
display: block;
}
ul.child{
display: none;
position: absolute;
margin-left: -5px;
padding: 0;
}
ul.child li a{
padding: 5px 10px;
margin-left: -5px;
margin-right: -5px;
margin-bottom: -5px;
display: block;
color: #fff;
}
li a:hover{
background: #ff0000;
}


#topimage {
background-color: #EEEEEE;
width: 100%;
height: 600px;
}

#main {
background-color: #F0FFF0;
width: 100%;
height: 700px;
margin-left: auto;
margin-right: auto;
}

#footer{
background-color: #CCCCCC;
width: 100%;
height: 50px;
font-size: 12px;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
clear: both;
margin-left: auto;
margin-right: auto;
}