途中経過のメモ

style.css

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 {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
  background: #eeeeee;
  color: #333333;
}

a:link {
  color: #0f99dd;
}
a:visited {
  color: #5588b2;
}
a:hover {
  color: #0c7aad;
}
a:active {
  color: #2812a5;
}

/* 以上が多分リセットCSS */


#wrap {
  width: 960px;
  margin: 20px auto;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px, white 0 0 3px inset;
  overflow: hidden;
}

#header {
  background: white;
  overflow: hidden;
}
#header h1 {
  text-align: center;
  margin: 50px 0 40px 0;
  font-size: 182%;
  font-weight: bold;
}
#header nav#global {
  background-color: #eeeeee;
  background-image: -webkit-linear-gradient(top, #eeeeee 0%, #dddddd 100%);
  border-bottom: #d9d9d9 solid 1px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 1px inset, white 0 1px 2px;
  overflow: hidden;
}
#header nav#global ul {
  float: left;
  border-right: #e9e9e9 solid 1px;
}
#header nav#global ul li {
  display: inline;
}
#header nav#global ul li a {
  display: block;
  float: left;
  padding: 0 20px;
  line-height: 50px;
  font-size: 100%;
  font-weight: bold;
  text-decoration: none;
  text-shadow: white 0 1px 0;
  border-left: #e9e9e9 solid 1px;
  border-right: #d9d9d9 solid 1px;
  color: #555555;
}
#header nav#global ul li:first-child a {
  border-left: none;
}

#about {
  padding: 10px 10px 0 10px;
}
#about ol li {
  display: block;
  height: 150px;
  float: left;
  padding: 12px;
  width: 286px;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
  background-color: white;
  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%);
  overflow: hidden;
}
#about ol li:nth-child(2) {
  margin: 0 5px;
}
#about ol li h2 {
  font-size: 138.5%;
  font-weight: bold;
  float: left;
  line-height: 150px;
  width: 85px;
  border-right: #eeeeee solid 1px;
}
#about ol li p {
  float: right;
  padding: 0 0 0 10px;
  width: 190px;
  margin: 0 0 1.2em 0;
  line-height: 1.4;
}

#body {
  clear: both;
  padding: 10px 10px 0 10px;
}

#main {
  float: left;
  width: 760px;
}
#main h2 {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.3;
  padding: 0 0 4px 0;
  margin: 0 0 10px 0;
  border-bottom: #dddddd solid 1px;
  box-shadow: white 0 1px 0;
}
#main .breadcrumbs {
  padding: 0 0 16px 0;
}
#main .breadcrumbs ol li {
  display: inline;
  font-size: 93%;
}
#main .breadcrumbs ol li a {
  text-decoration: none;
}
#main .breadcrumbs ol li a:after {
  content: " > ";
}

#articles {
  width: 580px;
  float: right;
  padding: 0 10px;
}
#articles article {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 18px 16px;
  margin: 0 0 20px 0;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px;
}
#articles article header {
  border-bottom: #dddddd solid 1px;
  padding: 0 0 4px 0;
  box-shadow: white 0 1px 0;
}
#articles article header h3 {
  font-size: 153.9%;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 6px 0;
}
#articles article header .date {
  font-size: 93%;
  color: #999999;
}
#articles article .body {
  padding: 10px 0 0 0;
  border-bottom: dotted 1px #dddddd;
}
#articles article .body p {
  font-size: 108%;
  margin: 0 0 1.4em 0;
  line-height: 1.7;
}
#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;
}
#articles article .body h5 {
  font-size: 123.1%;
  font-weight: bold;
  margin: 0 0 0.8em 0;
}
#articles article .body h6 {
  font-size: 108%;
  font-weight: bold;
  margin: 0 0 0.8em 0;
}
#articles article .body h6:before {
  content: "■";
  margin: 0 4px 0 0;
}
#articles article .body strong {
  font-weight: bold;
}
#articles article .body ul {
  list-style: square;
  margin: 0 0 1.4em 2em;
}
#articles article .body ol {
  list-style: decimal;
  margin: 0 0 1.4em 2em;
}
#articles article .body li {
  line-height: 1.6;
  margin: 0 0 0.6em 0;
}
#articles article .body table {
  margin: 0 0 1.4em 0;
}
#articles article .body table th,
#articles article .body table td {
  padding: 8px 12px;
  border: #cccccc solid 1px;
}
#articles article .body table th {
  background: #eeeeee;
  text-align: center;
  font-weight: bold;
}
#articles article .body blockquote {
  background: #eeeeee;
  text-align: center;
  padding: 10px;
}
#articles article footer {
  padding: 18px 0 0 0;
}
#articles article footer dl {
  text-align: right;
  color: #999999;
}
#articles article footer dl dt {
  display: inline;
}
#articles article footer dl dd {
  display: inline;
}

aside#comments {
  float: left;
  width: 160px;
  color: #555555;
}
aside#comments h3 {
  font-size: 93%;
  font-weight: bold;
}
aside#comments ul li {
  display: block;
  padding: 10px 0;
  border-bottom: #dddddd dotted 1px;
}
aside#comments ul li p {
  line-height: 1.4;
  font-size: 93%;
  margin: 0 0 6px 0;
}
aside#comments ul li dl {
  color: #999999;
  font-size: 77%;
}
aside#comments ul li dl dt {
  display: inline;
}
aside#comments ul li dl dd {
  display: inline;
}

#sub {
  float: right;
  width: 180px;
}
#sub .ad {
  background: #ff328b;
  height: 180px;
  border-radius: 4px;
  margin: 0 0 10px 0;
}
#sub nav#local ul {
  border-bottom: #dddddd solid 1px;
  margin: 0 0 10px 0;
}
#sub nav#local ul li a {
  display: block;
  background: #e9e9e9;
  line-height: 20px;
  padding: 20px 8px 4px 8px;
  border-top: #dddddd solid 1px;
  border-left: #dddddd solid 1px;
  border-right: #dddddd solid 1px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 1px inset;
  text-align: right;
  text-decoration: none;
}

#footer {
  clear: both;
  background: #444444;
  box-shadow: black 0px 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;
}