出産前後の痔にはご注意!

たすけてください
かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで
重なり作業ができません。positionの設定がいけないのはわかっています。。。

上から順にheader→nav→a→b(c1,c2)→footerです。
jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、
navがうごくようになったら他の<div>がきゅっとうえによってしましました。
他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。
空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。

以下にソース書きます。
お願いいたします。

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">

<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){

$(window).scroll(function(){
var dy=$(this).scrollTop();
console.log(dy);
$("#nav").css("top",150+dy/8);
});

});
</script>


<body>
<div id="wrap">
<div id="header" class="box"></div>
<div id="nav" class="box"></div>
<div id="a"></div>
<div id="b" class="box">
<div class="c_box" id="c1"></div>
<div class="c_box" id="c2"></div>
</div>
<div id="footer"></div>
</div>
</body>


<style type="text/css">
.box{ margin:0 auto; width:1260px; position:fixed;}
#wrap{ weidth:1260px;}
#header{ height:145px; background:#fcc; }
#nav{ height:69px; background:#ccc; top:150px; }
#a{ width:1285px; height:522px; background:#ccf; }
#b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;}
.c_box{ width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; }
#c1{ position:absolute; left:24px; top:308px; }
#c2{ position:absolute; left:465px; top:308px; }
#footer{ height:100px; background:#fac; }

</style>

A 回答 (1件)

こんな感じでいいですか?



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<style type="text/css">
body{margin:0;padding:0;}
#wrap{ width:100%; width:100%;}
#header{ width:100%; height:145px; background:#fcc; position:fixed; top:0;z-index:10;}
#nav{ width:100%; height:69px; background:#ccc; position:absolute; bottom:0;}
#a{ width:100%; height:522px; background:#ccf; margin-top:150px;}
#b{ height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;}
.c_box{ width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; }
#c1{ position:absolute; left:0; bottom:0;}
#c2{ position:absolute; right:0; top:0;}
#footer{ height:100px; background:#fac; }
</style>
</head>

<body>
<div id="wrap">
<div id="header">
header
<div id="nav">nav</div>
</div>

<div id="a">a</div>
<div id="b" class="box">b
<div class="c_box" id="c1">c1</div>
<div class="c_box" id="c2">c2</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

ありがとうございました。
わざわざjquery使わなくてもnav動く!確かに!!
ソース拝見しそう思いました。
まだまだお勉強不足です。
お返事がおそくなりましてもうしわけありませんでした。
本当に助かりました。
ありがとうございました。

お礼日時:2014/09/28 00:52

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

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

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

QCSSで、contentsがfooterに重なってしまう

スタイルシートでページを作成しています。

上からheader、contents, footerとボックスを配置しているのですが、
contentsの内容が多くなると、下に膨らむのですがこのときにページ最下部にあるfooterに重なってしまいます。
contents内には、さらにボックスが複数ありテキストや画像があります。

ためしにcontents内をすべてテキスト文字にしてたくさん記載をしたところ、
footerには重ならず、footerが自動的に下へ移動しました。

これは何がいけないのでしょうか?
なぜcontents内にボックスを入れると、footerに重なってしまうのでしょうか?

Aベストアンサー

多分floatを使っている。
>header、contents, footer
header,section,footerですよね。contentsは変?そもそも複数形じゃないし。
 ⇒HTML5新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
にあわせたほうが良かろうかと
<div class="header">
</div>
<div class="section">
 <h2>本文見出し</h2>
 <p>・・・</p>
 <div class="section">
  <h3>項見出し</h3>
  <p><img src="" width="" height="" alt=""></p>
  <p>記事</p>
  <div class="article"><!-- header,section,footerをもちうる完結した記事 -->
   <div class="header"></div>
   <div class="section"></div>
   <div class="footer"></div>
  </div>
 </div>
 <div class="nav"><!-- ナビゲーション -->
 </div>
 <div class="aside"><!-- このsectionと直接関係ない記事 -->
 </div>
</div>
<div class="footer">
</div>
header,section,footerは何箇所も登場する可能性があるのでclassのほうが良いかな・・

[HTML5だと]
<header>
</header>
<section>
 <h2>本文見出し</h2>
 <p>・・・</p>
 <section>
  <h3>項見出し</h3>
  <p><img src="" width="" height="" alt=""></p>
  <p>記事</p>
  <article>
   <header></header>
   <section></section>
   <footer></footer>
  </div>
 </section>
 <nav>
 </nav>
 <aside>
 </aside>
</section>
<footer>
</footer>

floatを使ってブロックの配置をしないことが原則ですが、画像の場合はfloatさせることもあるでしょうから、その場合にはfloatを終了させるコンテナブロックに対して
:afterまたは:beforeの擬似要素にて
{content:"";
clear:[right|left|both];
display:block;
}
のセットで良いはずです。

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
 のDATAでチェック済みHTML4.01 + CSS2.1
★タブは_に置換してあるので戻す。

