(id:mu-gi)

紺色と白を基本にして作成してみました。かなりのんびりと作業を進めていったからかもしれないんだけど、勢いみたいなのが全然なくなってしまった。勢いでウヤムヤにしてしまうところをキッチリやれたので良かった部分と、どこをどうやってもしっくりこない、あげくの果てには最初から全く違う形で作り直そうか？という心理が働いてきたので、結局、それが良かったのか悪かったのかよくわかりませんでした。でも最初は「これはかっこいい作品になるぜ！」っていう気持ちは間違いなくあった。
あと、作り始める前にやはりテーマとか最終的なイメージを持っておくことは大切だと思った。それを意識しながら組立てを行うことで、意味のしっかりしたCSSの組立てが出来ると思う。次回からは、手を付ける前に熟考して、実施の手を動かす作業を最小限に抑えるような形でやっていきたいと思いました。

html {
margin: 0px;
padding: 0px;
}



body {
font-size: 80%;
font-family: Verdana, Osaka, sans-serif;
line-height: 1.5;
text-align: center;
letter-spacing: 0.1em;
color: #333;
margin: 0 auto;
padding: 0px;
background-color: #fff;
word-break: break-all ;
word-wrap: break-word ;
}

/********************** header **********************/  

table
{
margin: 0px auto;
width: 100%;
}

td
{
background-color : transparent;
width: auto;
margin: 0;
padding: 0px 0px;
}

table table td{
background-color : transparent;
margin: auto;
padding: auto;
vertical-align: bottom;
}

table table{
margin: 0px;
padding: 0px 0px 0px 5px;
border: none;
width: 100%;
}


table table td{
font-size: 80%x;
}

table table td font,
table table td a{
border:none;
font-size: 11px;
}

td a{
border: 0;
}

table input{
height: 18px;
border: 1px solid #DDDDDD;
}


.hatena-body table{
width: auto;
margin: 0;
padding:0px;
border: 0;
background-image: none;
background-color : transparent;
}

h1,
h1 a{
border: none;
color: #EBEDFF;
font-size: 15px;
letter-spacing: 0em;
}

h1 a:hover{
color: #F3F7F9;
}

h1 {
font-weight: bold;
text-align: left;
line-height: 1.2;
padding: 50px 25px;
margin: 30px auto 0px;
width: 712px;
_width: 762px;
background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20060706/20060706004001.gif");
background-repeat: no-repeat;
background-position: center top;
}

.hatena-body{
margin: 0px auto;
position: relative;
padding: 0px;
text-align: left;
width: 762px;
background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20060706/20060706004000.gif");
background-repeat: repeat-y;
background-position: center top;
}

.hatena-body:after{
content:"";
display:block;
clear:both;
border-bottom: 1px solid transparent;
}



.main{
float: left;
clear: right;
width: 539px;
margin: 0px;
padding: 10px 0px 95px 0px;
text-align: center;
background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20060706/20060706003959.gif");
background-repeat: no-repeat;
background-position: left bottom;
}



.day {
width: auto;
_width: 100%;
margin: 0px;
padding: 0px 19px 30px 7px;
text-align:left;
}


h2,
h2 a{
border: none;
padding: 5px 0px;
color: #8D8D9F;
}

h2 {
font-size: 10px;
font-weight: normal;
text-decoration:none;
width: auto;
_width: 100%;
margin: 0px;
padding: 1px 0px;
text-align: right;
line-height: 1;
}


span.date{
font-size: 100%;
padding: 0;
}

span.title{
font-size: 100%;
font-weight: normal;
}

.body {
padding: 0px;
margin: 0px;
}

.section{
width: auto;
margin: 0px;
padding: 0px 10px 5px;
}


h3,
h3 a,
h3 a.keyword {
border: none;
color: #E8ECEF;
font-weight: bold;
}

h3 {
width: auto;
font-size:100%;
font-weight: bold;
margin: 0px -9px 30px -9px;
padding: 2px 25px;
text-align:left;
line-height: 1.5;
border-bottom: 1px solid #AAAAAA;
background-color: #E0E1EA;
background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20060715/20060715080819.png");
background-repeat: repeat-x;
background-position: center bottom;
}


a.sectioncategory{

}

span.sanchor{
color: #E8ECEF;
font-size: 13px;
margin: 0px 5px;
padding: 0px;
}

span.timestamp{
font-size:70%;
font-weight: normal;
letter-spacing: 0px;
}

.section p {
margin: 0.3em 16px;
text-align:left;
padding: 0px;
}

