CSSサンプル集

<span class="equation">数式のサンプル</span>
Shadow Academyの記事の雛形:

クラス名 色名 カラーコード リンク用補色 分野別
design0 silver #c0c0c0 使用しない 整数論
言語学
design1 lime #00ff00 #ff00ff 速習・量子力学
JavaScript
design2 cyan(aqua) #00ffff #ff0000 速習・電磁気学
解析力学
流体力学
量子情報
HTML
design3 yellow #ffff00 #0000ff 速習・熱力学
Hot Soup Processor
LaTeX
design4 darkviolet #9400d3 #6bff2c 使用しない
design5 orange #ffa500 #005aff 直交多項式・特殊関数
ベルヌーイ数
design6 藤紫? #9460d3 #6bff2c 級数展開
design7 gold #ffd700 #0028ff 非線形物理学(カオス理論)
複雑形物理学(フラクタル)
design8 gray #808080 使用しない 使用しない
design9 yellowgreen #9acd32 #6532cd 誤差論・統計解析・多変量解析



@charset "utf-8"; /* CSSファイル自身の文字コードをUTF-8に指定 */
/* CSSのコメントに「//」は使えない */

.design0 {
  background-color:#c0c0c0; /* ページ全体の背景色をsilverにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */
}

.design1 {
  background-color:#00ff00; /* ページ全体の背景色をlimeにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */

  a:link { color: #ff00ff; } /* 未訪問の要素 */
  a:visited { color: #ff00ff; } /* 訪問済み要素 */
  a:active { color: #000000; } /* クリック中の要素 */
}

.design2 {
  background-color:#00ffff; /* ページ全体の背景色をcyan(aqua)にする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */

  a:link { color: #ff0000; } /* 未訪問の要素 */
  a:visited { color: #ff0000; } /* 訪問済み要素 */
  a:active { color: #000000; } /* クリック中の要素 */
}

.design3 {
  background-color:#ffff00; /* ページ全体の背景色をyellowにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */

  a:link { color: #0000ff; } /* 未訪問の要素 */
  a:visited { color: #0000ff; } /* 訪問済み要素 */
  a:active { color: #000000; } /* クリック中の要素 */
}

.design4 {
  background-color:#9400d3; /* ページ全体の背景色をdarkvioletにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */

  a:link { color: #6bff2c; } /* 未訪問の要素 */
  a:visited { color: #6bff2c; } /* 訪問済み要素 */
  a:active { color: #000000; } /* クリック中の要素 */
}

.design5 {
  background-color:#ffa500; /* ページ全体の背景色をorangeにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */

  a:link { color: #005aff; } /* 未訪問の要素 */
  a:visited { color: #005aff; } /* 訪問済み要素 */
  a:active { color: #000000; } /* クリック中の要素 */
}

/* design6は、design4の背景色を薄くした版 */
.design6 {
  background-color:#9460d3; /* ページ全体の背景色をdarkvioletにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */

  a:link { color: #6bff2c; } /* 未訪問の要素 */
  a:visited { color: #6bff2c; } /* 訪問済み要素 */
  a:active { color: #000000; } /* クリック中の要素 */
}

.design7 {
  background-color:#ffd700; /* ページ全体の背景色をgoldにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */

  a:link { color: #0028ff; } /* 未訪問の要素 */
  a:visited { color: #0028ff; } /* 訪問済み要素 */
  a:active { color: #000000; } /* クリック中の要素 */
}

.design8 {
  background-color:#808080; /* ページ全体の背景色をgrayにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */
}

.design9 {
  background-color:#9acd32; /* ページ全体の背景色をyellowgreenにする。 */
  font-family: "Times New Roman",serif; /* フォントを「Times New Roman」に指定 */
  text-align:center; /* インライン要素のセンタリング */

  a:link { color: #6532cd; } /* 未訪問の要素 */
  a:visited { color: #6532cd; } /* 訪問済み要素 */
  a:active { color: #000000; } /* クリック中の要素 */
}

.equation { background-color:#ffffff; } /* 数式の背景を白色にする。 */
.whitered { background-color:#ffffff;color:#ff0000; } /* 背景色をwhite、文字色をredにする。 */
.sourcecode {
  margin-left:auto; /* ブロックレベル要素のみのセンタリング */
  margin-right:auto; /* ブロックレベル要素のみのセンタリング */
  text-align:left; /* ソースコード記載用なので、インライン要素は左寄せ */
}





.center {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.blockcenter {
  margin-left:auto;
  margin-right:auto;
} /* ブロックレベル要素のみのセンタリング */
.inlinecenter {
  text-align:center;
} /* インライン要素のみのセンタリング */

.equation { background-color:#ffffff; } // 数式の背景を白色にする。

.layer {
  position:absolute; // 絶対座標の指定
  background-color:transparent; // 透明の指定
  left:0; top:0;  
}

.blue { color:#0000ff } /* 文字色をblueに */
.green { color:#008000; } /* 文字色をgreenに */
.orange { color:#ffa500; } /* 文字色をorangeに */
.red { color:#ff0000; } /* 文字色をredに */
.purple { color:#800080; } /* 文字色をpurpleに */
.yellow { color:#ffff00; } /* 文字色をyellowに */

.blackcyan {
  background-color:#000000; /* 背景色をblackに */
  color:#00ffff; /* 文字色をcyanに */
}

.blackmagenta {
  background-color:#000000; /* 背景色をblackに */
  color:#ff00ff; /* 文字色をmagentaに */
}

.blacklime {
  background-color:#000000; /* 背景色をblackに */
  color:#00ff00; /* 文字色をlimeに */
}

.blackorange {
  background-color:#000000; /* 背景色をblackに */
  color:#ffa500; /* 文字色をorangeに */
}

.blackred {
  background-color:#000000; /* 背景色をblackに */
  color:#ff0000; /* 文字色をredに */
}

.blackyellow {
  background-color:#000000; /* 背景色をblackに */
  color:#ffff00; /* 文字色をyellowに */
}

span.whitered {
  background-color:#ffffff; /* 背景色をwhiteに */
  color:#ff0000; /* 文字色をredに */
}

span.whitegreen {
  background-color:#ffffff; /* 背景色をwhiteに */
  color:#008000; /* 文字色をgreenに */
}

span.whiteblue {
  background-color:#ffffff; /* 背景色をwhiteに */
  color:#0000ff; /* 文字色をblueに */
}

span.whitepurple {
  background-color:#ffffff; /* 背景色をwhiteに */
  color:#800080; /* 文字色をpurpleに */
}

span.whitecyan {
  background-color:#ffffff; /* 背景色をwhiteに */
  color:#00ffff; /* 文字色をcyanに */
}

span.whitemaroon {
  background-color:#ffffff; /* 背景色をwhiteに */
  color:#800000; /* 文字色をmaroonに */
}

Shadow Academy トップへ戻る

inserted by FC2 system