CSSサンプル置き場(完成版)

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

/* 大和但馬屋日記スタイルシート */
 
/* はてなデフォルトスタイル */
 
span.highlight {
    color: black;
    background-color: yellow;
    }
 
img.photo {
    margin:1em ;
    border: none ;
    }
 
 
/* body要素 */
 
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,div.calendar { 
    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 ; }  /* キーワードリンクのスタイル */
 
 
/* 基本要素 */
 
blockquote { 
    color:#fff ; 
    background-color:#036 ; 
    line-height:1.5em ; 
    border-width:1px 2px ; 
    border-color:#69c ; 
    border-style:solid dashed ; 
    margin:1em 0 ; 
    padding:0 1em ; 
    }
 
blockquote cite {
    display:block ; 
    font-style:normal ;
    fint-size:80% ; 
    text-align:right ; 
    margin:0 ; 
    }
 
q { 
    color:#fff ; 
    background-color:#036 ; 
    border:1px #69c dashed ; 
    }
 
 ul,ol,dl {  /* 箇条書きリスト、番号つきリスト、定義リストのまとめ設定 */
    font-size:100% ; 
    line-height:1.5em ; 
    margin:0 ; 
    padding-left:1em ; 
    list-style-position:inside ; 
    }
 
div.main ol {  /* 日記本文内にある番号つきリスト */
    margin:1em 0 ; 
    padding:0 ; 
    }
div.main ul {  /* 日記本文内にある箇条書きリスト */
    list-style-type:none ;
    margin:1em 0 ;
    padding:0 ;
    }
div.main li {  /* 日記本文内にある箇条書き・番号つきリストの項目の装飾 */
    border-width :1px 0 ;
    border-color:#999 ;
    border-style:solid ;
    color:#fff ;
    background-color:#666 ;
    margin:0 ;
    padding:0.2em  ;
    }
 
dt {  /* 定義リストの定義語部分 */
    line-height:2em ;
    font-weight:bold ;
    padding:0.5em 0 0 0 ;
    border-bottom:1px #fff solid ;
    }
dd {  /* 定義リストの説明文 */
    padding:0 0 1em 0 ;
    } { margin:1em 0 ; }
 
pre { 
    font-size:100% ; 
    line-height:1.5em ; 
    padding:0 0.5em ; 
    overflow:scroll ; 
    }
 
em { 
    font-size:100% ; 
    font-weight:bold ; 
    font-style:normal ; 
    }
 
strong { 
    font-size:120% ; 
    font-weight:bold ; 
    font-style:normal  ; 
    }
 
img.right,img.left { 
    float:right ; 
    margin:10px; 
    border: none ;
    }

img.asin { 
    float:right ; 
    margin:0 1em ; 
    }
 
div.section table { 
    margin:1em ; color:#fff ; 
    background-color:transparent ; 
    font-size:80% ; 
    }
td.lead { color:#fff ; background-color:#339 ; }
td.behind { color:#fff ; background-color:#933 ; }
 
ul.catalog { 
    list-style-type:none ; 
    padding:2px 16px ; 
    background-color:#336 ; 
    border-color:#999 ; 
    border-width:4px 0 ; 
    border-style:dotted ; 
    }
 
ul.catalog li { 
    display:inline ; 
    margin:4px 2px ; 
    padding:0 ; 
    }
 
.timestamp { display:none ; }
 
/* HTMLソース */
 
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 ;  /* 内側の余白 */
    color:#fff ; /* 文字色 */
    }
 
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 ;  /* 文字の配置を下揃えに */
    padding-top:0.5em ; 
    }
 
h2 { 
    font-size:140% ;  /* 文字サイズ */
    color:#066 ;  /* 文字色 */
    margin:0.5em 0 ;  /* 外側の余白 */
    padding-left:0.5em ; /* 内側左の余白 */
    border-bottom:2px #fff solid ;  /* 下に枠線表示 */
    }
div.main h2 { 
    color:#fff ;  /* 文字色 */
    font-size:120% ;  /* 文字サイズ */
    padding-left:1em ; /* 内側左の余白 */
    border-color:#fc0 ;   /* 下線の色を変更 */
    }
 
h3 { 
    font-size:120% ;   /* 文字サイズ */
    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%に設定 */
    }
 
 
/* 日記本体 */
 
div.main { 
    width:78% ; /* 日記本体の横幅を全体の78%に */
    margin-left:1% ; /* 左側に1%の余白 */
    padding:0 ; /* 内側の余白設定 */
    float:left ; /* 左側に配置して回り込み設定 */
    color:#fff ; /* 文字色 */
    }
 
 
/* サイドバー関連 */
 
div.infobar { 
    font-size:100% ; /* フォントのサイズを100%に */
    color:#ccc ; /* 文字色 */
    background-color:#000 ; /* 背景色 */
    width:18% ; /* サイドバー部分の横幅を全体の18%に */
    margin-right:1% ; /* 右側に1%の余白 */
    padding:0.2em ; /* 内側の余白設定 */
    border:1px #ffffff solid ; /* 枠線の設定 */
    float:right ; /* 右側に配置して回り込み設定 */
    }
 
div.infobar h2 { 
    color:#ff3 ; /* 文字色 */
    font-size:80% ; /* フォントのサイズ */
    border-color:#ff0 ; /* 下線の色 */
    padding:0.25em 0 ; /* 内側上下の余白 */
    }
 
