Hatena::Groupcss

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

1000.0.01タイトル未定

[]サイドバーをつけてみた 00:25 サイドバーをつけてみた - つみきスタイル を含むブックマーク はてなブックマーク - サイドバーをつけてみた - つみきスタイル サイドバーをつけてみた - つみきスタイル のブックマークコメント

  • 白背景で黒文字は変わらず
  • 目に悪そうなのも変わらず
  • フォントサイズ固定をやめた
  • サイドバーがついたのでちょっとイメージ変わったかも
  • なんていうかこざっぱり?
  • 画像は一切使用してないのはおろか気の利いた装飾すらしてない
  • 質素

[]サイドバーをつけた系 00:25 サイドバーをつけた系 - つみきスタイル を含むブックマーク はてなブックマーク - サイドバーをつけた系 - つみきスタイル サイドバーをつけた系 - つみきスタイル のブックマークコメント

@charset "euc-jp";


/*   名称未設定   */


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

* {
	margin: 0;
	padding: 0;
}
html * {
	-moz-box-sizing: border-box ;
	box-sizing: border-box ;
}
body {
	padding: 0 10px;

	font: 80%/160% MS PGothic, sans-serif;
	text-align: left;
	letter-spacing: 2px;

	color: #000;
	background: #fff;

	word-break: break-all ;
	word-wrap: break-word ;
}
table,
input,
select {
	font: 100% MS PGothic, sans-serif;
	letter-spacing: inherit;

	color: inherit;
}
img {
	border: none;
}
br {
	letter-spacing: 0;
}
table {
	background: transparent;
}
table td {
	background: transparent;
}
table font,
table table a {
	color: #000;
}
table table td {
	font-size: 80%;
}
table font {
	font-size: 100%;
}
table td font a {
	padding: 0 10px;
}
h1 {
	margin: 10px 0;
	padding: 35px 10px;

	font: bold 150% MS PGothic, sans-serif;

	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	/* display: none; */
}
h1,
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
	text-decoration: none;

	color: #000;
	background: none;
}
p {
	margin: 1.2em 0;
}
img {
	border: none;
}
br {
	letter-spacing: 0;
}
div.hatena-body {
	position: relative;
	width: 100%;
}
/*
div.h1title {
	margin: 10px 0;
	padding: 20px 10px;

	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}
div.nikkititle {
	margin: 15px 0;

	font: bold 150% MS PGothic, sans-serif;
}
div.nikkititle a:link,
div.nikkititle a:visited,
div.nikkititle a:hover,
div.nikkititle a:active {
	text-decoration: none;

	color: #000;
	background: none;
}
div.nikkititle .nikkititlesub {}
*/


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

.main {
	margin: 0 25% 0 0;
}
.sidebar {
	position: absolute;
	/* top: 150px; */
	top: 30px; right: 0;
	width: 25%;
}


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

div.calendar {
	padding: 10px 0;
}
div.calendar a:link,
div.calendar a:visited,
div.calendar a:hover,
div.calendar a:active,
h2 a:link,
h2 a:visited,
h2 a:hover,
h2 a:active,
h3 a:link,
h3 a:visited,
h3 a:hover,
h3 a:active {
	text-decoration: none;

	color: #000;
	background: none;
}
div.day {
	margin: 0 0 20px;
}
h2 {
	margin: 0 10px;

	font-size: 100%;
}
h2 a span.date {
	margin: 5px 0;

	font: normal 130%/100% Georgia, sans-serif;

	display: block;
}
h2 span.title {
}
h2 a.edit {
	font-size: 80%;
}
img.photo {
	float: right;
	margin: 10px;
	border: 1px solid #000;
}
.body {
	padding: 10px;
	border-bottom: 1px solid #000;
}
.section {
	position: relative;
	margin: 0 1.5em 1.5em;
	padding: 0.5em 0 0;
}
.section p {}
h3 {
	position: absolute;
	top: 0; left: -1.5em;

	font-size: 100%;
}
h3 a span.sanchor,
h3 span.timestamp {
	font-size: 80%;
}
h3 a.sectioncategory {}
span.highlight {
	background: #fa0;
}
h4 {
	font: normal 100%/100% MS PGothic, sans-serif;
}
h5 {
	font: normal 100%/100% MS PGothic, sans-serif;
}
h6 {
	font: normal 100%/100% MS PGothic, sans-serif;
}


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

