Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@mazeltov7

mazeltov7/テストサイト1

Created June 1, 2013 05:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mazeltov7/5689438 to your computer and use it in GitHub Desktop.
Save mazeltov7/5689438 to your computer and use it in GitHub Desktop.
Download ZIP
テストサイト１
Raw
テストサイト1
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>CSS課題</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<header id="header">
<h1>サイトのタイトルあああああああ</h1>
<nav id="global">
<ul>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
</ul>
</nav>
</header>
<div id="about">
<ol>
<li>
<h2>これは</h2>
<p>
あああああああああああああああああああああああああああああああああああああああああああああああ<br>あああああああああああああああああああああああああああああああああああああああああああああああ
</p>
</li>
<li>
<h2>CSSの</h2>
<p>
あああああああああああああああああああああああああああああああああああああああああああああああ<br>あああああああああああああああああああああああああああああああああああああああああああああああ
</p>
</li>
<li>
<h2>練習です</h2>
<p>
あああああああああああああああああああああああああああああああああああああああああああああああ<br>あああああああああああああああああああああああああああああああああああああああああああああああ
</p>
</li>
</ol>
</div>
<div id="body">
<div id="main">
<div class="breadcrumbs">
<ol>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">出来事</a>
</li>
<li class="current">
<strong>一昨日から今日までの出来事のまとめ</strong>
</li>
</ol>
</div>
<div id="articles">
<h2>日々の出来事のまとめ</h2>
<article>
<header>
<h3>今日の出来事</h3>
<span class="date">2012年8月6日（月）</span>
</header>
<div class="body">
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<h4>見出しああああああああああああああああああ</h4>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<ul>
<li>リストああああああああああああああああああああああああああああああ</li>
<li>ああああああああああああああああああああああああああああああああああああああああ</li>
<li>ああああああああああああああああああああああああああああああああああああああああ</li>
<li>ああああああああああああああああああああああああああああああああああああああああ</li>
<li>ああああああああああああああああああああああああああああああああああああああああ</li>
</ul>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<table>
<tr>
<th>Aさん</th>
<th>Bさん</th>
<th>Cさん</th>
</tr>
<tr>
<td>テーブルです。あああああああああああ</td>
<td>いいいいいいいいいいいいいいいいいいいいいいいい</td>
<td>ううううううううううううううううううう</td>
</tr>
<tr>
<td>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td>
<td>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td>
<td>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</td>
</tr>
</table>
<p>
ああああああ<strong>強調あああああああああ</strong>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<a href="http://kowabana.jp">怖い話へのリンクあああああああああああ</a>ああああああ
</p>
<blockquote cite="http://google.com">
<p>引用文あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</blockquote>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<h5>中見出しああああああああああああああああああ</h5>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
<ol>
<li>番号付きリスト。ああああああああああああああああああああああああああああああああ</li>
<li>ああああああああああああああああああああああああああああああああああああああああ</li>
<li>ああああああああああああああああああああああああああああああああああああああああ</li>
<li>ああああああああああああああああああああああああああああああああああああああああ</li>
</ol>
<h6>小見出しああああああああああああああああああ</h6>
<p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
<footer>
<dl>
<dt>この記事の作者</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</footer>
</article>
</div>
<aside id="comments">
<h3>最新のコメント</h3>
<ul>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
<li>
<p>ああああああああああああああああああああああああああああああああああああああああ</p>
<dl>
<dt>コメントした人</dt>
<dd>あああああ ああああああ さん</dd>
</dl>
</li>
</ul>
</aside>
</div>
<div id="sub">
<aside class="ad">
<p>広告枠</p>
</aside>
<nav id="local">
<ul>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
</ul>
</nav>
<aside class="banners">
<ul>
<li>
<a href="">バナー</a>
</li>
<li>
<a href="">バナー</a>
</li>
<li>
<a href="">バナー</a>
</li>
</ul>
</aside>
</div>
</div>
<footer id="footer">
<nav>
<ul>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
<li>
<a href="">ナビゲーション</a>
</li>
</ul>
<p class="copyright">Copyright © 2012 社名等 Inc. All rights reserved.</p>
</nav>
</footer>
</div>
</body>
</html>
Raw
テストサイト２
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
body {
font: 13px/1.231 arial, helvetica, clean, sans-serif;
*font-size: small;
*font: x-small;
}
select, input, button, textarea {
font: 99% arial, helvetica, clean, sans-serif;
}
table {
font-size: inherit;
font: 100%;
}
pre, code, kbd, samp, tt {
font-family: monospace;
*font-size: 108%;
line-height: 100%;
}
body {
background-color: #C8EFEA; }
#wrap {
margin: 20px auto;
width: 960px;
background-color: white;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
overflow: hidden;
}
#wrap a, #wrap a:link {
color: #0000ff;
font-style: normal;
text-decoration: underline;
}
#wrap a:visited {
color: #934C7B;
text-decoration: underline;
}
#wrap a:hover {
color: #ff0000;
font-style: normal;
text-decoration: underline;
}
#wrap a:active {
text-decoration: none;
}
#header {
width: 100%;
}
#header h1 {
text-align: center;
margin: 50px 0 40px 0;
font-size: 182%;
font-weight: bold;
}
#header nav#global {
width: 100%;
margin: 0 auto;
background-color: #68CFC3;
text-align: center;
}
#header nav#global ul li {
display: inline;
}
#header nav#global ul li a {
padding: 0 20px;
line-height: 50px;
font-size: 100%;
font-weight: bold;
text-decoration: none;
color: white;
}
#about {
padding: 0 10px 0 10px;
}
#about ol li {
display: block;
width: 300px;
height: 200px;
float: left;
border: 1px dashed #68CFC3;
}
#about ol li h2 {
margin-bottom: 10px;
font-weight: bold;
}
#about ol li p {
line-height: 1.3;
}
#body {
clear:both;
padding: 10px 10px 0 10px;
*zoom: 1;
}
#body:before {
content: "";
display: table;
}
#body:after {
content: "";
display: table;
clear: both;
}
#body #main {
float:left;
width: 760px;
}
#body #main h2 {
font-size: 35px;
color: #1DAF9E;
font-weight:bold;
line-height: 1.3;
padding: 0 0 4px 0;
margin: -25px 0 10px 0;
border-bottom: #dddddd solid 1px;
}
#body #main .breadcrumbs {
font-size: 12px;
}
#body #main .breadcrumbs ol li {
display: inline;
}
#body #main .breadcrumbs ol li a {
text-decoration: none;
}
#body #main .breadcrumbs ol li a:after {
content: ">";
}
#body #main #articles {
padding: 20px 10px;
float: right;
margin: 20px 0px;
width: 80%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px
}
#body #main #articles h2 {
font-size: 35px;
color: #000000;
font-weight: bold;
line-height: 1.3;
padding: 0 0 4px 0;
margin: -25px 0 10px 0;
border-bottom: #dddddd solid 1px;
}
#body #main #articles article {
margin: 20px 0;
}
#body #main #articles article header {
margin: 0 0 20px 0;
border-bottom: #dddddd solid 1px;
padding: 0 0 4px 0;
-webkit-box-shadow: white 0 1px 0;
-moz-box-shadow: white 0 1px 0;
box-shadow: white 0 1px 0;
}
#body #main #articles article header h3 {
font-size: 22px;
font-weight: bold;
line-height: 1.4;
margin; 0 0 10px 0;
color: #1DAF9E;
}
#body #main #articles article .body {
padding: 10px 0 0 0;
border-bottom: dotted 1px #dddddd;
}
#body #main #articles article .body p {
font-size: 108%;
margin: 0 0 1.4em 0;
line-height: 1.7;
}
#body #main #articles article .body strong {
font-weight: bold;
}
#body #main #articles article .body h4 {
font-size: 138.5%;
font-weight: bold;
margin: 0 0 0.8em 0;
padding: 2px 0 2px 8px;
border-left: 6px solid #444444;
}
#body #main #articles article .body h5 {
font-size: 123.1%;
font-weight: bold;
margin: 0 0 0.8em 0;
}
#body #main #articles article .body h6 {
font-size: 108%;
font-weight: bold;
margin: 0 0 0.8em 0;
}
#body #main #articles article .body h6:before {
content: "■";
margin: 0 4px 0 0;
}
#body #main #articles article .body ul {
list-style: square;
margin: 0 0 1.4em 2em;
}
#body #main #articles article .body ol {
list-style: decimal;
margin: 0 0 1.4em 2em;
}
#body #main #articles article .body li {
line-height: 1.6;
margin: 0 0 0.6em 0;
}
#bosy #main #articles article .body table {
margin: 0 0 1.4em 0;
}
#body #main #articles article .body table th,
#body #main #articles article .body table td {
padding: 8px 12px;
border: #cccccc solid 1px;
}
#body #main #articles article .body table th {
background: #eeeeee;
text-align: center;
font-weight: bold;
}
#body #main #articles article footer {
padding: 18px 0 0 0;
}
#body #main #articles article footer dl {
text-align: right;
color: #999999;
}
#body #main #articles article footer dl dt {
display: inline;
}
#body #main #articles article footer dl dd {
display: inline;
}
#body #main aside#comments {
float: left;
width:100px;
color: #555555;
}
#body #main aside h3 {
font-size: 12px;
font-weight: bold;
}
#body #main aside ul li {
display: block;
padding: 8px 0;
border-bottom: #dddddd dotted 1px;
}
#body #main aside ul li p {
line-height: 1;
font-size: 9px;
}
#body #main aside#comments ul li dl {
color: #999999;
font-size: 8px;
}
#body #main aside#comments ul li dt,
#body #main aside#comments ul li dd {
display: inline;
}
#body #sub {
float: right;
width: 180px;
}
#body #sub .ad {
background-color: #68CFC3;
height: 180px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
margin: 0 0 10px 0;
}
#body #sub nav#local ul {
margin: 0 10px 10px 0;
list-style-type: none;
}
#body #sub nav#local ul li a {
display: block;
background: #e9e9e9;
line-height: 20px;
font-size: 12px;
padding: 20px 8px 4px 8px;
border-top: #dddddd solid 1px;
border-left: #dddddd solid 1px;
border-right: #dddddd solid 1px;
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 1px inset;
-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 1px inset;
box-shadow: rgba(255, 255, 255, 0.4) 0 1px 1px inset;
text-align: left;
text-decoration: none;
}
#body #sub nav#local ul li a:before {
content: ">";
}
#body #sub .banners {
margin: 20px 0 0 0;
}
#body #sub .banners ul {
list-style-type: none;
}
#body #sub .banners ul li {
width: 140px;
text-align: center;
margin: 0 20px 15px 0;
border: 1px dotted #ff328b;
padding: 10px 0;
}
#footer {
background: #68CFC3;
-webkit-box-shadow: black 0 1px 2px inset;
-moz-box-shadow: black 0 1px 2px inset;
box-shadow: black 0 1px 2px inset;
padding: 20px 0;
color: white;
}
#footer nav {
text-align: center;
padding: 0 0 20px 0;
}
#footer nav ul li {
display: inline;
}
#footer nav ul li a {
color: white;
margin: 0 6px;
}
#footer .copyright {
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment