@WikiのCSSを解読する - Nino add up @Wiki

デフォルトの設定

@charset "utf-8";

文字コードの設定
いじる必要なし

* { box-sizing : border-box}
* { -moz-box-sizing : border-box}

*{
margin:0px;
padding:0px;
}

*{}:すべての要素に対する設定
margin:領域間のスペースの設定　指定はスペース区切り
padding:領域内のスペースの設定　指定はスペース区切り
- 値を1つ指定:指定した値が[上下左右]のマージン
- 値を2つ指定:記述した順に[上下][左右]のマージン
- 値を3つ指定:記述した順に[上][左右][下]のマージン
- 値を4つ指定:記述した順に[上][右][下][左]のマージン
- 上:top，下:bottom，左:left，右:rightでも設定可能
- 例:margin-top:5px;

body{
margin:0;
color:#333;
background:#fff;
}

body{}:body（全体）に関する設定
color:文字色の設定
background:背景の色を設定

/* 基本リンクスタイル */

&html(/* なんか文字 */)でコメントアウト

a:link{color:#000;text-decoration:underline;}
a:visited{color:#666;text-decoration:underline;}
a:hover{color:#333;text-decoration:none;}
a:active{color:#333;}

リンク文字の設定
- link:未訪問であるとき
- visited:訪問済であるとき
- hover:クリックして待っているとき
- active:リンクの上にカーソルがあるとき
color:色の設定
（参考：ＷＥＢカラーリファレンス > http://www.htmq.com/color/index.shtml ）
text-decoration:太字，アンダーラインの設定？
- none:なにもなし．デフォルト．
- underline:下線
- overline:上線
- line-through:打ち消し線
- blink:点滅

/* メイン全体の枠 */
#container{margin:0 10px;}

#container{}:headbar，banner，links-left，content，links，footerすべての設定

/* ----- Header ----- */
#headbar{
/* ページ上部のバースタイル設定 */
height:30px;
text-align:left;
margin:0;
padding:3px;
color:#000;
font-size:12px;
background:#eee;
line-height: 150%;
border-bottom:2px solid #666;
}

#headbar{}:headbarの設定

#headbar a{color:#333;text-decoration:none;}
#headbar a:hover{color:#333;text-decoration:underline;}

.wikilogo{
/* アットウィキロゴマーク */
position:absolute;
left:2px;
top:2px;
text-align:left;
}

.wikilogo{}:@Wikiのロゴの設定

.barRight{
/* ページ上部バーの右部分 */
position:absolute;
right:2px;
top:0px;
text-align:right;
background-color:#fff;
}

.barRight{}:メニューの設定

.barRight input{
background:#FFF;
}

.links_pul_menu{
/* ページ上部のプルダウンメニュー */
position:absolute;
right:2px;
margin-top:3px;
}

#banner{
/*ページタイトルが入る部分*/
text-align:left;
margin-bottom:20px;
border-bottom:#666 solid 1px;
}

banner{}:ページタイトルの領域設定

#banner h1{
/* サイトタイトル */
font-size:24px;
padding:15px;
margin:0;
border-bottom:none;
border-left:none;
}

#banner h1{}:サイトタイトルの設定

#banner p{
/* ページタイトル */
font-size:16px;
padding: 2px 20px;
}

#banner p{}:ページタイトルの設定

#banner a:link{color:#333;text-decoration:none;}
#banner a:visited{color:#333;text-decoration:none;}
#banner a:hover{color:#666;text-decoration:none;}
#banner a:active{color:#666;text-decoration:none;}

#banner領域ないでのリンク色の設定

/* ----- Tab ----- */
#tab{
margin-left:200px;
font-size:12px;
width:500px;
}

#tab{}:本文領域の設定？

#tab a{text-decoration:none;}

本文領域内でのリンク文字の設定

以下は上に表示される「新しいページ」などの設定

.tab01{
text-align:center;
width:60px;
border:#333 solid 1px;
border-width:1px 1px 0;
padding:3px;
float:left;
margin-right:10px;
}

.tab02{
text-align:center;
width:70px;
border:#333 solid 1px;
border-width:1px 0 0 1px;
background:#fff;
padding:3px;
float:left;
}

.tab03{
text-align:center;
width:70px;
border:#333 solid 1px;
border-width:1px 0 0 1px;
background:#fff;
padding:3px;
float:left;
}

.tab04{
text-align:center;
width:80px;
background:#fff;
padding:3px;
float:left;
color:#000;
border:#333 solid 1px;
border-width:1px 1px 0 1px;
}

.tab05{
text-align:center;
width:65px;
background:#fff;
padding:3px;
float:left;
border:#333 solid 1px;
border-width:1px 1px 0;
}

.newpage{
border:#333 solid 1px;
border-width:1px 1px 0;
width:120px;
padding:4px 0 3px 17px;
margin-left:10px;
float:left;
}

/* ----- Tab Link ----- */
#tab a:link{color:#333;text-decoration: none;}
#tab a:visited{color:#333;text-decoration: none;}
#tab a:hover{color:#333;text-decoration: underline;}
#tab a:active{color:#333;text-decoration: underline;}

/* ----- Contents ----- */
/* コンテンツの配置 */

/*\*/
* html #wrapper{height:1%;}
/**/

#wrapper{}:枠線の設定？

#wrapper{
margin-right:150px;
}

#content{
margin-left:200px
}

