• 締切済み

パララックスページスクロールについて

こんにちは。 下記のコードはJQUERYコードをコピペしたもので、ド素人です。 ナビをクリックすると、各コンテンツBOXにいきますが、下のコードだとTOPの一番上まで来てしまいます、 クリック→ページトップから下へ85pxのところに来るように設定したいのですが。 ========javascript==================== <script> //スムーススクロール 各コンテンツbox// $(function() { $(".scroll").click(function(event){ event.preventDefault(); var url = this.href; var parts = url.split("#"); var target = parts[1]; var target_offset = $("#"+target).offset(); var target_top = target_offset.top; $('html, body').animate({scrollTop:target_top}, 1200); }); }); </script> =================HTML==================== <nav> <ul id="dropmenu"> <li><a href="#top" class="scroll">Top</a></li> <li><a href="#introduce" class="scroll">薬膳レシピとは</a></li> <li><a href="#basictypecheck" class="scroll">基本体質のチェック</a></li> <li><a href="#typedescription" class="scroll">気・血・水について</a></li> <li><a href="#mix" class="scroll">混合タイプの特徴</a></li> <li><a href="#notfeelingcheck" class="scroll">不調の原因チェック</a> <li><a href="#Profile" class="scroll">Profile</a></li> <li><a href="#Lesson" class="scroll">Lesson</a></li> </ul> </nav> ===================================== 他にもコードが必要であれば、ご教示いただければ補足します。 どうぞ宜しくお願い致します。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ブラウザのスクロール量を、その記事のトップになるようにアニメーションしていますので、  animate({scrollTop:target_top}, 1200) 指定する位置を「記事のトップ-85px」にしてあげればよろしいかと。

