186(css)

2005-01-03

[] IE6.0でも大丈夫に 00:48

前回のcssと見比べると分かるかな。

paddingでは無くmarginで隙間を取らないとIEのバグで、描画されないという落ち。

後は無駄な指定を削除して、細部を詰める方向で。Safariの描画も見ないとね。色指定はW3Cの仕様に載っている色のみ(a要素以外)。

@charset "euc-jp";
/*
Title: quirky
Author: 186
Access: http://d.hatena.ne.jp/smoking186/
	  http://186.bz/
License: GPL
Comment: 
*/

/* ==================== block ==================== */
body {
 line-height: 1.4;
 margin: 20px;
 padding: 0px;
 background-color: white;
 color: black;
 font-family: 'Georgia', 'MS P明朝', 'ヒラギノ明朝', serif;
 _font-family : 'MS P明朝', 'Georgia', 'ヒラギノ明朝', serif;
 word-break: break-all; /* IE only */
 word-wrap: break-word; /* IE only */
 /* background: url('back.png'); */
}

body * {
 font-size: 100%;
 margin: 0px;
 padding: 0px;
 text-decoration: none;
}

h1 {
 text-align: left;
 font-size: 300%;
 margin: 1% 1%;
}

h2 {
 font-size: 160%;
}
h3 {
 font-size: 130%;
}
h4 {
 font-size: 120%;
}
h5 {
 font-size: 115%;
}
h6 {
 font-size: 110%;
}

p {
 text-indent: 1em;
 margin-top: 0.4em;
 margin-bottom: 0.5em;
}

blockquote {
 margin: 1em;
 padding: 10px;
 border-left: 5px dotted silver;
}

q {
 border-bottom: 1px dashed silver;
}

pre {
 margin: 1em;
 padding: 10px;
 font-family: monospace;
 background-color: silver;
 white-space: -moz-pre-wrap; /* Mozilla */
 white-space: -pre-wrap;     /* Opera 4-6 */
 white-space: -o-pre-wrap;   /* Opera 7 */
 white-space: pre-wrap;      /* CSS3 */
 word-wrap: break-word;      /* IE 5.5+ */
}

dl,ol,ul {
 margin-left: 2em;
}

dt {
 margin-left: 0em;
}

dd {
 margin-left: 2em;
}

img.photo {
 float:right;
 margin: 10px;
}

.aa {
 font-family: 'MS Pゴシック';
}