a:link {
	color: #000;
	text-decoration: underline;
}
a:visited {
	color: #999;
	text-decoration: underline;
}
a:hover {
	color: #666;
	text-decoration: none;
}
a:active {
	color: #f33;
	text-decoration: underline;
}
a.keyword:link,
a.keyword:visited {
	color: #000;
	text-decoration: none;
}
a.keyword:hover {
	color: #666;
	text-decoration: none;
}
a.keyword:active {
	color: #f33;
	text-decoration: underline;
}
a.okeyword:link,
a.okeyword:visited {
	color: #000;
	text-decoration: none;
}
a.okeyword:hover {
	color: #f33;
	text-decoration: none;
}
a.okeyword:active {
	color: #f33;
	text-decoration: underline;
}

blockquote {
	position: relative;
	margin: 1.5em 0;
	padding: 15px;
	color: #ddd;
	background: #666;
}
blockquote p {
	margin: 0;
}
blockquote a.keyword:link,
blockquote a.keyword:visited,
blockquote a.okeyword:link,
blockquote a.okeyword:visited {
	color: #ddd;
}
q {}
cite {}
blockquote cite {
	display: block;
	padding: 0 5px;
	color: #666;
	text-align: right;
	background: #ddd;
	border: 1px solid #666;
}
q cite {}
pre {
	margin: 1.5em 0;
	padding: 15px;
	color: #fff;
	background: #000;
	color: #fff;
	background: #f33;
}
ins {
	text-decoration: underline;
}
del {
	text-decoration: line-through;
}
strong {
	font: bold 100%/100% MS PGothic, sans-serif;
}
em {
	font-size: italic normal 100%/100% MS PGothic, sans-serif;
}
.AA {
	font: normal 12pt MS PGothic, sans-serif;
}
.AA p {
	margin: 0;
}



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

.section ul,
.section ol,
.section dl {
	margin: 1.2em 0;
}
.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 30px;
}
.section li {
	margin: 0 auto 0 0;
}
.section dt {
	font-weight: bold;
}
.section dd {
	margin: 10px 0;
	padding: 15px 15px;
	color: #ddd;
	background: #666;
}


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

.section table {
	width: auto;
}
.section caption {}
.section thead {}
.section tbody {}
.section tfoot {}
.section colgroup {}
.section tr {}
.section td {}
.section th {}


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

div.footnote {
	margin: 1.8em 1.5em 10px;
	padding: 3px 5px;
	color: #ddd;
	background: #666;
}
p.footnote {
	margin: 0;
	font-size: 80%;
}
p.footnote a.keyword:link,
p.footnote a.keyword:visited,
p.footnote a.okeyword:link,
p.footnote a.okeyword:visited {
	color: #ddd;
}

.refererlist {}
 .refererlist .caption {}
 .refererlist .caption a {}
 .refererlist ul {}
 .refererlist ul li {}


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

div.comment {
	padding: 10px;
	border-bottom: 1px solid #000;
}
form.comment {}
.comment .caption {
	text-align: right;
}
.comment .caption a,
.comment .caption a:link,
.comment .caption a:visited,
.comment .caption a:hover,
.comment .caption a:active {
	color: #000;
	font-size: 8pt;
	text-decoration: none;
}
.comment .commentshort .canchor,
.comment .commentshort .canchor a:link,
.comment .commentshort .canchor a:visited,
.comment .commentshort .canchor a:hover,
.comment .commentshort .canchor a:active {
	color: #000;
	text-decoration: none;
	font-size: 12pt;
	font-family: Georgia, sans-serif;
}
.comment .commentshort a:link,
.comment .commentshort a:link .commentator,
.comment .commentshort a:visited,
.comment .commentshort a:visited .commentator {
	color: #000;
	text-decoration: none;
}
.comment .commentshort a:hover,
.comment .commentshort a:hover .commentator {
	color: #666;
	text-decoration: none;
}
.comment .commentshort a:active,
.comment .commentshort a:active .commentator {
	color: #f33;
	text-decoration: underline;
}
.comment .commentshort {
	margin: 0 25px;
}
.comment .commentshort p {
	margin: 0.3em 0;
}
.comment .commentshort p .canchor {
	display: none;
}
form .comment .commentshort p .canchor {
	display: inline;
}
.comment .commentshort p .commentator {
	display: block;
}
form .comment .commentshort p .commentator {
	display: inline;
}
.comment .commentshort textarea {
	padding: 0 1px;
	width: 80%;
	height: 5.5em;
}


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

