CSSサンプル置き場

参照元はid:yms-zun:20040316。

body { 
	color:#033 ; /* 文字色の設定 */
	background-color:#3cc ;  /*背景色の設定 */
	margin:0 ; padding:0 ; /*枠の外側・内側の余白の設定*/
	font-family:osaka,verdana,sans-serif ; /*フォントの種類の設定*/
	font-size:100% ; /*フォントの大きさの設定*/
	}

body * { font-size:100% ; }

div.day { 
	color:#fff ; /* 文字色の設定 */
	background-color:#333 ; /* 背景色の設定 */
	border:1px #999 solid ;  /* 枠線の設定 */
	margin:2em 0 ; /* 枠の外側の余白設定 */
	padding:0 ;  /* 枠の内側の余白設定 */
	line-height:2em ; /* 本文の行の高さの設定 */
	}

div.section {
	padding:2em 1em ; /* 枠の内側の余白設定 */
	}

a:link { color:#ff6 ; background-color:transparent ; } /* リンク部の色 */
a:visited { color:#fc6 ; background-color:transparent ; } /* 一度訪れたことのあるリンクの色 */
a:hover { color:#fff ; background-color:#933 ; } /* マウスのポインタが重なつた時の色 */
a:active { color:#993 ; background-color:#fff ; } /* クリックした瞬間の色 */

a.keyword { color:#fff ; border-bottom: 1px #99c dashed ; }  /* キーワードリンクのスタイル */

pre.source {
	border:1px #999 dashed ;  /* 枠線の設定 */
	padding:2em ;  /* 枠の内側の余白設定 */
	line-height:1.2em ; /* 本文の行の高さの設定 */
	font-size:80% ; /*フォントの大きさの設定*/
	overflow:scroll ; /* はみ出したらスクロール */
	}


h1,h2,h3,h4,h5,h6 { 
	font-weight:bold ; /* 見出しは全部太字に */
	margin:0 ; /* 外側の余白 */
	padding:0 ;  /* 内側の余白 */
	}
	
h1 { 
	font-size:180% ; /* 文字サイズ */
	color:#77bac1 ;  /* 文字色 */
	background-color:#4594a0 ; /* 見出し部分の背景色 */
	background-image:url("http://d.hatena.ne.jp/images/diary/yms-zun/2002-12-30.gif") ; /* はてなロゴ画像 */
	background-repeat:no-repeat ;  /* ロゴ画像の繰返し設定 */
	background-position:0% 100% ;  /* ロゴ画像の表示位置 */
	padding-left:110px ;  /* ロゴ画像の横幅分だけ左に余白を取る */
	border-bottom:1px #276d75 solid ;  /* 下に枠線表示 */
	vertical-align:bottom ;  /* 文字の配置を下揃えに */
	}

h2 { 
	font-size:140% ;  /* 文字サイズ */
	color:#066 ;  /* 文字色 */
	margin:0.5em 0 ;  /* 外側の余白 */
	padding-left:0.5em ; /* 内側左の余白 */
	border-bottom:2px #fff solid ;  /* 下に枠線表示 */
	}
div.main h2 { 
	font-size:120% ;  /* 文字サイズ */
	color:#fff ;   /* 文字色 */
	padding-left:1em ; /* 内側左の余白 */
	border-color:#fc0 ;   /* 下線の色を変更 */
	}

h3 { 
	font-size:120% ;   /* 文字サイズ */
	color:#fff ;   /* 文字色 */
	margin:1em 0 ;  /* 外側の余白 */
	border-bottom:3px #9ff solid ;   /* 下に枠線表示 */
	}

h4 { 
	padding-top:0.5em ; /* 内側上の余白 */
	border-bottom:1px #fff solid ; /* 下に枠線表示 */
	}

h5 { 
	border-width:1px 8px 1px 0 ; /* 枠線の幅 */
	border-color:#696 ; /* 枠線の色 */
	border-style:solid ; /* 枠線のスタイル */
	margin:0.5em 0 ; 外側の余白
	padding-top:0.25em ; /* 内側左の余白 */
	 width:50% ; /* 横幅を表示領域の50%に設定 */
	}