/* ==================== a ==================== */
a {color:#fa0000;}
a:link {color:#fa0000;}
a:visited {color:#af0000;}
a:hover {color:#af0000; text-decoration: underline;}
a:active {color:#af0000;}

/* ==================== table ==================== */
td font {font-size: 80%;}
td font font {font-size: 100%;}

/* ==================== day ==================== */
.day {
 margin-bottom: 3em;
 border-left: 1px solid black;
 border-right: 1px solid black;
 margin: 0px 15px 3em 15px;
 padding: 0px 0px 10px 0px;
}

.day h2 {
 border-bottom:1px solid black;
 margin: 0px -15px 0px -15px;
 padding: 0px 20px 0px 20px;
}

.date , .timestamp {
 font-family: 'Georgia', 'MS P明朝', 'ヒラギノ明朝', serif;
}

.timestamp {
 margin-left: 1em;
 font-size:90%;
}

.body {
 margin: 10px -20px 5px -20px;
 padding: 0px 25px 0px 25px;
 /* border-top: 1px solid black; */
 border-bottom: 1px solid black;
}

.section {
 font-size: 95%;
 margin: 0px 10px 1em 10px;
}

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

div.footnote {
 margin: 5px -20px 0px -20px;
 padding: 5px 25px 0px 45px;
 border-top: 1px solid black;
 font-size: 80%;
 clear: both;
}

p.footnote {
 text-indent: -1.6em;
}

.comment {
 margin: 5px -20px 5px -20px;
 padding: 5px 25px 5px 25px;
 /* border-top: 1px solid black; */
 border-bottom: 1px solid black;
 clear: both;
}

form .comment {
 border-bottom: 0px;
}

.commentshort p {
 text-indent: 0em;
 font-size: 95%;
}

.refererlist {
 font-size: 90%;
 margin: 0px -20px 10px -20px;
 padding: 5px 25px 5px 25px;
 border-bottom: 1px solid black;
}
.refererlist ul li {
 list-style-type: none;
}

div.calender {
 font-size: 90%;
}

/* ==================== main ==================== */
.hatena-body {
 margin: 0px; padding: 0px;
 position: relative;
 top: 0px; left: 0px;
 width: auto;
}

* html .hatena-body {
 width: 100%;
 padding: 0px 1%;
}

.hatena-body .main {
 width: 80%;
 margin: 0px 0px 0px 0px;
}

.hatena-body .sidebar {
 width: 18%;
 position: absolute;
 top: 0px; right: 0px;
}

/* ==================== edit ==================== */
form p.footnote {text-indent: 0em;}

/* ==================== sidebar ==================== */

/* ==================== module ==================== */
table.calendar td a img {
 width: 13px;
 height: 13px;
}

.sidebar ul {
 padding: 0em;
 margin: 0em;
 padding-left: 10px;
}

.sidebar ul li {
 list-style-type: none;
}

.hatena-module {
 margin-bottom: 20px;
}
.hatena-moduletitle {}
 .hatena-moduletitle a {
  color: black;
}
.hatena-modulebody {
 font-size: 90%;
}

.hatena-profile-image img {
 max-width: 100%;
 _width: 90%;
}
トラックバック - http://css.g.hatena.ne.jp/smoking186/20050103

2004-12-28

[] quirky

酷い名前だよなぁ。もう一寸いい名前あるよなぁ。

で、相変わらずIEで不具合が(藁 修正法を思いついたら、直しましょ。

@charset "euc-jp";
/*
Title: quirky
Author: 186
Access: http://d.hatena.ne.jp/smoking186/
	  http://186.bz/
License: GPL
Comment: 
*/

/* ==================== block ==================== */
body {
 line-height: 1.4;
 margin: 20px;
 padding: 5px;
 background-color: white;
 color: black;
 font-family: 'Georgia', 'MS P明朝', 'ヒラギノ明朝', serif;
 _font-family : 'MS P明朝', 'Georgia', 'ヒラギノ明朝', serif; /* IE only */
 word-break: break-all; /* IE only */
 word-wrap: break-word; /* IE only */
}

body * {
 font-size: 100%;
 margin: 0px;
 padding: 0px;
 text-decoration: none;
}

h1 {
 text-align: left;
 font-size: 300%;
 margin: 1% 1%;
}

h2 {
 font-size: 160%;
}
h3 {
 font-size: 130%;
}
h4 {
 font-size: 120%;
}
h5 {
 font-size: 115%;
}
h6 {
 font-size: 110%;
}

p {
 text-indent: 1em;
 margin-top: 0.4em;
 margin-bottom: 0.5em;
}

blockquote {
 margin: 1em;
 padding: 10px;
 border-left: 5px dotted silver;
}

q {
 border-bottom: 1px dashed silver;
}

pre {
 margin: 1em;
 padding: 10px;
 font-family: monospace;
 background-color: silver;
 white-space: -moz-pre-wrap; /* Mozilla */
 white-space: -pre-wrap;     /* Opera 4-6 */
 white-space: -o-pre-wrap;   /* Opera 7 */
 white-space: pre-wrap;      /* CSS3 */
 word-wrap: break-word;      /* IE 5.5+ */
}

dl,ol,ul {
 margin-left: 2em;
}

dt {
 margin-left: 0em;
}

dd {
 margin-left: 2em;
}

img.photo {
 float:right;
 margin: 10px;
}

.aa {
 font-family: 'MS Pゴシック';
}

/* ==================== a ==================== */
a {color:#fa0000;}
a:link {color:#fa0000;}
a:visited {color:#af0000;}
a:hover {color:#af0000; text-decoration: underline;}
a:active {color:#af0000;}

/* ==================== table ==================== */
td font {font-size: 80%;}
td font font {font-size: 100%;}

/* ==================== day ==================== */
.day {
 margin-bottom: 4em;
 border-left: 1px solid black;
 border-right: 1px solid black;
 padding: 0px 10px 10px;
}

.day h2 {
 border-bottom:1px solid black;
 margin: 0px -20px 0px -20px;
 padding: 0px 20px 0px 20px;
}

.timestamp {
 margin-left: 1em;
 font-size:90%;
}

.body {
 margin: 10px -20px 5px -20px;
 padding: 0px 25px 0px 25px;
 border-bottom: 1px solid black;
}

.section {
 font-size: 95%;
 margin-bottom: 1em;
}

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

div.footnote {
 margin: 5px -20px 0px -20px;
 padding: 5px 15px 0px 45px;
 border-top: 1px solid black;
 font-size: 80%;
}

p.footnote {
 text-indent: -1.6em;
}

.comment {
 margin: 5px -20px 5px -20px;
 padding: 5px 25px 5px 25px;
 border-bottom: 1px solid black;
}

form .comment {
 border-bottom: 0px;
}

.commentshort p {
 text-indent: 0em;
 font-size: 95%;
}

.refererlist {
 font-size: 90%;
 margin: 0px -20px 10px -20px;
 padding: 5px 25px 5px 25px;
 border-bottom: 1px solid black;
}
.refererlist ul li {
 list-style-type: none;
}

div.calender {
 font-size: 90%;
}

/* ==================== main ==================== */
.hatena-body {
 margin: 0px; padding: 0px;
 position: relative;
 top: 0px; left: 0px;
 width: auto;
 max-width: 800px;
}

* html .hatena-body {
 width: 100%;
 padding: 0px 1%;
}

.hatena-body .main {
 width: 80%;
 _width: 100%;
 margin: 0px 20% 0px 0px;
}

.hatena-body .sidebar {
 width: 17%;
 position: absolute;
 top: 0px; right: 0px;
 max-width: 200px;
}

/* ==================== edit ==================== */
form p.footnote {text-indent: 0em;}

/* ==================== sidebar ==================== */

/* ==================== module ==================== */
table.calendar td a img {
 width: 13px;
 height: 13px;
}

.sidebar ul {
 padding: 0em;
 margin: 0em;
 padding-left: 10px;
}

.sidebar ul li {
 list-style-type: none;
}

.hatena-module {
 margin-bottom: 20px;
}
.hatena-moduletitle {}
 .hatena-moduletitle a {
  color: black;
}
.hatena-modulebody {
 font-size: 90%;
}
トラックバック - http://css.g.hatena.ne.jp/smoking186/20041228