96's blog

WEBサイト制作科　６ヶ月コース

HTML08（レイアウトサンプル）

HTML

ブログ・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。