p.sectionfooter {
font-size: 11px;
margin: 30px -8px 0px -9px;
padding: 0px 10px;
color: #9EB3B3;
text-align: right;
border-top: 1px solid #D0D3D3;
border-bottom: 1px solid #D0D3D3;
background-color: #fff;
background-image: url("http://f.hatena.ne.jp/images/fotolife/d/design_note/20060715/20060715080818.png");
background-repeat: repeat;
background-position: center;
}

p.sectionfooter a{
color: #9EB3B3;
text-decoration: none;
}

p.sectionfooter img{
vertical-align: middle;
}


/**************** about page *************************/  


#hatena-about h2 {
text-align:left;
margin: 0px 20px 5px;
font-weight: bold;
font-size: 20px;
}

#hatena-about h3 {
margin: 0px 214px 10px -9px;
}

#hatena-about p{
margin: 0px 230px 10px 10px;
}

#hatena-about img{
margin: 0px -8px 5px 0px;
}

#hatena-about ul {
margin: 0px 220px 10px 10px;
list-style-type: none;
}

ul.hatena-profile-list li {
display: inline;
}

/**************** decoration *************************/  

a{
text-decoration: none;
color: #333;
}

a.keyword,
a.okeyword {
text-decoration: none;
border-bottom: 1px solid #E6E8F0;
color: #333;
}

a img{
border: none;
}

a:link { }

a:visited { }

a:hover {
text-decoration: none;
border: none;
color: #eee;
}

a:active {
color: #16DD45;
}

h4 {
font-size:100%;
font-weight: normal;
padding: 0 0 0 17px;
margin: 1em 0px;
text-align:left;
border-bottom: 1px solid #E8E8D7;
}

blockquote{
margin: 10px 0px;
padding: 5px 10px;
overflow: hidden;
border: 1px solid #E8E8D7;
background-color: #F0F0EF;
}

blockquote a{
color: #A8002F;
border: none;
}



.section blockquote p{
margin: 0.5em;
padding: 0;
}

cite a{
border: none;
color: #000000;
}

cite{
font-weight: normal;
font-style: normal;
font-size: 10px;
padding: 0px 5px;
float:right;
}


pre {
color: #000000;
margin: 10px 2px;
padding: 10px 15px 5px;
overflow: auto;
border: 3px double #E8E8D7;
background-color: #F0F0EF;
}

font{
line-height: 1.2em;
}

em a{
border: none;
color: #000000;
}

em{
font-weight: normal;
font-style: normal;
}

ins a{
border: none;
}

ins{
text-decoration: none;
border-bottom: solid 1px #84888B;

}


.day td{
padding: 5px 5px 5px 7px;
margin: 0;
background-color: #E4E4F5;
border: solid 1px #222293;
}

.day th{
padding: 5px 5px 5px 7px;
margin: 0;
border: solid 1px #222293;
background-color: #B0B0FF;
font-weight: normal;
}

.day table{
margin: 10px 0;
font-size: 100%;
border: none;
border-collapse: collapse;
text-align: center;
border: solid 1px #222293;
}

.hatena-module input {
margin: 0px 2px;
border: 1px solid #BAAD8F;
}

/************************* list **********************/  

.section ul{
margin: 1em 15px 1em 25px;
padding: 0;
}

.section ol{
margin: 1em 15px 1em 30px;
padding: 0;
}

.section ul li,
.section ol li,
.section ol ul,
.section ol ol,
.section ul ul,
.section li li {
margin: 0 0 0 8px;
padding: 0;
}



.section dl{
margin: 10px 15px;
}

.section dt{
font-weight: normal;
}

.section dd{
}


/********************** img ***************************/  

img.photo{
float: right;
border: solid 1px #D1CAB2;
margin: 50px 15px 5px 5px;
padding: 1;
}

img.hatena-fotolife{
border: none;
padding: 1px;
border: 1px solid #D8D8D8;
background-color: #E3E2EE;
}


.body img.asin{
float: right;
margin: 5px 0px 5px 10px;
padding: 0;
border: solid 1px #D1CAB2;
}

/********************* footnote **********************/  

span.footnote{
font-size: 80%;
}

span.footnote a{
border: 0;
}


div.footnote{
padding: 0px 20px;
margin: 0px;
}

p.footnote{
margin: 3px 0px;
font-size: 85%;
}

p.footnote a{
border: none;
}

/********************** comment ***********************/  

