Hatena::Groupcss

つみきスタイル このページをアンテナに追加 RSSフィード

1000.0.08nn black

[]いかにしてエントリーをすっきり並べるか いかにしてエントリーをすっきり並べるか - つみきスタイル を含むブックマーク はてなブックマーク - いかにしてエントリーをすっきり並べるか - つみきスタイル いかにしてエントリーをすっきり並べるか - つみきスタイル のブックマークコメント

id:Cormorant:10000002






[]nn black nn black - つみきスタイル を含むブックマーク はてなブックマーク - nn black - つみきスタイル nn black - つみきスタイル のブックマークコメント

/* :::::::::: nn black :::::::::: */


/* ---------- whole ----------------------------------------------- */

* {
	margin: 0;
	padding: 0;

	word-break: break-all ;
	word-wrap: break-word ;

	-moz-box-sizing: border-box ;
	box-sizing: border-box ;
}

body {
	color: #fff;
	background: #333;

	font-size: 80%;
	font-family: Tahoma, Verdana, Arial, "MS PGothic", Osaka, sans-serif;
	_font-family: Verdana, Arial, "MS PGothic", Osaka, sans-serif;
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-align: center;
}

table,
input,
select,
textarea {
	font-family: Tahoma, Verdana, Arial, "MS PGothic", Osaka, sans-serif;
	_font-family: Verdana, Arial, "MS PGothic", Osaka, sans-serif;
	line-height: 1.1;
	letter-spacing: inherit;
}

table {
	color: inherit;

	font-size: inherit;
	*font-size: 100%;
}

input,
select,
textarea {
	color: #333;

	font-size: 10pt;
}

input[type="submit"],
input[type="button"] {
	padding: 0.05em 0.3em;
}

*+html>/**/body select {
	padding: 0.2em;
}

body*select {
	padding: 0;
}

textarea {
	width: 90%;
	height: 11em;
}

img {
	border: none;
}

br {
	letter-spacing: 0;
}

p {
	margin: 0 0 1em;
}

hr {
	display: block;

	margin: 0.6em 0;
	height: 2px;
}


/* ---------- header ---------------------------------------------- */

table {
	margin: 0 auto 4em;
	width: 100%;

	background: #6b6e7a;

	border-bottom: 1px solid #474a54;
}

table table {
	margin: 0 0 0.3em 1em;
	*margin-bottom: 0.5em;
	width: 98%;

	background: transparent;

	border: none;
}

table td {
	background: transparent;
}

table font,
table a,
table a:hover {
	color: #a6a9b2;
	background: transparent;
}

table font {
	font-size: 90%;
}

table font a font {
	font-size: 100%;
}

div#banner {
	background: #6b6e7a;

	text-align: left;

	border: none;
}

div#bannersub {
	margin: 0 auto 4em;
	padding-bottom: 0.3em;
	*padding-bottom: 0.5em;

	color: #a6a9b2;
	background: #6b6e7a;

	text-align: center;

	border-bottom: 1px solid #474a54;
}

div#bannersub table {
	margin: 0;
}

div#bannersub td {
	text-align: center;
}

div#bannersub td,
div#bannersub td a,
div#bannersub td a:hover {
	color: #a6a9b2;
	background: transparent;

	text-decoration: none;
}


/* ---------- title ----------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

h1 {
	margin: 0 auto;
	padding-left: 0.2em;
	width: 720px;

	font-weight: normal;
	text-align: left;
	letter-spacing: 0.5em;

	border-bottom: 1px solid #fff;
}

h1 a {
	color: #fff;

	text-decoration: none;
}

#menu {
	margin: 0 auto 4em;
	padding-right: 1em;

	font-size: 90%;
	text-align: right;
	text-transform: uppercase;

	list-style: none;
}

#menu li {
	margin-left: 1em;
	display: inline;
}

#menu li a {
	color: #fff;
}

#menu li a:hover {
	color: #ff0;
}


/* ---------- multi column ---------------------------------------- */

.hatena-body,
.update.day {
	margin: 0 auto;
	width: 720px;

	text-align: left;
}