.hatena-module {
	margin: 0 0 10px;
	padding: 5px;

	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-bottom: 1px solid #000;
}
.hatena-moduletitle {
	padding: 8px 10px 0;

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

	color: #000;
	background: none;
}
.hatena-modulebody {
	padding: 0 10px;
}


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

.hatena-profile .hatena-profile-id {}

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

table.calendar {
	padding: 5px;
	width: 95%;
	_width: 80%;
}
table.calendar,
table.calendar td {
	color: inherit;
	background: transparent;
}
table.calendar .calendar-prev-month,
table.calendar .calendar-current-month,
table.calendar .calendar-next-month {
	text-align: center;
}
table.calendar a {
	margin: 0;
	padding: 0;
}
table.calendar .calendar-prev-month a,
table.calendar .calendar-current-month a,
table.calendar .calendar-next-month a {
	text-decoration: none;
}
table.calendar .calendar-day a {
	font-weight: bold;
}


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

ul.hatena-section {
	margin: 0 0 0 20px;
	padding: 0;
}
ul.hatena-section li a {
	text-decoration: none;
}


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

ul.hatena-sectioncategory {
	margin: 0 0 0 20px;
	padding: 0;
}
ul.hatena-sectioncategory li a {
	text-decoration: none;
}


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

ul.hatena-recentcomment {
	margin: 0 0 0 20px;
	padding: 0;
}
ul.hatena-recentcomment li a {}


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

ul.hatena-antenna {
	margin: 0 0 0 20px;
	padding: 0;
}
ul.hatena-antenna li a {
	text-decoration: none;
}


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

.hatena-rsstimes {
	margin: 5px auto 5px 0;
}


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

div.hatena-modulebody .hatena-counter {
	display: block;
}


/* ---------- about ---------- */

h3.subtitle {/* aboutページの「一行紹介」等 */}
ul.hatena-profile-list {/* 最近言及したISBN/ASIN等 */}
img.hatena-profile-list {}

ul.hatena-profile-keyword {/* 最近編集したキーワード */}

/* archiveページに特有のもの */
/* 無いし */


/* ---------- archive ---------- */


/* ---------- admin ---------- */

textarea {}
form p.footnote {}
form div.comment {}
form div.referlist {}
div.comment input {}
div.comment textarea {}
div.footnote {}

.section .sectionfooter {}
.sectionfooter .icon {}
div.breadcrumbs {
	margin: 10px 0;
}
div.adminmenu {}
span.adminmenu {}
span.adminmenu a {}


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

div.hatena-asin-detail {}
img.hatena-asin-detail-image {
	float: left;
	margin: 15px 30px 15px 15px;
}
div.hatena-asin-detail-info {}
p.hatena-asin-detail-title {
	font-weight: bold;
}
div.hatena-asin-detail-info ul {}
div.hatena-asin-detail-info ul li {}
div.hatena-asin-detail-info ul li a {}
span.hatena-asin-detail-label {}
div.hatena-asin-detail-foot {
	clear: both;
}

[]画面いっぱいに引かれたライン 18:47 画面いっぱいに引かれたライン - つみきスタイル を含むブックマーク はてなブックマーク - 画面いっぱいに引かれたライン - つみきスタイル 画面いっぱいに引かれたライン - つみきスタイル のブックマークコメント

  • 白背景で黒文字
  • 実は目に大変悪い
  • 画面いっぱいの長さの横線
  • 全体はリキッドで文字のみソリッド
  • サイドバーはサイドにつけない
  • ということはサイドバーではない

[]あっさり? 18:47 あっさり? - つみきスタイル を含むブックマーク はてなブックマーク - あっさり? - つみきスタイル あっさり? - つみきスタイル のブックマークコメント

@charset "euc-jp";