div.comment,
div.refererlist {
_width: 100% ;
font-size: 85%;
padding: 0px 5px;
margin: 0px;
}

div.refererlist {
text-align: right;
}


div.refererlist ul{
margin: 0 5px;
padding: 0;
list-style-type: none;
letter-spacing: 0px;
}

form div.refererlist ul{
font-size: 100%;
letter-spacing: 1px;
}

div.caption,
div.caption a{
color: #A29F8E;
}



div.caption{
padding: 0;
margin: 0;
text-align: right;
}

div.refererlist div.caption{
}

form div.refererlist div.caption{
padding: 0 0.5em;
margin: 0;
}



div.refererlist div.caption a{
border: none;
}

div.commentshort{
margin: 0px;
padding: 0px;
}

div.commentshort textarea{
width: 90%;
height: 10em;
}

span.canchor{
display: none;
}

div.commentshort a{
border: none;
}

div.commentshort a:hover{

}



span.commentator{
font-weight: normal;
margin: 5px 0px;
padding: 2px 15px;
display: block;
border: 1px solid #C6CCCC;
}

form span.commentator{
margin: 0px -15px 10px;
}

div.commentshort P {
margin: 5px 0px;
padding: 5px 15px;
letter-spacing: 0px;
}

/******************asin detail***********************/  

div.hatena-asin-detail {
width: auto;
margin: 0px;
padding: 10px;
border: 1px solid #9999D1;
font-size: 100%;
}

div.hatena-asin-detail a{
}

div.hatena-asin-detail a:hover{
border: none;
}

img.hatena-asin-detail-image {
float: left;
border: 0;
margin: 0 20px 0 0 ;
height: 110px;
border: solid 1px #fff;
background-color: #FECDCE;
}

div.hatena-asin-detail-info{
float: left;
margin: 0px;
word-break: break-all;
}

.section p.hatena-asin-detail-title{
text-align: left;
font-weight: normal;
padding: 3px 10px 0px;
margin: 0px;
border-bottom: dashed 1px #9999D1;
}

div.hatena-asin-detail-info ul {
list-style-type: none;
font-size: 80%;
margin: 0;
padding: 5px 10px;
}


div.hatena-asin-detail-info li {
margin: 0;
padding: 0;
}


div.hatena-asin-detail p a{
border: 0;
}

div.hatena-asin-detail-foot {
clear: left;
}


/************************ form **********************/  

form{
margin: 0;
padding: 0;
}

form.hatena-searchform{
margin: 5px 0;
}



div.day div.comment form{
margin: 0;
padding: 0;
}

form h2,
form div.body{
padding: 1em 1.5em;
width: auto;
}
form h2{
margin: 15px 20% 0 0;
font-size: 120%;
padding: 5px 15px;
color: #000000;
}

form h2 span.date,
form h2 span.title{

border: none;
display: inline;
margin: 0;
padding: 5px 15px;
}

form textarea{
width: 90%;
}

form h3{
display: block;
margin: 2em 0 1em 0;
padding: 0;
border-bottom: solid 1px #000000;
font-size: 100%;
}



/********************** sidebar ***********************/  

.sidebar {
float: left;
clear: right;
width: 207px;
padding: 38px 0px;
margin: 0px;
font-size: 80%;
text-align: center;
color: #8B8BA6;
}

.sidebar a{
color: #8B8BA6;
}

.sidebar a:hover{
color: #16295E;
}

.hatena-module{
margin: 0px;
padding: 0px 0px 10px;
width: 100%;
border: none;
text-align: center;
float: left;
background-color: #FBFBFF;
}


.hatena-moduletitle,
.hatena-moduletitle a{
border: none;
}

.hatena-moduletitle{
text-align: right;
font-size: 13px;
letter-spacing: 0px;
font-weight: normal;
padding: 5px 3px;
margin: 0px;
letter-spacing: 0px;
line-height: 1;
border-top: 4px double #fff;
border-bottom: 4px double #fff;
background-color: #E2E7F0;
}

.hatena-modulebody{
padding: 10px 4px;
margin: 2px 0px 0px;
_width:100%;
border: none;
background-color: #FAFAFA;
}





/********************** sideber li **********************/  


.hatena-modulebody ul{
padding: 0px;
margin: 0px;
text-align: left;
list-style-type: none;
}

.hatena-modulebody li {
display: block;
margin: 4px 0px;
}

.hatena-modulebody li a{
padding: 2px 5px;
line-height: 1.1;
}

.hatena-modulebody li a:hover {
}


/******************* profile module *******************/  