.main:before {
	content: "diary";
	display: block;

	margin: 4em 0 1.5em;
	padding-left: 0.2em;
	width: 100%;

	letter-spacing: 0.5em;
	text-transform: capitalize;

	border-bottom: 1px solid #fff;
}

.sidebar {
	margin-bottom: 1.5em;
}
.sidebar:before {
	content: "menu";
	display: block;

	margin: 0 0 1em;
	padding-left: 0.2em;
	width: 100%;

	letter-spacing: 0.5em;
	text-transform: capitalize;

	border-bottom: 1px solid #fff;
}

.sidebar .bar {
	margin: 1em 0;

	background: url("http://f.hatena.ne.jp/images/fotolife/C/Cormorant/20070114/20070114183928.gif") repeat top center;
}

.sidebar .bar:after,
.sidebar .clear {
	content: " ";
	display: block;
	height: 1px;

	clear: both;
	overflow: hidden;
}

.sidebar .clear {
	display: none;
	*display: block;
}


/* ---------- diary ----------------------------------------------- */

div.day {
	margin: 4em 0 5em;
}

h2, .recentitem_diary {
	margin: 0 0 1em;
	padding-right: 0.2em;
	height: 1.5em;
	position: relative;

	font-weight: normal;
	letter-spacing: 0.3em;
	text-align: right;

	border-bottom: 1px solid #fff;
}

h2 a {
	z-index: 3;
}

h2 a span.date {
	color: #fff;

	font-family: "Comic Sans MS", Georgia, Tahoma, sans-serif;
	text-decoration: none;
}

h2 a:hover span.date {
	color: #ff0;
}

h2 span.title {
	position: absolute;
	bottom: 0; left: 0.2em;

	text-align: left;

	z-index: 2;
}

h2 a.edit {
	color: #dd3;

	font-size: 90%;
	text-decoration: none;

	z-index: 1;
}

div.body {
}

img.photo {
	margin: 0 0 1em 1em;
	float: right;
}

div.section {
	margin: 0 0 1em 200px;
	padding: 0 0.5em 0 1em;
	min-height: 5em;
	*min-height: 0;
	position: relative;

	border-left: 1px solid #ccc;
	border-bottom: 1px solid transparent;
	_border-bottom-color: #333;
}

div.section p {
}

h3 {
	padding: 0.2em 1em 0;
	width: 200px;
	position: absolute;
	right: 520px;

	font-weight: normal;
	line-height: 1.5;

	overflow: hidden;
}

h3 a span.sanchor {
	height: 15px;
	display: block;

	color: #333;
	background: transparent;

	font-size: 1px !important;
	line-height: 1px;
	text-indent: -9999px;
	text-decoration: none;

	border: 1px solid #fff;
}

h3 a:hover span.sanchor,
h3 a:focus span.sanchor {
	color: #ff0;
	background: #ff0;
}

h3 a.sectioncategory,
h3 a.sectioncategory:hover {
	color: #fff;
	background: transparent;
}

h3 span.timestamp {
	font: 90%/1.8 "Comic Sans MS", Georgia, Tahoma, sans-serif;
}

h3 img {
	vertical-align: middle;
}

h4 {
	margin: 0 0 1em;
	padding-left: 0.8em;

	font-weight: bold;

	border-left: 2px solid #ff0;
	border-bottom: 1px solid transparent;
	_border-bottom-color: #333;
}

h5 {
	margin: 0 0 1em;
	padding-left: 0.8em;

	font-weight: bold;

	border-left: 2px solid #b9b8b4;
	border-bottom: 1px solid transparent;
	_border-bottom-color: #333;
}

h6 {
	margin: 0 0 1em;
	padding-left: 0.8em;

	font-weight: normal;

	border-left: 2px solid #b9b8b4;
	border-bottom: 1px solid transparent;
	_border-bottom-color: #333;
}

.sectionfooter {
	margin: 2em 0 1em;
}


/* ---------- decoration ------------------------------------------ */

a {
	color: #dd3;
	background: transparent;

	text-decoration: none;
}

a:hover {
	color: #ff0;
	background: transparent;
}

a:active {
	color: #999;
	background: transparent;
}

a.keyword,
a.okeyword {
	color: #fff;
	background: transparent;

	text-decoration: none;
}