#content{}:本文の設定？

#left{
margin-top:-13px;
width:188px;
float:left;
overflow:auto;
}

#left:左サイドバーの設定？

/*\*/
* html #left{
position:relative;
top:0;
}
/*\*/

左サイドバーの位置設定？

#right{
width:135px;
float:right;
}

#right{}:右サイドバーの設定？

/* ----- Center ----- */
#wiki{}

#wiki{}:？？

#wikibodytop{}

#wikibodytop{}:？？

#wikibody{
border:#333 solid 1px;
text-align:left;
padding:10px;
}

#wikibody{}:本文表示部分の設定？

#wikibodybottom{
margin-top:5px;
margin-bottom:5px;
}

#wikibodybottom{}:？？

/* ----- Main ----- */

.main{
color:#333;
text-align:left;
}

.posted{
/* トラックバック　リンクの表示 */
font-size:11px;
text-align:right;
margin:20px 0 5px;
}

.posted a:link{}
.posted a:visited{}
.posted a:hover{}
.posted a:active{}

.attach, .footnote{
float:left;
text-align:left;
font-size:12px;
}

/* ----- Left Right----- */
#lefttop,#righttop{}

#leftbottom,#rightbottom{}

/* ----- Ads ----- */
#adtitle{
text-align:left;
font-size:12px;
margin-bottom:5px;
}

.ad{
font-size:12px;
text-align:center;
}

#adbottom{
margin-bottom:30px;
}

/* ----- Copyright ----- */

#copyright{
text-align:center;
}

#powered{
text-align:center;
margin:10px;
}

#syndicate{
text-align:center;
font-size:12px;
margin-bottom:10px;
}

#syndicate a{color:fff;}

/* ----- Footer ----- */
#footbar{
text-align:center;
margin:0;
margin-top:8px;
padding:10px;
color:#000;
font-size:12px;
background:#ddd;
line-height: 200%;
border:solid #666;
border-width:2px 0 2px 0;
}

#footbar a{color:#000;}

#footer{
text-align:center;
clear:both;
}

/* General */

.main h1{
color:#000;
font-size:24px;
padding:5px;
margin-left:5px;
}
.main h2{
color:#000;
font-size:20px;
padding:5px;
margin-left:8px;
}
.main h3{
color:#333;
font-size:18px;
padding:5px;
margin-left:12px;
}
.main h4{
color:#333;
font-size:16px;
padding:5px;
margin-left:15px;
}
.main h5{
color:#333;
font-size:14px;
padding:5px;
margin-left:20px;
}
.main h6{
color:#333;
font-size:12px;
padding:5px;
margin-left:20;x
}

img {
border: none;
vertical-align: middle;
}

hr{
margin-top: 5px;
margin-bottom: 5px;
}

ul,ol{
padding:0;
margin:0;
margin-left: 20px;
}

ul li {
margin: 0 0px 0 10px;
padding: 0;
line-height: 150%;
}

ol li {
margin: 0 0px 0 10px;
padding: 0;
line-height: 150%;
}

dt {
font-weight: bold;
margin-top: 1em;
margin-left: 1em;
}

.main table, #right table, #left table{
padding:0px;
border:0px;
text-align:left;
color:inherit;
table-layout: auto;
border-collapse:collapse;
}

.main th, #right th, #left th
{
padding:5px;
margin:1px;
text-align:center;
color:inherit;
border:1px solid #666;
}
.main td, #right td, #left td
{
font-size:12px;
padding:5px;
margin:1px;
color:inherit;
border:1px solid #666;
}
.main tr, #right tr, #left tr
{
font-size:12px;
padding:5px;
margin:1px;
color:inherit;
border:1px solid #666;
}

pre {
border: #666 1px dotted;
padding: 5px;
margin: 5px 0px 5px 5px;
white-space: pre;
color: #000;
background:#eee;
}

blockquote {
margin: 5px 0px 5px 5px;
padding: 5px;
border: #666 1px solid;
color:#00;
background:#eee;
}

em {
font-style:italic;
}

strong {
font-weight:bold;
}

address {
font-style:normal;
}

.plugin_vote table{
border:1px solid #666;
margin:3px;
}

/* 警告文 */
.warning,
.warning{
color: #FCC;
}
/* 非表示 */
.hidden{
display: none;
}

/* 差分など */
span.diff_add{
color: red;
background-color:#FFF;
}
span.diff_del{
color: blue;
background-color:#FFF;
}

/* 検索結果表示 */
span.word1{ color: black; background-color: #ffff66; }
span.word2{ color: black; background-color: #a0ffff; }
span.word3{ color: black; background-color: #99ff99; }
span.word4{ color: black; background-color: #ff9999; }
span.word5{ color: black; background-color: #ff66ff; }
span.word6{ color: white; background-color: #880000; }
span.word7{ color: white; background-color: #00aa00; }
span.word8{ color: white; background-color: #886800; }
span.word9{ color: white; background-color: #004699; }
span.word10{ color: white; background-color: #990099; }

.gloss {
color: black;
text-decoration: underline;
cursor: hand;
font-family: "Verdana";
}

#overDiv h4{
margin: 10px 3px;
color:#000;
font-size:120%;
}

#overDiv{
text-align:left;
line-height:1.5;
font-size:90%;
}

#overDiv table table{
padding:3px 5px;
}
#overDiv table{
padding:1px;
}

[PR] メールフォーム