【固定レイアウト：レイアウトの設定】
【固定レイアウト：レイアウトの設定】
授業の流れで、友人の雀荘のHPを作ってみました。
http://rara.mods.jp/vm/
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>まぁじゃんバイオレンスモンキーズ</title> <link rel="stylesheet" href="css/style-l.css"> <link rel="stylesheet" href="css/style-m.css" media="only screen and (min-width:640px) and (max-width:979px)"> <link rel="stylesheet" href="css/style-s.css" media="only screen and (max-width:639px)"> <!--webfont--> <link href="http://fonts.googleapis.com/css?familiy=Maven+pro:900,400" rel="stylesheet" type="text/css"> </head> <body> <!--container--> <div id="container"> <!--header--> <div id="header"> <div id="site"> <h1><img src="img/log1.png" alt=""></h1> </div><!--site--> <div id="nav"> <ul> <li><a href="index.html">トップ</a></li> <li><a href="rule.html">ルール</a></li> <li><a href="info.html">基本情報</a></li> <li><a href="map.html">アクセス</a></li> </ul> </div><!--nav--> </div><!--header--> <!--headerpost--> <div id="headerpost"> <img src="img/ch.png"> <div id="lead"><img src="img/5vm.gif"> <h2>まぁじゃんバイオレンスモンキーズで<br>マージャンしよう！</h2> <p class="main">八王子駅からすぐ！ フリーもセットもやってます♪</p> <p class="main">2012年8月3日</p> <img src="img/majan.gif"> <p class="more"><a href="url">MORE</a></p> </div> </div><!--headerpost--> <!--content--> <div id="content"> <!--post--> <div class="post"> <a href="url"> <img src="img/mans.png" alt=""> <h2>七萬</h2> <p>=========================…</p> <p class="date">2012年8月1日</p> <p class="more_s">MORE</p> </a> </div><!--post--> <!-- ▼.post --> <div class="post"> <a href="url"> <img src="img/p1.png" alt=""> <h2>ドサ健</h2> <p>=========================…</p> <p class="date">2012年7月28日</p> <p class="more_s">MORE</p> </a> </div> <!-- ▲.post --> <!-- ▼.post --> <div class="post"> <a href="url"> <img src="img/ojii.png" alt=""> <h2>フリーは5半荘打つとお食事サービスがつきます♪</h2> <p>=========================…</p> <p class="date">2012年7月20日</p> <p class="more_s">MORE</p> </a> </div> <!-- ▲.post --> <!-- ▼.post --> <div class="post"> <a href="url"> <img src="img/vm.jpg" alt=""> <h2>セットでもフリーでも楽しめます♪</h2> <p>=========================…</p> <p class="date">2012年7月5日</p> <p class="more_s">MORE</p> </a> </div> <!-- ▲.post --> </div><!--content--> <!-- ▼#footer --> <div id="footer"> <p>バイオレンスモンキーズ</p> <!-- ▼#iconmenu --> <div id="iconmenu"> <ul> <li><a href="url"><img src="img/btn_tw.png" alt="Twitter"></a></li> <li><a href="url"><img src="img/btn_fb.png" alt="Facebook"></a></li> <li><a href="url"><img src="img/btn_gplus.png" alt="Google Plus"></a></li> <li><a href="url"><img src="img/btn_rss.png" alt="RSS Feed"></a></li> </ul> </div> <!-- ▲#iconmenu --> <!-- ▼#submenu --> <div id="submenu"> <ul> <li><a href="url">Privacy Policy</a></li> <li><a href="url">Terms of Use</a></li> <li><a href="url">Contact</a></li> </ul> </div> <!-- ▲#submenu --> <small>Copyright © バイオレンスモンキーズ</small> </div> <!-- ▲#footer --> </div><!--container--> </body> </html>
@charset "utf-8";
/* CSS Document */
/*layout*/
body {
margin:24px 10px;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#container {
width:960px;
margin:auto;
}
#header {
margin-bottom:10px;
overflow:hidden;
}
#headerpost {
margin-bottom:30px;
}
#content {
margin-bottom:30px;
}
/*#content*/
#content {
overflow:hidden;
}
.post {
float:left;
width:216px;
margin-right:32px;
margin-bottom:25px;
}
.post:last-child {
margin-right:0;
}
.post+.post+.post+.post {
margin-right:0;
}
/*.post*/
.post img {
width:216px;
height:auto;
vertical-align:bottom;
border:none;
}
h2 {
color:#000;
}
.main {
color:#000000;
}
.post h2 {
font-size:16px;
margin:5px 0 0;
}
.post p {
font-size:12px;
margin:10px 0;
}
.post .date {
float:left;
margin:0;
}
.post .more_s {
float:right;
color:#FFFFFF;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
background-color:#666;
background-image:;
background-repeat:no-repeat;
background-position:94% 50%;
padding:3px 25px 3px 5px;
margin:0;
}
.post a {
color:#000;
text-decoration:none;
display:block;
overflow:hidden;
}
.post a:hover {
background-color:#cfffb2;
}
/*site*/
#site {
float:left;
}
#site h1 {
margin:0;
}
#site img {
vertical-align:bottom;
}
/*nav*/
"nav {
float:right;
font-size:22px;
font-family:Arial, Helvetica, sans-serif;
padding-top:30px;
}
#nav ul {
margin:0;
padding:0;
}
#nav li {
list-style-type:none;
float:left;
}
#nav li a {
display:block;
float:left;
margin-left:20px;
text-decoration:none;
border-bottom:solid 5px transparent;
color:#000000;
}
#nav li a:hover {
border-bottom-color:#ff1e97;
}
/*#headerpost*/
#headerpost img {
float:left;
vertical-align:bottom;
}
#headerpost #lead {
float:left;
width:300px;
color:#fff;
margin-left:25px;
overflow:hidden;
}
#headerpost h2 {
margin:20px 0;
}
#headerpost .more {
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
text-align:right;
}
#headerpost .more a {
color:#fff;
background-image:;
background-repeat:no-repeat;
background-position:right center;
display:block;
padding:10px 40px 10px 0;
text-decoration:none;
}
#headerpost { background-color: #FF0;
background: -webkit-gradient(linear,left top, left bottom, from(#FFF), to(#FF0));
background: -webkit-linear-gradient(#FFF 0%, #FF0 100%);
background: -moz-linear-gradient(#FFF 0%, #FF0 100%);
background: -o-linear-gradient(#FFF 0%, #FF0 100%);
background: -ms-linear-gradient(#FFF 0%, #FF0 100%);
background: linear-gradient(#FFF 0%, #FF0 100%);
overflow: hidden;
}
/*footer*/
#footer {
font-family:Arial, Helvetica, sans-serif;
color:#fff;
background-color:#333;
padding:10px 10px 20px;
}
#footer p {
float:left;
margin:0;
}
/*#iconmenu*/
#iconmenu {
float:right;
}
##iconmenu ul{
margin:0;
padding:3px 0 0;
}
#iconmenu li {
display:inline;
list-style-type:none;
}
#iconmenu img {
border:none;
}
/*#submenu*/
#submenu {
clear:both;
}
#submenu ul {
margin:10px 0;
padding:3px 0 0;
font-size:12px;
}
#submenu li {
display:inline;
list-style-type:none;
}
#submenu a {
color:#ff1e97;
font-weight:bold;
border-right:solid 1px #fff;
padding-right:6px;
margin-right:3px;
text-decoration:none;
}
#submenu li:last-child a {
border:none;
}
#submenu li+li+li a{
border:n;
}
/* Copyright */
small {
font-size: 12px;
font-weight: bold;
display: block;
}
/*map*/
#map_canvas {
text-align:center;
width:100%;
height:100%;
}
#wrapper {
background-color: #FF0;
background: -webkit-gradient(linear,left top, left bottom, from(#FFF), to(#FF0));
background: -webkit-linear-gradient(#FFF 0%, #FF0 100%);
background: -moz-linear-gradient(#FFF 0%, #888888 100%);
background: -o-linear-gradient(#FFF 0%, #FF0 100%);
background: -ms-linear-gradient(#FFF 0%, #FF0 100%);
background: linear-gradient(#FFF 0%, #FF0 100%);
overflow: hidden;} @charset "utf-8";
/* CSS Document */
/*layout*/
#container {
width:620px;
}
/*.post*/
.post {
width:300px;
margin-right:20px;
}
.post:nth-child(even) {
margin-right:0;
}
.post img {
width:300px;
}
.post h2 {
font-size:22px;
}
.post p {
font-size:16px;
}
.post .more_s {
font-size:18px;
}
/*nav*/
#nav {
padding-top:0;
}
#nav li:nth-child(2) {
float:none;
overflow:hidden;
}
/*#headerpost*/
#headerpost {
position:relative;
}
#headerpost img {
float:none;
}
#headerpost #lead {
float:none;
position:absolute;
left:0;
bottom:0;
background-color:rgba(0,0,0,0.7);
width:auto;
padding:10px 20px;
margin:0;
}
#headerpost h2 {
font-size:20p;
margin:10px 0 10px 0;
}
#headerpost p {
font-size:14px;
margin:0 0 20px 0;
}
#headerpost .date {
float:left;
margin:0;
}
#headerpost .moer {
float:right;
margin:-12px 15px 0 0;
} @charset "utf-8";
/* CSS Document */
/*layout*/
#container {
width:300px;
}
.post {
float:none;
width:300px;
margin-right:0;
}
/*post*/
.post img {
width:300px;
}
.post h2 {
font-size:22px;
}
.post p {
font-size:16px;
}
.post .more_s {
font-size:18px;
}
/*site*/
#site {
float:none;
}
#site img {
width:300px;
height:auto;
}
/*nav*/
#nav {
float:none;
font-size:14px;
padding-top:6px;
}
#nav ul li a {
margin-left:0;
margin-right:10px;
}
/*headerpost*/
#headerpost img {
float:none;
width:300px;
height:auto;
}
#headerpost #lead {
float:none;
background-color:#252525;
width:auto;
padding:10px 10px;
margin:0;
}
#headerpost h2 {
font-size:20px;
margin:10px 0 10px 0;
}
#headerpost p {
font-size:14px;
margin:0 0 20px 0;
}
#headerpost .date {
float:left;
margin:0;
}
#headerpost .more {
float:right;
margin:-12px 15px 0px 0;
}