a.keyword:hover {
	color: #fff;
	background: transparent;

	text-decoration: underline;
}

a.okeyword:hover {
	color: #999;
	background: transparent;

	text-decoration: underline;
}

a.keyword:active,
a.okeyword:active {
	color: #999;
	background: transparent;

	text-decoration: underline;
}

blockquote {
	margin: 0 0 1.5em;
	padding: 1em;

	color: #989793;

	border-left: 3px double #989793;
	border-bottom: 1px solid transparent;
	_border-bottom-color: #333;
}

blockquote p {
	margin: 0;
}

blockquote a.keyword,
blockquote a.okeyword {
	color: #989793;
}

blockquote h5,
blockquote h6 {
	border-left-color: #989793;
	_border-bottom-color: #333;
}

q {}

cite {}

blockquote cite {
	margin: 0.5em 0 0;
	display: block;
}

q cite {}

pre {
	margin: 0 0 1.5em;
	padding: 1em;
	max-height: 40em;

	font: 100%/1.1 Georgia, "MS PGothic", Osaka, sans-serif;

	color: #fff;
	background: #6b6e7a;

	overflow: auto;
}

pre a.keyword,
pre a.okeyword {
	color: #fff;
}

pre h5,
pre h6 {
	border-left-color: #fff;
	_border-bottom-color: #6b6e7a;
}

del {
	color: #aaa;
	text-decoration: line-through;
}

ins {
	text-decoration: underline;
}

em,
em * {
	color: #333;
	background: #dd3;

	font-style: normal;
}

strong,
strong * {
	font-weight: bold;
}

.highlight {
	color: #333;
	background: #ff0;
}

div.ascii-art {
	margin: 0 0 1.5em;
	letter-spacing: 0;
	overflow: auto;
}


/* ---------- list ------------------------------------------------ */

.section ul,
.section ol {
	margin: 0 0 1.2em 1.8em;
}
.section dl {
	margin: 0 0 1.2em;
}
.section ul ul,
.section ul ol,
.section ul dl,
.section ol ul,
.section ol ol,
.section ol dl,
.section dl ul,
.section dl ol,
.section dl dl {
	margin: 0 0 0 1.8em;
}
.section li {
	margin: 0 auto 0 0;
}
.section dt {
	font-weight: bold;
}
.section dd {
	margin: 0.5em 0 0.5em 1em;
	padding: 1em;

	color: #989793;
	background: transparent;
}


/* ---------- table ----------------------------------------------- */

.section table {
	margin: 0 0 1.2em;
	padding: 0;
	width: auto;

	background: transparent;

	text-align: left;

	border: 3px double #989793;
	border-collapse: collapse;
}
.section caption {}
.section thead {}
.section tbody {}
.section tfoot {}
.section colgroup {}
.section tr {}
.section td {
	padding: 5px;

	border: solid 1px #989793;
}
.section th {
	padding: 5px;

	text-align: center;
	font-weight: bold;

	border: solid 1px #989793;
}