<!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&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
body>div.header,
body>div.section,
body>div.footer{
width:90%;min-width:630px;max-width:900px;
margin:0 auto;
padding:5px;
}
body>div.section{position:relative;}
body>div.section>h2,
body>div.section>div.section,
body>div.section>p{
margin: 0 200px;
}
div.section div.nav,
div.section div.aside{
position:absolute;
top:0;
width:200px;
height:100%;
}
div.section div.nav{left:0;}
div.section div.aside{right:0;}
/* ここからが本題 */
/* もしもfloatを使って配置していたら */
div.section img{
float:right;
}
body>div.section:after{
content:"";
display:block;
clear:right;
}
/* わかりやすいように色分け */
div.header{background-color:aqua;}
div.section{background-color:blue}
div.aside{background-color:fuchsia}
div.nav{background-color:gray}
div.footer{background-color:green}
div.section div.section{background-color:lime}
div.div.aside{background-color:maroon}
div.section div.article{background-color:orange;}
div.section div.article div.header{background-color:purple;}
div.section div.article div.section{background-color:silver;}
div.section div.article div.header{background-color:yellow;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
_</div>
_<div class="section">
__<h2>本文見出し</h2>
__<p>・・・</p>
__<div class="section">
___<h3>項見出し</h3>
___<p><img src="./images/01.jpg" width="240" height="180" alt="写真"></p>
___<p>記事</p>
___<div class="article"><!-- header,section,footerをもちうる完結した記事 -->
____<div class="header">HEADER</div>
____<div class="section">SECTION</div>
____<div class="footer">FOOTER</div>
___</div>
__</div>
__<div class="nav"><!-- ナビゲーション -->
___ナビ
__</div>
__<div class="aside"><!-- このsectionと直接関係ない記事 -->
___補足
__</div>
_</div>
_<div class="footer">
__<h2>フッタ</h2>
_</div>
</body>
</html>

多分floatを使っている。
>header、contents, footer
header,section,footerですよね。contentsは変?そもそも複数形じゃないし。
 ⇒HTML5新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
にあわせたほうが良かろうかと
<div class="header">
</div>
<div class="section">
 <h2>本文見出し</h2>
 <p>・・・</p>
 <div class="section">
  <h3>項見出し</h3>
  <p><img src="" width="" height="" alt=""></p>
  <p>記事</p>
  <div class="ar...続きを読む

Qcss固定したフッターが本文と重なってしまいます

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定したのですが、
ウィンドウを小さくしたり、長い文を書いたりすると、
メインの記事がフッターと重なって読めなくなってしまいます。
記事が短い時は、ページ全体の下部に、
長い時はスクロールした一番下にくるようにしたいです。
テーブルのheight指定を使えば同じような効果は得られますが、
テーブルの無いレイアウトをやってみたかったので。
同じような質問は発見したのですが、いい解答が見つかりませんでした。

#all { height:100%; min-height:100%; }
#header { left:150px; position:absolute; }
.main { top:60px; left:150px; position:absolute; }
#footer { left:150px; bottom:0px; position:absolute; }
-------------------------------------------------------------
<div id="all">
<div id="header">
ヘッダ部
</div>
<div class="main">
メインの記事
</div>
<div id="footer">
フッター
</div>
</div>
==============================================================
このように指定...続きを読む

Aベストアンサー

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出した内容の扱い(Overflow)
scroll 内容を切り抜く。

次に、オーバーラップを回避した書き方を一応示しておきます。
Left<br/>を追加して、スクロールバーが出ることをご確認下さい。

<!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
  <TITLE>Test</TITLE>
  <STYLE type="text/css">
  #left {
  position:absolute;
  top: 130px;
  left: 100px;
  width: 300px;
overflow-y: scroll;
  }
  #main {
  position:absolute;
  top: 130px;
  left: 400px;
  }
  #right {
  position:absolute;
  top: 130px;
  left: 700px;
  }
  #footer {
  position:absolute;
  bottom: 0px;
  left: 100px;
  }
  </STYLE>
</HEAD>
<BODY>
<div id="left">
 left<br/>
</div>
<div id="main">
 main
</div>
<div id="right">
 right
</div>
<div id="footer">
 footer
</div>
</BODY>
</HTML>

何度もゴミ回答ばかりしてすみません。これが最後です。
メインの記事とフッターの重なりは、一応、防げました。
しかし、スクロールバーが操作できません。中途半端です。
益子貴寛氏の調査では、IE6.0のサポートは不完全となっています。
また、氏は、フレームの代行手段と言明されています。
こういう調査結果からすると、フレームという手段しかなさそうです。
Overflowについては、下記を参照して下さい。

CSS2 11.その他の視覚効果
11.1 はみ出しと切り抜き(Overflow ans clippin)
11.1.1 はみ出...続きを読む

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;"
で直接打ち変えてしまえば。

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の方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

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

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

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

Aベストアンサー

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

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

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む


人気Q&Aランキング