【固定レイアウト:レイアウトの設定】
【固定レイアウト:レイアウトの設定】
授業の流れで、友人の雀荘の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 Pゴシック", "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; }