関連するQ&A

  • Jqueryでリストのスクロール

    <ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]: <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]: <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]: <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>

  • jQueryでリストを分割してページ送りを表示

    現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…? [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>

  • wordpressの個別投稿ページのリンク

    解説書を読みながらwordpressを使ってホームページの作成をしているのですが、 CSSフレームワークの種類などで躓いて、 ある部分は本のコード、ある部分は解説サイトのコードを貼り付けて進めていたのですが、 個別投稿ページの項でわからなくなってしまいました。 サイトのトップページから個別投稿ページにはどこをクリックすれば辿り着けるのでしょうか。 ↓header.phpの内容です <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; --> <title>たいとる</title> <nav class="navbar navbar-inverse navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><?php bloginfo('name'); ?></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="/news">お知らせ</a></li> <li><a href="#">記事一覧</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <?php wp_head(); ?> </head> ↓front-page.phpの一部です。 <header> <section id="news"> <?php $news = get_posts('posts_per_page=1'); ?> <?php foreach($news as $post): ?> <?php setup_postdata($post); ?> <a href="<?php the_permalink(); ?>"> <div class="alert_box"> <p><?php the_title(); ?> - <?php the_date(); ?></p> </div> </a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </section> </header> 直感的にはsingle.phpは「/var/www/html/wordpress/wp-content/themes/sample」内にあるので 「」内のリンクがコード内に有るような気がするのですが、どこにも見当たりません。 single.phpにアクセスするためにはトップページ内のまたはトップページコード内のどの記述からアクセスできるのでしょうか。 読みづらくてすみません。よろしくお願いします。

    • ベストアンサー
    • PHP
  • position fixed内でスクロールさせたい

    css position fixed内でスクロールさせることは可能ですか? 下記のサイトのドロワーメニューのようにしたいです。 //www.toei-eigamura.com/edosakaba/ 下記のようにしてもうまくいきませんでした。 ・html <nav> <div id="nav__drawermenu-wrap"> <ul> <li> <a class='top-header__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http:///index.html" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a> <a class='top-header__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=http:///index.html" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a> <a class='top-header__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=</a> </li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav> ・css nav { overflow: auto; } [id="drawermenu"] ul { z-index: 300; width: 100%; height: 100% position: fixed; top: 0; padding-top: 2.8rem; text-align: center; cursor: pointer; margin-left: -100%; transition-propety:all; transition-duration:1s; }

    • ベストアンサー
    • CSS
  • クリックファンクションがうまくいかない

    class="link-block"のついたliつまりリストをクリックした時、.removeClass('active');でactiveというクラスを削除するようにしたかったのですが、 なぜかリストをクリックしても反応せずに削除されません。 id="maware"のliだけは、反応して削除されます。 CSSにとしてもだめでした。どうもclass="link-block"のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか? .link-block { display: block; z-index: 99999; } ・ソースコード <div class="kuruttosuru">aaa</div> <!-- drawermenu --> <!-- drawermenu-button --> <div class="modal-button-wrap"> <a class="animation-hover action-hover modal-button-wrap__button"> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> </a> </div> <!-- drawermenu --> <nav> <div id="nav__drawermenu-wrap"> <ul> <li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav> <!-- /drawermenu --> ・JS <script> $(function(){ $('.kuruttosuru').on('click', function() { $(this).addClass('active'); return false; }); }); </script> <!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション --> <script> $(function(){ $('.modal-button-wrap__button, .link-block').on('click', function() { $(this).removeClass('active'); return false; }); }); </script> ・下記のJSがあると、うまくいかず下記をコメントアウトするとうまくいきます。 下記に何かおかしくなる要素があるのでしょうか? <!-- ページ内遷移 --> <script> $(function(){ // #で始まるアンカーすべてをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> _____________

  • jQueryのslideToggleについて

    jQueryのslideToggleについて質問です。 クリックするとドロップダウンメニューが表示されるとこまではOKです。 「メニュー1」のサブメニューが開いている状態で「メニュー2」をクリックすると ・既に開いている「メニュー1」のサブメニューが閉じる ・クリックされた「メニュー2」のサブメニューが開く としたいのですがどうすればいいのでしょうか? ■html <nav id="global-nav"> <ul> <li><a href="#">ホーム</a></li> <li> <a class="sub" href="#">メニュー1</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li> <a class="sub" href="#">メニュー2</a> <ul> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">メニュー3</a></li> </ul> </nav> ■js $('a.sub').click(function(){ $('#global-nav li ul').hide();//←既に開いている場合は他を閉じる $(this).next('ul').slideToggle('slow'); return false; }); jsの2行目を入れることで他のサブメニューが開いている場合の問題はクリアできたのですが「メニュー1」をクリックするたびにサブメニューが開くだけで閉じることがありません^^;

  • トップページの横幅を画面いっぱいに表示させたい。

    トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/xxx.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }

    • 締切済み
    • CSS
  • cssのみ使用したプルダウンメニュー

    はじめまして。 cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。 コードとcssは以下です。 aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。 .main li .sub{ visibility:hidden; } で子孫リストは消えるものの、 .main li : hover .sub{ visibility:visible; } と設定しても現れてくれません。 どうすれば上手くいくでしょうか。 すみませんがよろしくお願いします。 ・html <nav class="common_width"> <ul class="main"> <li><a href="#">profile</a></li> <li><a href="#">about</a> <ul class="sub"> <li><a href="#">profile</a></li> <li><a href="#">blog</a></li> <li><a href="#">itai</a></li> </ul> </li> <li><a href="#">test</a></li> </ul> </nav> ・css li{ list-style:none; } .common_width{ width:900px; margin:0 auto; } a { color: #000; text-decoration: none; transition: background 0.3s ease 0s, color 0.3s ease 0s; } /*全部のリスト*/ nav li{ width:150px; } /*直下のul*/ nav > ul{ width:650px; margin:0 auto; overflow:hidden; } /*直下のリスト*/ nav .main li{ float:left; color: #9f9f9f; position: relative; margin-left:100px; } nav .main li:first-child{ border-left:none; margin-left:0px; } nav ul>li a{ padding:10px 0 10px 0 ; background-color: #ccc; display: block; text-align: center; line-height:1; } nav li:hover > a{ color: #fff; background-color: #000; } .main li .sub{ visibility:hidden; } .main li : hover .sub{ visibility:visible; } nav ul li a:hover{ color: #fff; display:block; background-color: #000; } nav .sub li { font-size: 12px; color:#fff; border-top:1px dotted #fff; text-align:center; margin-left:0px; }

    • ベストアンサー
    • HTML
  • スムーズスクロールとfleXcrollの併用

    よろしくお願い致します。 jQueryを使用して、「overflow: auto」を指定している要素内でスムーズスクロール出来る方法を探しており、以下のようなコードを見つけました。 $(document).ready(function(){ var box = $('#contents'); $(document).click(function(event){ var obj = $(event.target); var anchor = obj.filter('a[href*="#"]'); if (!anchor[0]) anchor = obj.parents('a[href*="#"]'); if (anchor[0]){ var target = $(anchor[0].hash, box); if (target[0]){ var scrollTop = box.scrollTop(); var dist1 = box.prop('scrollHeight') - box.prop('clientHeight') - scrollTop; var dist2 = target.position().top - box.position().top; box.animate({ scrollTop: scrollTop + Math.min(dist1, dist2)}); return false; } } return true; }); }); ↑このコードで「overflow:auto;」を指定している要素内でスムーズスクロールが出来るようになったのですが、スクロールバーを装飾できる「fleXcroll(http://shanabrian.com/web/library/flexcroll.php)」プラグインと併用すると、スムーズスクロールが効かなくなってしまいます。 「fleXcroll」のコードは「http://www.hesido.com/web/flexcroll.js」になる(記述が長くここには書ききれませんでした)のですが、薄識のため何処に問題があるのか分からない状態です。 ちなみにHTMLは、下記のようなコードで使用しています。 <div id="navi">  <ul>   <li><a href="#A">divAへ移動</a></li>   <li><a href="#B">divBへ移動</a></li>   <li><a href="#C">divCへ移動</a></li>   <li><a href="#D">divDへ移動</a></li>   <li><a href="#E">divEへ移動</a></li>  </ul> </div> <div id="hoge" style="height:500px; overflow:auto;">  <div id="A">divAの内容</div>  <div id="B">divBの内容</div>  <div id="C">divCの内容</div>  <div id="D">divDの内容</div>  <div id="E">divEの内容</div> </div> 分かりにくい説明で恐れ入ります。 補足説明致しますので、お分かりになる方がいらっしゃいましたら、どうかご教授下さいますようお願い致します。

  • IE6,IE7だとメニューが写真の裏に表示される

    こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。 ※IE8、FF、Macだと写真の前にちゃんと表示されます。 ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。 よろしくお願いいたします。 [HTMLソース] <!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" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul#nav').superfish(); }); </script> </head> <body> <div id="container"> <div id="header" class="clearfix"> <div id="menuBottom" class="clear"> <ul id="nav" class="clearfix"> <li><a href="#"><img src="" alt="" width="88" height="29" /></a> <ul> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"><a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a> <ul> <li><a href="#">short</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> </ul> </div><!--#menuBottom END--> </div> </div><!--#header END--> <br /><br /><br /><br /> <div id="contents"> <div id="slide" class="fltL"> <div id="slide_body"> <ul> <li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li> </ul> </div><!--#slide_body END--> </div> <!--#slide END--> </div><!--#container END--> </body> </html> [上のhtmlに読み込まれているCSS(style.css)] #header { width:950px; margin:0 auto; padding-top:19px; z-index:100; } #menuBottom { float:right; z-index:0; } #container { width:100%; text-align: left; } /*** ドロップメニュのCSS ***/ ul li { margin:0; padding:0; } #nav ul { position:absolute; top:-999em; width:10em; /* left offset of submenus need to match (see below) */ } #nav ul li { width:100%; height:100%; } #nav li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } #nav li { float:left; position:relative; } #nav li:hover ul, #nav li.sfHover ul { left:0; top:2.5em; /* match top ul list item height */ z-index:99; _z-index:0; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul, ul#nav li li.sfHover ul { left:10em; /* match ul width */ top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top:-999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; /* match ul width */ top:0; } /*** DEMO SKIN ***/ #nav { float:left; } #nav ul li a { display:block; position:relative; padding:0.75em 1em; border-left:1px solid #fff; border-top: 1px solid #CFDEFF; text-decoration:none; height: 100%; z-index:15; } #nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#13a; } #nav li li{ background:#AABDE6; } /*** 画像部分のCSS ***/ #slide { width:624px; position:relative; } #slide_header { position:absolute; top:0px; left:0px; width:624px; height:7px; z-index:2; background: url(slide_header.png) no-repeat; } #slide_body { background: url(slide_body.gif) repeat-y 0px 0px; width:624px; margin:auto; } #slide_body img { margin:auto; }