sWiki マニュアル２ Wiki

#styleプラグイン用に用意されているスタイル一覧です。
使用方法は装飾に記載されています。
スタイルは適時追加されていきます。

メニュー

#styleプラグイン

sWIKIでは #styleプラグインを実装しています。

#styleプラグインは、予め用意されたスタイルクラスを<div>タグに適用するプラグインです。

#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}

上の場合、クラスに予め用意されている「dd_greentable」が適用されました。

---

div.dd_greentable table thead tr td {
background-color: #6A8832;
color: white;
}

---

重複してクラスを適用したい場合は、半角スペースを開けて入力して下さい。

用意されているスタイルはこちらをご覧下さい。

表・table

div.dd_greentable table thead tr td {
background-color: #6A8832;
color: white;
}
(見本1)

#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}

---

div.dd_greentable table tbody tr td {
background-color: white;
color: black;
}
(見本2)

#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}

---

div.dd_bluetable table thead tr td {
background-color: #325488;
color: white;
}
(見本3)

#style(class=dd_bluetable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}

---

div.dd_bluetable table tbody tr td {
background-color: white;
color: black;
}
(見本4)

#style(class=dd_bluetable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}

---

div.dd_table_noborder table tr td {
border: none;
}

(見本5)

#style(class=dd_table_noborder){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}

---

　#style（）を適用していないテーブル

float

左寄せや右寄せにして表示するスタイルを適用します。

---

div.dd_floatleft { float: left; margin-right: 4px; }
div.dd_floatright { float: right; margin-left: 4px; }

---

※以下のクリアーを使うことで右寄せ（スタイルの適用）が解除される。
#style(class=clearfix){{
}}

• ソース

  //左に寄せる
  #style(class=dd_floatleft){{
  |ヘッダー|ここは左に表示ヘッダー|h
  |td|td|
  }}
  
  //右に寄せる
  #style(class=dd_floatright){{
  |ヘッダー|ここは右に表示ヘッダー|h
  |td|td|
  }}
  ※以下のクリアーを使うことで右寄せが解除される。
  #style(class=clearfix){{
  #hr
  }}
  

• 実際の表示

• ソース

  #style(class=dd_floatleft,40){{
  |ヘッダー|ここは左に表示ヘッダー|h
  |td|td|
  }}
  
  
  

width

div.dd_width200 { width: 200px; }
div.dd_width250 { width: 250px; }
div.dd_width300 { width: 300px; }
div.dd_width350 { width: 350px; }

div.dd_width33par { width: 33%; }
div.dd_width50par { width: 50%; }
div.dd_width66par { width: 66%; }

何の説明もないが表の横幅を固定幅にするプラグインかと思う・・・。

padding

div.dd_padding5 { padding: 5px; }
div.dd_padding10 { padding: 10px; }
div.dd_padding15 { padding: 15px; }

パディング5Px

パディング10Px

パディング15Px

ああ

• ソース表示

  パディング5Px
  #style(class=dd_padding5){{
  テスト
  テスト
  テスト
  }}
  パディング10Px
  #style(class=dd_padding10){{
  テスト
  テスト
  テスト
  }}
  パディング15Px
  #style(class=dd_padding15){{
  テスト
  テスト
  テスト
  }}
  

border

div.dd_border000 { border: 1px solid #000; }
div.dd_border444 { border: 1px solid #444; }
div.dd_border888 { border: 1px solid #888; }
div.dd_borderccc { border: 1px solid #ccc; }
div.dd_borderfff { border: 1px solid #fff; }

BGcolor

div.dd_bgcolor000 { background-color: #000; }
div.dd_bgcolor444 { background-color: #444; }
div.dd_bgcolor888 { background-color: #888; }
div.dd_bgcolorccc { background-color: #ccc; }
div.dd_bgcolorfff { background-color: #fff; }

color

div.dd_color000 { color: #000; }
div.dd_color444 { color: #444; }
div.dd_color888 { color: #888; }
div.dd_colorccc { color: #ccc; }
div.dd_colorfff { color: #fff; }

clear

.clearfix hr { border: 0px; }

clear 利用例

#style(class=clearfix){{
#hr
}}

div.paddingKraft{ padding: 25px; }

#style(class=div.paddingKraft){{
#hr
}}