div.infobar ul {
    font-size:80% ; /* フォントのサイズ */
    list-style-type:none ; /* 箇条書きのマークを消す */
    margin:0 ; /* 外側余白 */
    padding:0 ; /*内側余白 */
    }
 
div.infobar li ul { 
    margin:0 0 1em 0.5em ;  /* リストの入れ子の下げ幅 */
    font-size:100% ; /* 文字サイズを一つ上の要素に揃へる */
}
 
li.index,ul.hatena-section li { 
    border-bottom:1px #990 solid ;  /* リスト項目に下線表示 */
    }
 
 
/* calendar2モジュール */
 
table.calendar { 
    font-size:72% ; /* カレンダーの文字サイズ */
    margin:0 ; /* 枠の外側余白 */
    padding-left:2% ; /* 内側左の余白 */
    text-align:center ; /* カレンダー内の字詰めを中央に */
    }
table.calendar * { /* カレンダー内の各要素の余白と罫線をキャンセル */
    margin:0 ; 
    padding:0 ; 
    border:0 ; 
    }
td.calendar-day { color:#666 ; background-color:#ccc ; } /* 日付部分の基本色 */
td.calendar-sunday { color:#c00 ; background-color:#c66 ; } /* 日曜部分 */
td.calendar-weekday { color:#000 ; background-color:#666 ; } /* 平日部分 */
td.calendar-saturday { color:#00c ; background-color:#66c ; } /* 土曜部分 */
td.calendar-prev-month,td.calendar-current-month,td.calendar-next-month { color:#000 ; background-color:#666 ; } /* ナビゲーション部分 */
 
td.calendar-day a { color:#000 ; background-color:#ccc ; } /* 日付部分のリンク色 */
td.calendar-day a:hover { color:#fff ; background-color:#933 ; } /* 日付部分のマウスロールオーバー */
 
 
/* sectionモジュール */
 
div.hatena-moduletitle { display:none; } /* 「最新タイトル」表示をキャンセル */
 
 
/* photoモジュール */
 
ul.hatena_photo { 
    padding:0 2px ; /* 枠の内側余白 */
    text-align:center ; /* 字詰めを中央寄せに */
    border-color:#999 ; /* 左右の飾り枠の色 */
    border-width:0 4px ; /* 左右の飾り枠の幅 */
    border-style:dotted ; /* 左右の飾り枠のスタイル */
    }
ul.hatena_photo li { 
    display:inline ; /* リスト項目をインライン表示に */
    }
ul.hatena_photo li img { width:48px ; height:48px ; } /* 画像サイズを固定 */
 
a img { border:0 ; } /* リンク付画像に表示される枠をキャンセル */
 
 
/* calendarモジュール */
 
div.calendar { 
    margin:0 ; /* 外側余白 */
    padding:1em ; /* 内側余白 */
    font-size:80% ; /* 文字サイズ */
    line-height:1.2em ; /* 一行の高さ */
    }
 
 
/* コメント欄 */
 
div.comment { 
    margin:0 ;  /* 外側余白 */
    background-color:#363 ;  /* 背景色 */
    border-top:1px #999 solid ;  /* 上に罫線表示 */
    }
 
div.caption { 
    padding:0 1em ;  /* [コメントを書く]部分の内側余白 */
    border-bottom:1px #999 solid ;  /* 下に罫線表示 */
    }
 
div.commentshort p { 
    margin:0 ;  /* 外側余白 */
    padding:0.5em 1em ;  /* 内側余白 */
    line-height:1.4em ;  /* 改行幅設定 */
    }
 
span.canchor { display:none ; } /* コメントに付く"e;#"e; をキャンセル */
 
span.commentator {
    display:block ; /* コメント発言者名を独立して表示 */
    font-weight:bold ;  /* フォントを太字に */
    background-color:#474 ;  /* 背景色設定 */
    padding-left:0.5em ;  /* 左側余白 */
    }
 
 
/* 脚注 */
 
div.footnote { 
    padding:1em ;  /* 内側余白 */
    background-color:#666 ;  /* 背景色 */
    border-top:1px #999 solid ;  /* 上に罫線表示 */
    line-height:1.2em ;  /* 改行幅設定 */
    }
 
div.footnote p {
    margin:0 ;  /* 脚注段落の余白キャンセル */
    }
 
span.footnote { 
    font-size:60% ;  /* 本文中の脚注アンカーの文字サイズ */
    }
 
 
/* ナビゲーションメニュー */
 
ul.tab { 
    font-size:96% ; /* 文字サイズ */
    list-style-type:none ;  /* リスト項目の先頭マークをキャンセル */
    margin:0 ; /* 外側余白 */
    padding:0.2em 0 ; /* 内側余白 */
    color:#fff ; /* 文字色 */
    background-color:#77bac1 ; /* 背景色 */
    border-bottom:1px #276d75 solid ; /* 下側の罫線 */
    text-align:right ; /* リスト項目を右揃へに */
    }
 
ul.tab li { 
    display:inline ; /* リスト項目を一行に収める */
    margin:0 0.5em ; /* 外側余白 */
    }
 
ul.tab li a { color:#daeef2 ; background-color:transparent ; } /* リンク色 */
ul.tab li a:hover { color:#fff ; background-color:#933 ; } /* マウスロールオーバー */
 
form.hatena-searchform { 
    display:inline ;  /* 検索フォームを一行に収める */
    font-size:80% ; /* 検索フォームの文字サイズ */
    }