.section table a {
	color: #dd3;
	background: transparent;

	font-style: inherit;
	font-variant: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.section table a:hover {
	color: #ff0;
	background: transparent;
}

.section table a:active {
	color: #999;
	background: transparent;
}


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

.section img.asin {
	margin: 0 1em 1em 0.5em;
	float: left;
}

.hatena-module img.asin {
	margin: 0;
	float: none;
}

div.hatena-asin-detail {
	margin: 0 0 1.5em;
	padding: 1em;
	width: 100%;
	clear: both;

	border: 1px solid #989793;
}

img.hatena-asin-detail-image {
	margin-left: 1.5em;
	float: right;
}

div.hatena-asin-detail-info {
	float: right;

	text-align: right;
}

p.hatena-asin-detail-title {
	margin: 1em 0;

	font-weight: bold;
}

div.hatena-asin-detail-info ul {
	list-style: none;
}

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


/* ---------- question detail ------------------------------------- */

table.hatena-question-detail {
	width: auto;
}

th.hatena-question-detail-title {
	font-weight: bold;
}

th.hatena-question-detail-title a {
	color: #989793;
}


/* ---------- superpre syntax highlight --------------------------- */

.synSpecial	{ color: #ff0; }
.synType	{ color: #fff; }
.synComment	{ color: #8bd; }
.synPreProc	{ color: #ff0; }
.synIdentifier	{ color: #fa0; }
.synConstant	{ color: #333; }
.synStatement	{
	color: #e0e0e0;
	font-weight: bold;
}


/* ---------- ukulele --------------------------------------------- */

.uke_transposition {
	margin: 0;
	padding: 0;
	display: inline;

	color: #333;
}


/* ---------- footnote/referer/trackback -------------------------- */

span.footnote a:before {
	content: "[";
}

span.footnote a:after {
	content: "]";
}

div.footnote {
	margin: 0 0 1em 200px;
	padding: 1em 0.5em 1em 1em;
	width: 520px;

	font-size: 90%;

	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

p.footnote {
	margin: 0 0 0.2em 2.25em;
	text-indent: -2em;
	_text-indent: -2.25em;
}

.refererlist {
	margin: 1em 0;
	padding: 0 1em 0.5em 3em;
	clear: both;

	font-family: Verdana, "MS PGothic", Osaka, sans-serif;

	border-bottom: 3px double #ccc;
}

.refererlist .caption {}
.refererlist .caption a,
.refererlist .caption a:hover,
.refererlist .caption a:active {
	color: #fff;
	background: transparent;
	text-decoration: none;
}

.refererlist ul li {
	margin-bottom: 0.2em;
}


/* ---------- comment --------------------------------------------- */

div.comment {
	margin-left: 200px;
	padding: 0 0.5em 0 1em;
	width: 520px;
	clear: both;

	border-left: 1px solid #ccc;
	border-bottom: 1px solid transparent;
	_border-bottom-color: #333;
}

.comment .caption {
	visibility: hidden;

	text-align: right;
}

.comment .caption a {
	visibility: visible;

	color: #dd3;
}

.comment .commentbody,
.comment .commentshort {
	color: #989793;

	line-height: 1.4;
	letter-spacing: 0;
}

.comment p {
	margin: 0 0 0.3em;
}

.comment p .canchor,
.comment p .canchor a:link,
.comment p .canchor a:visited,
.comment p .canchor a:hover,
.comment p .canchor a:active {
	font-family: Georgia, sans-serif;
	text-decoration: none;

	color: #989793;
	background: transparent;
}

.comment .commentator {
	color: #989793;
}

.comment a:hover .commentator {
	color: #ff0;
}

.comment textarea {
	padding: 0 1px;
	width: 80%;
	height: 6.6em;
}


/* ---------- hatena module --------------------------------------- */

.hatena-module {
	position: relative;
	margin: 0 0 1em;

	font-family: Verdana, "MS PGothic", Osaka, sans-serif;
}

.recentitem_diary {
	text-align: left;
}

.recentitem_diary a {
	color: #fff;
}

.recentsubtitles {
	margin: 1em 0;
}

.recentsubtitles img {
	vertical-align: middle;
}

.sidebar .bar .hatena-module {
	width: 33.3%;
	padding: 0 1em 0.5em;

	float: left;
}

.sidebar .hatena-moduletitle {
	padding: 0 1em 0 0;
	width: 240px;
	position: absolute;
	right: 480px;

	text-align: right;
}

.sidebar .bar .hatena-moduletitle {
	padding: 0;
	width: auto;
	position: relative;
	right: 0;

	text-align: left;
}

.hatena-moduletitle a:link,
.hatena-moduletitle a:visited,
.hatena-moduletitle a:hover,
.hatena-moduletitle a:active {
	text-decoration: none;

	color: #fff;
	background: transparent;
}

.hatena-modulebody {
	line-height: 1.5;
}

.sidebar .hatena-modulebody {
	margin-left: 240px;
	padding: 0 0.5em 0 1em;
	min-height: 3em;

	border-left: 1px solid #ccc;
	border-bottom: 1px solid transparent;
	_border-bottom-color: #333;
}

.sidebar .bar .hatena-modulebody {
	margin: 0;
	padding: 0;
	min-height: 0;

	border: none;
}


/* ---------- hatena module/profile ------------------------------- */

.hatena-profile .hatena-profile-image {
	float: right;
}

.hatena-profile .hatena-profile-body {
	margin: 1em 0 0;
}


/* ---------- hatena module/calendar/sectioncategory --------------
   ---------- hatena module/searchform ---------------------------- */

input.hatena-calendar,
input.hatena-sectioncategory,
input.hatena-searchform {
	*margin-left: 1em;
	*padding: 0.05em 0.2em;

	color: inherit;
	background: transparent;

	border: 1px solid #fff;
}

input.hatena-calendar[type="submit"],
input.hatena-sectioncategory[type="submit"],
input.hatena-searchform[type="submit"] {
	margin-left: 1em;
	padding: 0.05em 0.2em;
}


/* ---------- hatena module/calendar2/ ----------------------------
   ---------- hatena module/calendar2photo/groupcalendar ---------- */

table.calendar {
	margin: 0 auto;
	padding: 0;
	width: auto;

	color: inherit;
	background: transparent;

	font-size: inherit;
	text-align: left;

	border: 1px solid #989793;
	border-collapse: collapse;
}

.sidebar table.calendar {
	width: 100%;
	*width: 450px;
}

.sidebar .bar table.calendar {
	width: 100%;
}

table.calendar .calendar-prev-month,
table.calendar .calendar-next-month,
table.calendar .calendar-current-month {
	padding: 5px;
	text-align: center;
}
table.calendar .calendar-prev-month,
table.calendar .calendar-next-month {
	text-indent: 0.5em;
	*text-indent: 0;
	letter-spacing: 0.5em;
}

table.calendar .calendar-sunday,
table.calendar .calendar-weekday,
table.calendar .calendar-saturday {
	font-weight: bold;
}

table.calendar .calendar-sunday,
table.calendar .calendar-weekday,
table.calendar .calendar-saturday,
table.calendar .calendar-day {
	padding: 3px;
	text-align: center;
	border: solid 1px #989793;
}
table.calendar .day-today {
	background: #989793;
}
table.calendar .day-selected {
	color: #333;
	background: #fff;
}

table.calendar a {
	color: #dd3;
	background: transparent;
}

table.calendar a:hover {
	color: #ff0;
	background: transparent;
}

table.calendar a:active {
	color: #999;
	background: transparent;
}

table.calendar .calendar-day a {
	display: block;
}

.sidebar .bar table.calendar .calendar-day img {
	width: 16px;
	height: 16px;
}


/* ---------- hatena module/photo --------------------------------- */

/* .hatena-module .hatena-asin, */
/* .hatena-module .hatena-ean, */
/* .hatena-module .hatena-hotasin, */
/* .hatena-module .hatena-hotean, */
/* .hatena-module .hatena-hotvideo, */
.hatena-module .hatena-photo li {
	display: inline;
	margin: 0.5em 0.2em;
}


/* ---------- hatena module/section/[my]comment/trackback ---------
   ---------- hatena module/anntena/keyword/question/bbs ----------
   ---------- hatean module/ean/asinlog/urllog --------------------
   ---------- hatean module/hotkeyword/hotvideo -------------------
   ---------- hatena module/hotasin/hotean/hoturl ----------------- */

.hatena-module li {
	margin-left: 1.5em;
}


/* ---------- keywordcloud/hatena module/keywordcloud ------------- */

.keywordcloud,
.keywordcloud li {
	margin: 0 !important;
}


/* ---------- hatena module/rss ----------------------------------- */

.hatena-module dl.hatena-rss {
	padding-top: 1.5em;
	position: relative;
}

.hatena-module .hatena-rss dt {
	padding: 0.3em 0.5em 0 0;
	width: 240px;
	position: absolute;
	right: 480px;

	text-align: right;
}

.hatena-module .hatena-rss dd {
	padding: 0.3em 0;
	min-height: 2em;
}

.sidebar .bar dl.hatena-rss {
	padding: 0;
}

.sidebar .bar .hatena-rss dt {
	margin: 0 0 0 1.5em;
	padding: 0;
	width: auto;
	height: auto;
	position: relative;
	top: 0; right: 0;

	text-align: left;

	display: list-item;
}

.sidebar .bar .hatena-rss dd {
	margin-left: 1.5em;
	min-height: 0;
}


/* ---------- hatena module/ring ---------------------------------- */

.hatena-ring table,
.hatena-ring table td,
.hatena-ring table td a {
	background: transparent;
}


/* ---------- hatena module/task ---------------------------------- */

.hatena-taskform input {
	margin: 0 0.2em;
	*padding: 0.05em 0.2em;

	color: inherit;
	background: transparent;

	border: 1px solid #fff;
}

.hatena-taskform input[type="submit"] {
	padding: 0.05em 0.2em;
}

.sidebar .bar .hatena-taskform input {
	margin: 0.2em 0;
	padding: 0.05em 0.2em;
}

.sidebar .bar .hatena-taskform input[type="text"] {
	padding: 0;
	width: 100%;
}


/* ---------- hatena module/menu ---------------------------------- */

.adminmenu {
	margin-left: 0.8em;
	text-align: right;
}

.adminmenu a:before {
	content: "[";
}

.adminmenu a:after {
	content: "]";
}


/* ---------- hatena module/bcounter ------------------------------ */

.bcounter {
	vertical-align: middle;
}


/* ---------- about/archive/edit ---------------------------------- */

#hatena-about .day,
#hatena-edit .day {
	margin: 4em 0 5em;
}
#hatena-archive .day {
	margin: 2em 0 5em;
}

#hatena-about div.day:before,
#hatena-archive div.day:before,
#hatena-edit div.day:before {
	display: none;
}

#hatena-about h3 {
	margin: 0;
	padding: 0.2em 1em 0;
	width: 200px;
	position: absolute;
	top: 0; right: 520px;

	font-weight: normal;

	border: none;
}

#hatena-about ul.hatena-profile-list {}
#hatena-about img.hatena-profile-list {}

#hatena-about ul.hatena-profile-keyword {}

#hatena-archive .calendar {
	margin: 0 0 1em;
}

#hatena-archive form h2 input {
	color: inherit;
	background: #333;

	border: 1px solid #fff;
}

#hatena-edit textarea {
	height: 20em;
}

#hatena-edit div.comment {
	margin-top: 1em;
}

