sWiki マニュアル2 Wiki
[
ホーム
|
リロード
|
新規
]
サイト内検索
:
[
差分チェッカー
]
[
アップローダー
]
【楽天スーパーDEAL】毎日更新・最大50%ポイントバック!!(広告)
Tweet
styleプラグインの用意スタイル一覧/複製
をテンプレートにして作成
開始行:
#nosidebar
~#styleプラグイン用に用意されているスタイル一覧です。
使用方法は[[装飾>装飾#d22a4eb6]]に記載されています。
スタイルは適時追加されていきます。
*メニュー [#ldae8269]
#contents
*table [#wec115fc]
//*******************************************************...
//********** 説明不足でよくわからないし、記述方法の見...
//********** おさるさんにでもわかるくらいの丁寧な説明...
//********** #regionを使って動作見本を作ろうと試行錯誤...
//********** ...
//********** 例えばdd_greentableには「thead」と「tbody...
//********** styleプラグインの「用意スタイル」とは自由...
//********** styleプラグインの「class=」の指定方法がわ...
//*******************************************************...
//********** テーブルの横列のtdの色を交互に明暗の縞模...
//********** ※例:白から始まる交互版 ...
//********** |ヘッダー|ここはtableヘッダー|h ...
//********** |BGCOLOR(white)|BGCOLOR(white)|c ...
//********** |td|td| ...
//********** |BGCOLOR(black)|BGCOLOR(black)|C ...
//********** |td|td| ...
//********** ...
//********** 名づけるなら「dd_zebraBW」と「dd_zebraWB...
//*******************************************************...
//********** マウスオーバーでテーブルの横列のtdの色を...
//********** マウスオーバーで変化する横列の色を任意の...
//*******************************************************...
div.dd_greentable table thead tr td {
background-color: #6A8832;
color: white;
}
#region(見本1)
#pre{{{{
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_greentable table thead){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#hr
div.dd_greentable table tbody tr td {
background-color: white;
color: black;
}
#region(見本2)
#pre{{{{
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_greentable table tbody){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#br
#hr
div.dd_bluetable table thead tr td {
background-color: #325488;
color: white;
}
#region(見本3)
#pre{{{{
#style(class=dd_bluetable table){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_bluetable table){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#hr
div.dd_bluetable table tbody tr td {
background-color: white;
color: black;
}
#region(見本4)
#pre{{{{
#style(class=dd_bluetable table){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_bluetable table){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#br
#hr
div.dd_table_noborder table tr td {
border: none;
}
#region(見本5)
#pre{{{{
#style(class=dd_table_noborder){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_table_noborder){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#br
#hr
#style()を適用していないテーブル
|ヘッダー|ここはtableヘッダー|h
|td|td|
*float [#c1fde2dd]
div.dd_floatleft { float: left; margin-right: 4px; }
div.dd_floatright { float: right; margin-left: 4px; }
----
#style(class=dd_floatleft){{
|ヘッダー|ここは左に表示ヘッダー|h
|td|td|
}}
#style(class=dd_floatright){{
|ヘッダー|ここは右に表示ヘッダー|h
|td|td|
}}
#br
#style(class=clearfix){{
#hr
}}
#pre(){{{{{{{{
#style(class=dd_floatleft){{
|ヘッダー|ここは左に表示ヘッダー|h
|td|td|
}}
#style(class=dd_floatright){{
|ヘッダー|ここは右に表示ヘッダー|h
|td|td|
}}
※以下のクリアーを使うことで右寄せが解除される?
#style(class=clearfix){{
#hr
}}
}}}}}}}}
*width [#p35976f1]
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 [#lc11d32b]
div.dd_padding5 { padding: 5px; }
div.dd_padding10 { padding: 10px; }
div.dd_padding15 { padding: 15px; }
パディング5Px
#style(class=dd_padding5){{
テスト
テスト
テスト
}}
パディング10Px
#style(class=dd_padding10){{
テスト
テスト
テスト
}}
パディング15Px
#style(class=dd_padding15){{
テスト
テスト
テスト
}}
#pre{{{{{{{{
パディング5Px
#style(class=dd_padding5){{
テスト
テスト
テスト
}}
パディング10Px
#style(class=dd_padding10){{
テスト
テスト
テスト
}}
パディング15Px
#style(class=dd_padding15){{
テスト
テスト
テスト
}}
}}}}}}}}
*border [#x5d12fc2]
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 [#w7ecc7cb]
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 [#v5b06afb]
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 [#kddc4385]
.clearfix hr { border: 0px; }
#br
clear 利用例
#style(class=clearfix){{
#hr
}}
div.paddingKraft{ padding: 25px; }
#br
//*コメント [#le8a0e9e]
//このページは凍結される予定が、凍結されてませんでした。
//エラーなどのお問い合わせは[[公式>http://www.swiki.jp/]]...
//#pcomment(,30,reply,nomove);
終了行:
#nosidebar
~#styleプラグイン用に用意されているスタイル一覧です。
使用方法は[[装飾>装飾#d22a4eb6]]に記載されています。
スタイルは適時追加されていきます。
*メニュー [#ldae8269]
#contents
*table [#wec115fc]
//*******************************************************...
//********** 説明不足でよくわからないし、記述方法の見...
//********** おさるさんにでもわかるくらいの丁寧な説明...
//********** #regionを使って動作見本を作ろうと試行錯誤...
//********** ...
//********** 例えばdd_greentableには「thead」と「tbody...
//********** styleプラグインの「用意スタイル」とは自由...
//********** styleプラグインの「class=」の指定方法がわ...
//*******************************************************...
//********** テーブルの横列のtdの色を交互に明暗の縞模...
//********** ※例:白から始まる交互版 ...
//********** |ヘッダー|ここはtableヘッダー|h ...
//********** |BGCOLOR(white)|BGCOLOR(white)|c ...
//********** |td|td| ...
//********** |BGCOLOR(black)|BGCOLOR(black)|C ...
//********** |td|td| ...
//********** ...
//********** 名づけるなら「dd_zebraBW」と「dd_zebraWB...
//*******************************************************...
//********** マウスオーバーでテーブルの横列のtdの色を...
//********** マウスオーバーで変化する横列の色を任意の...
//*******************************************************...
div.dd_greentable table thead tr td {
background-color: #6A8832;
color: white;
}
#region(見本1)
#pre{{{{
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_greentable table thead){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#hr
div.dd_greentable table tbody tr td {
background-color: white;
color: black;
}
#region(見本2)
#pre{{{{
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_greentable table tbody){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#br
#hr
div.dd_bluetable table thead tr td {
background-color: #325488;
color: white;
}
#region(見本3)
#pre{{{{
#style(class=dd_bluetable table){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_bluetable table){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#hr
div.dd_bluetable table tbody tr td {
background-color: white;
color: black;
}
#region(見本4)
#pre{{{{
#style(class=dd_bluetable table){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_bluetable table){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#br
#hr
div.dd_table_noborder table tr td {
border: none;
}
#region(見本5)
#pre{{{{
#style(class=dd_table_noborder){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_table_noborder){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#endregion
#br
#hr
#style()を適用していないテーブル
|ヘッダー|ここはtableヘッダー|h
|td|td|
*float [#c1fde2dd]
div.dd_floatleft { float: left; margin-right: 4px; }
div.dd_floatright { float: right; margin-left: 4px; }
----
#style(class=dd_floatleft){{
|ヘッダー|ここは左に表示ヘッダー|h
|td|td|
}}
#style(class=dd_floatright){{
|ヘッダー|ここは右に表示ヘッダー|h
|td|td|
}}
#br
#style(class=clearfix){{
#hr
}}
#pre(){{{{{{{{
#style(class=dd_floatleft){{
|ヘッダー|ここは左に表示ヘッダー|h
|td|td|
}}
#style(class=dd_floatright){{
|ヘッダー|ここは右に表示ヘッダー|h
|td|td|
}}
※以下のクリアーを使うことで右寄せが解除される?
#style(class=clearfix){{
#hr
}}
}}}}}}}}
*width [#p35976f1]
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 [#lc11d32b]
div.dd_padding5 { padding: 5px; }
div.dd_padding10 { padding: 10px; }
div.dd_padding15 { padding: 15px; }
パディング5Px
#style(class=dd_padding5){{
テスト
テスト
テスト
}}
パディング10Px
#style(class=dd_padding10){{
テスト
テスト
テスト
}}
パディング15Px
#style(class=dd_padding15){{
テスト
テスト
テスト
}}
#pre{{{{{{{{
パディング5Px
#style(class=dd_padding5){{
テスト
テスト
テスト
}}
パディング10Px
#style(class=dd_padding10){{
テスト
テスト
テスト
}}
パディング15Px
#style(class=dd_padding15){{
テスト
テスト
テスト
}}
}}}}}}}}
*border [#x5d12fc2]
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 [#w7ecc7cb]
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 [#v5b06afb]
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 [#kddc4385]
.clearfix hr { border: 0px; }
#br
clear 利用例
#style(class=clearfix){{
#hr
}}
div.paddingKraft{ padding: 25px; }
#br
//*コメント [#le8a0e9e]
//このページは凍結される予定が、凍結されてませんでした。
//エラーなどのお問い合わせは[[公式>http://www.swiki.jp/]]...
//#pcomment(,30,reply,nomove);
ページ名: