XHTML/CSS・トップ | CSSソース・目次


●CSSソース1(uranus.css)





@charset "Shift_JIS";

/* htmlとbodyの設定 */
        html, body {
          margin: 0;
          padding: 0;
          height: 100%;
          font-family: "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS UI Gothic", sans-serif;
          font-size: 100%;
        }

/* bodyの設定 */
        body {
          background: #6a6a6a url(../design/stain.gif) repeat-y center top;
          color: #fff;
          min-width: 900px;
          text-align: center;
          letter-spacing: 1px;
        }

        br {
          letter-spacing: normal;
        }

/* 見出し用タグとp要素の設定 */
        h1, h2, h3, h4, h5, h6, p {
          margin-top: 0;
          padding-left: 15px;
          padding-right: 15px;
        }

/* リストの余白とマージンの初期化設定 */
        ul, ol, dl { 
          padding: 0;
          margin: 0;
        }

/* コンテンツ全体を囲むdiv要素の設定 */
        #container {
          background-color: #000;
          overflow: visible;
          width: 900px;
          min-width: 600px;
          margin: 0 auto;
        }

/* ヘッダ(ページ最上部のタイトル領域)の設定 */
        #header {
          background: #000 url("../design/v5-022.jpg") no-repeat top;
          margin: 0;
          padding: 0 10px 20px 10px;
          background-color: #000;
          color: #fff;
          height: 380px;
        }

/* ヘッダ領域内のサイトタイトルの設定 */
        #sitetitle {
          position: relative;
          left: 20px;
          top: 20px;
          color: #f8cfeb;
          padding : 0;
          font-size: 24px;
          font-style: italic;
          text-align: left;
        }

/* ヘッダ領域内のタイトル説明部分の設定 */
        #description {
          background-color: #000;
          color: #fff;
          margin-top: 340px;
          padding: 0;
          padding: 0 10px;
          font-size: 14px;
          text-align: right;
        }

/* メインコンテンツ(中央本文)の設定 */
        #content {
          float: left;
          background-color: #000;
          color: #fff;
          width: 600px;
          min-width: 400px;
          text-align: left;
        }

/* メインコンテンツ(#contentの中央本文)内のリストの設定 */
        #content ul, #content ol {
          font-size: 90%;
          padding: 0 15px 10px 40px;
          list-style-position: outside;
        }

/* サイドバー(右領域)の設定 */
        #sidebar {
          float: right;
          background-color: #111;
          color: #fff;
          padding: 10px 2px 20px 4px;
          border: inset #ccc;
          border-width: 10px 4px;
          width: 270px;
          min-width: 180px;
          font-size: 90%;
          line-height: 1.2;
          text-align: left;
        }

/* サイドバーのタイトル設定 */
        .sidetitle {
          margin-top: 1em;
          padding: 4px 6px 8px 15px;
          background: url(../design/sidetitle.gif) no-repeat 6px 50% scroll;
          font-weight: bold;
          font-size: 90%;
        }

/* サイドバーの(番号なし)リストの設定 */
        #sidebar ul {
          list-style: none outside;
          padding: 0 10px 4px 40px;
        }

/* サイドバーの画像付きリストマークの設定 */
        #sidebar ul.gazou {
          list-style: square outside url(../design/04bul.gif);
        }

/* サイドバーのリスト項目の設定 */
        #sidebar li {
          font-size: 90%;
          padding-bottom: 4px;
        }

/* サイドバーのp要素の設定 */
        #sidebar p {
          font-size: 90%;
          line-height: 1.3;
        }

/* フッタ(ページ最下段の領域)の設定 */
        #footer {
          clear: both;
          background-color: #6e879c;
          color: #fff;
          padding: 4px 1em 12px 1em;
          font-size: small;
        }

/* フッタのp要素の設定 */
        #footer p {
          margin: 0;
          padding: 0;
          font-size: 90%;
        }

/* 見出し用タグのフォントサイズの設定 */
        h1 {
          font-size: 130%;
        }
        h2 {
          font-size: 120%;
        }
        h3 {
          font-size: 110%;
          background-color: #000;
          color: #ff9312;
        }
        h4 {
          font-size: 100%;
          background-color: #000;
          color: #7faaff;
        }

/* 見出し用タグの設定(マージン) */
        h1, h2, h3, h4 {
          margin-top: 20px;
        }

/* p要素(段落)の設定 */
        p {
          font-size: 100%;
          line-height: 1.5;
        }

/* 英字を使うときの設定 */
        .eiji {
          font-family: "Times New Roman", fantasy;
          text-align: center;
          font-style: italic;
          margin-bottom: 5%;
        }

/* 位置揃え */
        .venus1 {
          text-align: left;
        }
        .venus2 {
          text-align: center;
        }
        .venus3 {
          text-align: right;
        }

/* リンクカラーの設定 */
/* 本文のリンクカラーの設定 */
        a:link {
          color: #aff;
          text-decoration: underline;
        }

        a:visited {
          color: #fff;
          text-decoration: underline;
        }

        a:hover {
          color: #f0f;
          background-color: #dfd;
          text-decoration: none;
        }

        a:active {
          color: #f00;
          text-decoration: underline;
        }

/* サイドバーのリンクカラーの設定 */
        .original a:link {
          color: #f0f;
          text-decoration: underline;
        }

        .original a:visited {
          color: #f9f;
          text-decoration: underline;
        }

        .original a:hover {
          background-color: #fdf;
          color: #00f;
          text-decoration: none;
        }

        .original a:active {
          color: #f00;
          text-decoration: underline;
        }

/* その他 */
/* ↓リンク画像のボーダーの設定↓ */
        a img {
          border: none;
          padding: 0;
          margin: 0;
        }

/* form要素、input要素の設定(サイト内検索ツールなど) */
        form {
          padding-left: 6px;
        }
        input {
          font-size: 80%;
          max-width: 250px;
        }

/* カウンタの設定 */
        #counter {
          font-family: "Times New Roman", fantasy;
          font-size: 80%;
          margin-top: 1em;
          margin-bottom: 1em;
          text-align: center;
        }



XHTML/CSS・目次 | CSSソース・目次