.hatena-profile {
}

.hatena-profile img{
padding: 0px;
margin: 0px 0px 3px;
border: 1px solid #808059;
}

.hatena-profile-id a{
font-size: 100%;
padding: 2px;
margin: 0px;
width: auto;
}

.hatena-profile-body {
padding: 2px;
margin: 5px 0px;
}

/******************* photo module *******************/  


ul.hatena-photo{
padding: 0;
margin: 0;
width: auto;
list-style-type: none;
text-align: center;
}

ul.hatena-photo li{
display: inline;
}

ul.hatena-photo li a{
margin: 0;
padding: 0;
display: inline;
text-align: center;
border: none;
}

ul.hatena-photo li img{
width: 40px;
}

ul.hatena-photo li a img{
border: 1px solid #CFCFCF;
}

ul.hatena-photo li a:hover img{
border: 1px solid #000046;
}

/******************** sectioncategory ***********************/  


ul.hatena-sectioncategory li a{
display: block;
height: 12px;
margin: 1px 0px;
padding: 2px 10px;
border: 1px solid #CFCFCF;
background-color: #FFFFFF;
}

ul.hatena-sectioncategory li a:hover {
color: #fff;
border: 1px solid #000046;
background-color: #000076;
}

/******************** hatena-section ***********************/  

ul.hatena-section li a{
display: block;
height: 12px;
margin: 1px 0px;
padding: 4px 3px;
border: 1px solid #CFCFCF;
background-color: #FFFFFF;
}

ul.hatena-section li a:hover {
color: #fff;
border: 1px solid #000046;
background-color: #000076;
}


/******************** asin log ***********************/  

ul.hatena-asinlog{
padding: 0px;
margin: 0px;
width: auto;
list-style-type: none;
text-align: center;
}

ul.hatena-asinlog li{
margin: 0 1px;
padding: 0;
display: inline;
width: auto;
}

ul.hatena-asinlog li img{
width: 40px;
}

ul.hatena-asinlog li a{
padding: 0;
text-align: center;
border: none;
}

ul.hatena-asinlog li a:hover{
background-color: transparent;
border: none;
}

ul.hatena-asinlog li a img{
}

ul.hatena-asinlog li a:hover img{
}


/********************* rss module *********************/  

div.hatena-modulebody dd{
margin: 0;
}




/********************** calender **********************/  

div.calendar {
font-size:70%;
margin: 0px;
}

.main div.calendar {
font-size:80%;
margin: 0px 15px;
padding: 0px;
text-align: right;
position: static;
color: #919191;
}

div.calendar a{
border: none;
color: #919191;
}


/********************** calendar2 **********************/  

table.calendar{
font-size: 11px;
letter-spacing: 0px;
width: 100%;
margin: 0;
padding: 0;
border: none;
color: #8B8BA6;
text-align: center;
position: relative;
background-color: #EFEFFF;
}

table.calendar a{
color: #8B8BA6;
}

td.calendar-current-month{
font-weight: normal;
}

td.calendar-prev-month,
td.calendar-current-month,
td.calendar-next-month{
text-align: centerr;
border: 1px solid #CFCFCF;
background-color: #fff;
}

td.calendar-current-month{
font-weight: normal;
}

td.calendar-prev-month,
td.calendar-current-month,
td.calendar-next-month{
text-align:center;
}

td.calendar-day {
border: 1px solid #CFCFCF;
background-color: #FFFFFF;
}

td.calendar-day a{
display: block;
_width: 100%;
color: #fff;
border: 1px solid #000046;
background-color: #000076;
}

td.calendar-day a:hover{
background-color: #E7E7FF;
color: #000046;
}

td.calendar-weekday,
td.calendar-sunday,
td.calendar-saturday{
display:none;
}

td.calendar-day img {
width: 12px;
height: 12px;
border: 0;
}

/************************ adminmenu ****************************/  

div.adminmenu{
text-align: right;
margin: 0 0 0 50px;
font-size: 80%;
padding: 5px 10px;
width: 650px;
border: none;
color: #000000;
}

div.adminmenu a{
border: none;
color: #3F2F15;
}

span.adminmenu{
margin: 0 2px;
}

.hatena-body div.adminmenu{
margin: 0;
text-align: left;
border: none;
width: auto;
padding: 5px 10px;
}

/*********************/  

span.highlight {
background-color: #A40700;
padding: 0px;
}

div.footer{
padding: 10px;
text-align: center;
}

.footer,
.footer a{
color: #000000;
border: none;
}