* {
	margin: 0;
	padding: 0;
	line-height: 160%;
	letter-spacing: 2px;
	font-size: 10pt;
	font-family: MS PGothic, sans-serif;
}
html * {
	-moz-box-sizing: border-box ;
	box-sizing: border-box ;
}
body {
	padding: 0 10px;
	text-align: left;
	color: #000;
	background: #fff;

	word-break: break-all ;
	word-wrap: break-word ;
}
table {
	background: transparent;
}
table td {
	font-size: 8pt;
	border: none;
	background: transparent;
}
table td font {
	color: #000;
	font-size: 8pt;
}
table td font a {
	padding: 0 10px;
	font-size: 8pt;
}
h1 {
	margin: 10px 0;
	padding: 35px 10px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;

	/* display: none; */
}
h1,
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
	color: #000;
	font-size: 150%;
	font-weight: bold;
	text-decoration: none;
}
p {}
img {
	border: none;
}
br {
	letter-spacing: 0;
}
input,
textarea {
	font-size: 9pt;
	line-height: 1.2em;
	letter-spacing: 1px;
}


/* =============== diary =============== */

.main {}
div.calendar {
	margin: 10px 0;
}
div.calendar a:link,
div.calendar a:visited,
div.calendar a:hover,
div.calendar a:active,
h2 a:link,
h2 a:visited,
h2 a:hover,
h2 a:active,
h3 a:link,
h3 a:visited,
h3 a:hover,
h3 a:active {
	color: #000;
	text-decoration: none;
}
div.day {
	margin: 0 0 20px;
}
h2 {
	margin: 0 10px;
}
h2 a span.date {
	display: block;
	margin: 5px 0;
	font-size: 12pt;
	font-weight: normal;
	font-family: Georgia, sans-serif;
}
h2 span.title {
}
h2 a.edit {
	font-size: 8pt;
}
img.photo {
	float: right;
	margin: 10px;
	border: 1px solid #000;
}
.body {
	padding: 10px;
	border-bottom: 1px solid #000;
}
.section {
	position: relative;
	margin: 0 1.5em 1.5em;
	padding: 0.5em 0 0;
}
.section p {
	margin: 1.2em auto 1.2em 0;
	width: 650px;
}
h3 {
	position: absolute;
	top: 0; left: -1.5em;
}
h3 a span.sanchor,
h3 span.timestamp {
	font-size: 8pt;
}
h3 a.sectioncategory {}
span.highlight {
	background: #fa0;
}
h4 {/* 小見出し */  }
h5 {/* 小々見出し */  }
h6 {/* pタグの自動挿入を止めれば使えますが */  }


/* =============== decoration =============== */

a:link {
	color: #000;
	text-decoration: underline;
}
a:visited {
	color: #999;
	text-decoration: underline;
}
a:hover {
	color: #666;
	text-decoration: none;
}
a:active {
	color: #f33;
	text-decoration: underline;
}
a.keyword:link,
a.keyword:visited {
	color: #000;
	text-decoration: none;
}
a.keyword:hover {
	color: #666;
	text-decoration: none;
}
a.keyword:active {
	color: #f33;
	text-decoration: underline;
}
a.okeyword:link,
a.okeyword:visited {
	color: #000;
	text-decoration: none;
}
a.okeyword:hover {
	color: #f33;
	text-decoration: none;
}
a.okeyword:active {
	color: #f33;
	text-decoration: underline;
}

blockquote {
	position: relative;
	margin: 1.5em 0;
	padding: 15px 15px 30px;
	color: #ddd;
	background: #666;
}
blockquote p {
	margin: 0 !important;
	padding: 0 !important;
	width: 620px !important;
}
blockquote a.keyword:link,
blockquote a.keyword:visited,
blockquote a.okeyword:link,
blockquote a.okeyword:visited {
	color: #ddd;
}
q {}
cite {}
blockquote cite {
	position: absolute;
	bottom: -0.8em; right: 15px;
	padding: 0 5px;
	width: 90%;
	color: #666;
	text-align: right;
	background: #ddd;
	border: 1px solid #666;
}
q cite {}

pre {
	margin: 1.5em 0;
	padding: 15px;
	color: #fff;
	background: #000;
	color: #fff;
	background: #f33;
}
ins {
	text-decoration: underline;
}
del {
	text-decoration: line-through;
}

strong {
	font-size: 100%;
	font-weight: bold;
}
em {
	color: inherit;
	font-size: 100%;
	font-weight: normal;
	font-style: italic;
}


/* =============== list =============== */

.section ul,
.section ol,
.section dl {
	margin: 1.2em 0;
}
.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 30px;
}
.section li {
	margin: 0 auto 0 0;
	width: 650px;
}
.section dt {
	font-weight: bold;
}
.section dd {
	margin: 10px 0;
	padding: 15px 15px;
	color: #ddd;
	background: #666;
}


