HTML08(レイアウトサンプル)
ブログ・Webデザイン初心者の勉強「サンプルE」
<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>jQueryの練習</title> <linkrel="stylesheet"href="style.css"> <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></script> <scripttype="text/javascript"src="js/common.js"></script> </head> <body> <divid="container"> <header> <nav> <ul> <liclass="home"><ahref="#container">Home</a></li> <liclass="about"><ahref="#about">About</a></li> <liclass="works"><ahref="#works">Works</a></li> <liclass="dogs"><ahref="#dogs">Dogs</a></li> <liclass="cats"><ahref="#cats">Cats</a></li> <liclass="contact"><ahref="#contact">Contact</a></li> </ul> <h1>My WebSite!!</h1> </header> <divid="content"> <sectionid="about"> <h2id="about">About</h2> <divclass="contentMain"> <divclass="text_l"> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。そのため、わざわざ一番上まで行かずとも、好きな時にコンテンツ間を移動できるため、ユーザーに優しい設計となっています。注意点として、メニューの高さを出しすぎてしまうと、画面サイズの小さいユーザーは、閲覧範囲が小さくなり、不満点に繋がってしまうため、過度な装飾には注意しましょう。</p> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。</p> </div> <imgclass="right"src="img/img1.png"> </div> </section> <section> <h2id="works">Works</h2> <divclass="contentMain"> <divclass="text_r"> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。そのため、わざわざ一番上まで行かずとも、好きな時にコンテンツ間を移動できるため、ユーザーに優しい設計となっています。注意点として、メニューの高さを出しすぎてしまうと、画面サイズの小さいユーザーは、閲覧範囲が小さくなり、不満点に繋がってしまうため、過度な装飾には注意しましょう。</p> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。</p> </div> <imgclass="left"src="img/img2.png"> </div> </section> <section> <h2id="dogs">Dogs</h2> <divclass="contentMain"> <divclass="text_l"> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。そのため、わざわざ一番上まで行かずとも、好きな時にコンテンツ間を移動できるため、ユーザーに優しい設計となっています。注意点として、メニューの高さを出しすぎてしまうと、画面サイズの小さいユーザーは、閲覧範囲が小さくなり、不満点に繋がってしまうため、過度な装飾には注意しましょう。</p> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。</p> </div> <imgclass="right"src="img/img3.png"> </div> </section> <section> <h2id="cats">Cats</h2> <divclass="contentMain"> <divclass="text_r"> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。そのため、わざわざ一番上まで行かずとも、好きな時にコンテンツ間を移動できるため、ユーザーに優しい設計となっています。注意点として、メニューの高さを出しすぎてしまうと、画面サイズの小さいユーザーは、閲覧範囲が小さくなり、不満点に繋がってしまうため、過度な装飾には注意しましょう。</p> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。</p> </div> <imgclass="left"src="img/img4.png"> </div> </section> <sectionclass="contact"> <h2id="contact">Contact</h2> <divclass="contentMain"> <divclass="text-l"> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。そのため、わざわざ一番上まで行かずとも、好きな時にコンテンツ間を移動できるため、ユーザーに優しい設計となっています。注意点として、メニューの高さを出しすぎてしまうと、画面サイズの小さいユーザーは、閲覧範囲が小さくなり、不満点に繋がってしまうため、過度な装飾には注意しましょう。</p> <p>上部のメニューをクリックすることで、該当のコンテンツへアンカーリンクで移動することができます。また、メニューはスクロールに合わせ、常にウインドウの最上部にて固定で表示されます。</p> </div> </div> </section> </div> <footer> <p>Copyright 〓 YN. All rights reserved.</p> </footer> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ body , div, header, footer, section, article, nav h1, h2, p, ul, li, img { padding: 0; margin: 0; } body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } #container{ margin:0 auto; width:1000px; background:url(img/bg.png) repeat; } header{ height:222px; background:url(img/mainimg.jpg) no-repeat left 50px; margin-bottom:30px; } header h1{ display: block; white-space: nowrap; text-indent: 100%; overflow: hidden; } header nav { width: 100%; height:50px; background:#4f80e3; position:fixed; } header nav ul{ list-style: none; padding:0 50px; overflow: hidden; } header nav ul li { float: left; } header nav ul li a{ width: 150px; height: 50px; display: block; white-space: nowrap; background: url(img/nav.png) no-repeat; text-indent: 100%; overflow: hidden; } header nav ul li.home a{ background-position: left top; } header nav ul li.home a:hover{ background-position: left -50px; } header nav ul li.about a{ background-position: -150px top; } header nav ul li.about a:hover{ background-position: -150px -50px; } header nav ul li.works a{ background-position: -300px top; } header nav ul li.works a:hover{ background-position: -300px -50px; } header nav ul li.dogs a{ background-position: -450px top; } header nav ul li.dogs a:hover{ background-position: -450px -50px; } header nav ul li.cats a{ background-position: -600px top; } header nav ul li.cats a:hover{ background-position: -600px -50px; } header nav ul li.contact a{ background-position: -750px top; } header nav ul li.contact a:hover{ background-position: -750px -50px; } #content{ padding:0 40px; margin-bottom:50px; } #content section{ height:510px; clear:both; overflow:hidden; } #content section h2{ width:914px; line-height:44px; border: solid 3px #4f80e3; background:#fff; text-align:center; color:#4f80e3; font-family:'Impact'; margin-bottom:40px; } #content section .contentMain{ width:860px; margin:0 30px; overflow:hidden; } #content section .text_l,#content section .text_r{ width:510px; } #content section .text_l{ float:left; } #content section .text_r{ float:right; } #content section img.left{ float:left; } #content section img.right{ float:right; } p{ line-height:1.7; font-size:13px; letter-spacing:1px; margin-bottom:20px; } #content section.contact{ height:100%; } footer{ height:50px; text-align:center; }
$(function(){ $("a[href*=#]").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top - 80 }, 'slow','swing'); return false; }) });
a href="#○○"で指定したidのところまでスクロールする。要素は何でもOK。