textarea.uheader,
textarea.ufooter {
	height: 15em;
}

textarea.style {
	height: 20em;
}

h3.subtitle {
	margin: 1em 0;
	padding-left: 0.8em;
	width: auto;
	position: relative;
	top: 0; right: 0;

	font-weight: normal;
	line-height: 1.5;

	border-left: 2px solid #ff0;
	border-bottom: 1px solid transparent;
	_border-bottom-color: #333;
}


/* ---------- group ----------------------------------------------- */

.contents {
	position: relative;
	top: 0; right: 0;
	font-size: 110%;
}


/* ---------- footer ---------------------------------------------- */

#footer,
.footer {
	text-align: right;
}


/* ---------- system ---------------------------------------------- */

hr.sep {
	display: none;
}

.message {
	margin: 0 auto 4em;
	padding-right: 1em;

	font-size: 90%;
	text-align: right;
	text-transform: uppercase;
}
keyword

はてなダイアリーの構造

■ はてなダイアリーの構造 はてなダイアリーのデザインの参考にしてください。 ダイアリーの構造 ヘッダの構造 カスタマイズに関するメモ ■ ブックマーク...

box-sizing

■ 注意 Opera8.0enで実装されていることを確認しました。CSS3草稿の先行実装と思われます。 実験的なものなので将来削除される可能性があります。 ■ 用語の簡単な解説 &#...

はてなブックマークの構造

■ はてなブックマークの構造 はてなブックマークのデザインの参考にしてください。 ブックマークページの構造 タグリスト絞り込みの構造 コメント直接編集機能の構...

はてなアンテナの構造

はてなアンテナの構造です 基本の構造 アンテナモード シンプルモード 詳細モード ■ 基本の構造 html body table tbody ...

はてなグループの構造::日記::日記を書くの構造

■ /css.g.hatena.ne.jp/UserID/edit ←はてなグループの構造←はてなグループの構造::日記の構造 ■ ページの構造 html body table //はてなヘッダ h1 div#ha...