/* =============== table =============== */
/* はてなのヘッダやカレンダーに影響するので全部div.section以下に */
/* table記法ができたので使われる機会が増えそう */
.section table {}
.section caption {}
.section thead {}
.section tbody {}
.section tfoot {}
.section colgroup {}
.section tr {}
.section td {}
.section th {}


/* =============== footnote/referer/trackback =============== */

div.footnote {
	margin: 1.8em 1.5em 10px;
	padding: 3px 5px;
	color: #ddd;
	background: #666;
}
p.footnote {
	width: 640px;
}
p.footnote,
p.footnote a:link,
p.footnote a:visited,
p.footnote a:hover,
p.footnote a:active {
	font-size: 8pt;
}
p.footnote a.keyword:link,
p.footnote a.keyword:visited,
p.footnote a.okeyword:link,
p.footnote a.okeyword:visited {
	color: #ddd;
}

.refererlist {/* リンク元とトラックバック共通 */  }
 .refererlist .caption {/* 「リンク元」または「トラックバック - httpうんぬんかんぬん」 */  }
 .refererlist .caption a {/* 「トラックバック」という文字列 */  }
 .refererlist ul {}
 .refererlist ul li {}


/* =============== comment =============== */

div.comment {
	padding: 10px;
	border-bottom: 1px solid #000;
}
form.comment {}
.comment .caption {
	text-align: right;
}
.comment .caption a,
.comment .caption a:link,
.comment .caption a:visited,
.comment .caption a:hover,
.comment .caption a:active {
	color: #000;
	font-size: 8pt;
	text-decoration: none;
}
.comment .commentshort .canchor,
.comment .commentshort .canchor a:link,
.comment .commentshort .canchor a:visited,
.comment .commentshort .canchor a:hover,
.comment .commentshort .canchor a:active {
	color: #000;
	text-decoration: none;
	font-size: 12pt;
	font-family: Georgia, sans-serif;
}
.comment .commentshort a:link,
.comment .commentshort a:link .commentator,
.comment .commentshort a:visited,
.comment .commentshort a:visited .commentator {
	color: #000;
	text-decoration: none;
}
.comment .commentshort a:hover,
.comment .commentshort a:hover .commentator {
	color: #666;
	text-decoration: none;
}
.comment .commentshort a:active,
.comment .commentshort a:active .commentator {
	color: #f33;
	text-decoration: underline;
}
.comment .commentshort {
	margin: 0 25px;
}
.comment .commentshort p {
	width: 650px;
}
.comment .commentshort p .canchor {
	display: none;
}
form .comment .commentshort p .canchor {
	display: inline;
}
.comment .commentshort p .commentator {
	display: block;
}
form .comment .commentshort p .commentator {
	display: inline;
}
.comment .commentshort textarea {
	padding: 0 1px;
	width: 450px;
	height: 5.5em;
}


/* =============== about =============== */

h3.subtitle {/* aboutページの「一行紹介」等 */  }
ul.hatena-profile-list {/* 最近言及したISBN/ASIN等 */  }
img.hatena-profile-list {}

ul.hatena-profile-keyword {/* 最近編集したキーワード */  }

/* archiveページに特有のもの */
/* 無いし */


/* =============== archive =============== */



/* =============== admin =============== */

textarea {}
form p.footnote {}
form div.comment {}
form div.referlist {}
div.comment input {}
div.comment textarea {}
div.footnote {}

.section .sectionfooter {}
.sectionfooter .icon {}
div.breadcrumbs {
	margin: 10px 0;
}
div.adminmenu {}
span.adminmenu {}
span.adminmenu a {}


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

div.hatena-asin-detail {
	position: relative;
	margin: 1.5em 0;
	border: 1px solid #666;
}
img.hatena-asin-detail-image {
	float: left;
	margin: 15px 30px 15px 15px;
}
div.hatena-asin-detail-info {}
p.hatena-asin-detail-title {
	font-weight: bold;
}
div.hatena-asin-detail-info ul {}
div.hatena-asin-detail-info ul li {}
div.hatena-asin-detail-info ul li a {}
span.hatena-asin-detail-label {}
div.hatena-asin-detail-foot {
	clear: both;
}
keyword

はてなダイアリーの構造

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

box-sizing

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

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

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

はてなアンテナの構造

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

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

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