Top > styleプラグインの用意スタイル一覧
|
styleプラグインの用意スタイル一覧 の変更点
#nosidebar
~#styleプラグイン用に用意されているスタイル一覧です。
使用方法は[[装飾>装飾#d22a4eb6]]に記載されています。
スタイルは適時追加されていきます。
*メニュー [#ldae8269]
#contents
*#styleプラグイン [#d22a4eb6]
sWIKIでは #styleプラグインを実装しています。
#styleプラグインは、予め用意されたスタイルクラスを<div>タグに適用するプラグインです。
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
上の場合、クラスに予め用意されている「dd_greentable」が適用されました。
----
div.dd_greentable table thead tr td {
background-color: #6A8832;
color: white;
}
----
重複してクラスを適用したい場合は、半角スペースを開けて入力して下さい。
#br
用意されているスタイルは[[こちら>styleプラグインの用意スタイル一覧]]をご覧下さい。
#br
*表・table [#wec115fc]
//******************************************************************************************************************************************************//
//********** 説明不足でよくわからないし、記述方法の見本も(ちょろっとしか)ないし、どう適用してよいのかわかりません。 ****//
//********** おさるさんにでもわかるくらいの丁寧な説明をお願いいたします。 ****//
//********** #regionを使って動作見本を作ろうと試行錯誤しましたが理解できないので断念しました。 ****//
//********** ****//
//********** 例えばdd_greentableには「thead」と「tbody」の2種類があるのかそれとも2つの構文を合わせて1種類なのか？の説明がない ****//
//********** styleプラグインの「用意スタイル」とは自由に色を指定できないのか、色の指定を変更できるのかも記載がない ****//
//********** styleプラグインの「class=」の指定方法がわからない。「用意スタイル」と言うくらいだから運営サイドにしか定義できないのかな？ ****//
//******************************************************************************************************************************************************//
//********** テーブルの横列のtdの色を交互に明暗の縞模様（格子縞模様）にできるようなスタイルプラグインを作ってほしい。存在するのかを知らない。 ****//
//********** ※例：白から始まる交互版 ※例：黒から始まる交互版 ****//
//********** |ヘッダー|ここはtableヘッダー|h |ヘッダー|ここはtableヘッダー|h ****//
//********** |BGCOLOR(white)|BGCOLOR(white)|c |BGCOLOR(black)|BGCOLOR(black)|C ****//
//********** |td|td| |td|td| ****//
//********** |BGCOLOR(black)|BGCOLOR(black)|C |BGCOLOR(white)|BGCOLOR(white)|c ****//
//********** |td|td| |td|td| ****//
//********** ****//
//********** 名づけるなら「dd_zebraBW」と「dd_zebraWB」とか？ ****//
//******************************************************************************************************************************************************//
//********** マウスオーバーでテーブルの横列のtdの色を変化することができるスタイルプラグインを作ってほしい。既に存在するのかを知らないけど。 ****//
//********** マウスオーバーで変化する横列の色を任意の色で指定できると尚よし ****//
//******************************************************************************************************************************************************//
div.dd_greentable table thead tr td {
background-color: #6A8832;
color: white;
}
(見本1)
#pre{{{{
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#hr
div.dd_greentable table tbody tr td {
background-color: white;
color: black;
}
(見本2)
#pre{{{{
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_greentable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#br
#hr
div.dd_bluetable table thead tr td {
background-color: #325488;
color: white;
}
(見本3)
#pre{{{{
#style(class=dd_bluetable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_bluetable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
|td|td|
}}
#hr
div.dd_bluetable table tbody tr td {
background-color: white;
color: black;
}
(見本4)
#pre{{{{
#style(class=dd_bluetable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_bluetable){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
#br
#hr
div.dd_table_noborder table tr td {
border: none;
}
(見本5)
#pre{{{{
#style(class=dd_table_noborder){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
}}
}}}}
#style(class=dd_table_noborder){{
|ヘッダー|ここはtableヘッダー|h
|td|td|
|td|td|
}}
#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=clearfix){{
}}
// ソース表示
-ソース
#pre(){{{{{{{{
//左に寄せる
#style(class=dd_floatleft){{
|ヘッダー|ここは左に表示ヘッダー|h
|td|td|
}}
//右に寄せる
#style(class=dd_floatright){{
|ヘッダー|ここは右に表示ヘッダー|h
|td|td|
}}
※以下のクリアーを使うことで右寄せが解除される。
#style(class=clearfix){{
#hr
}}
}}}}}}}}
-実際の表示
#style(class=dd_floatleft){{
|ヘッダー|ここは左に表示ヘッダー|h
|td|td|
}}
#style(class=dd_floatright){{
|ヘッダー|ここは右に表示ヘッダー|h
|td|td|
}}
#br
#style(class=clearfix){{
#hr
}}
// ソース表示
-ソース
#pre(){{{{{{{{
#style(class=dd_floatleft,40){{
|ヘッダー|ここは左に表示ヘッダー|h
|td|td|
}}
}}}}}}}}
#style(class=dd_floatleft){{
|ヘッダー|ここは左に表示ヘッダー|h
|td|td|
}}
#style(class=clearfix){{
}}
*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; }
#style(class=div.paddingKraft){{
#hr
}}
#br
//*コメント [#le8a0e9e]
//このページは凍結される予定が、凍結されてませんでした。
//エラーなどのお問い合わせは[[公式>http://www.swiki.jp/]]のお問い合わせから宜しくお願い致します。
//#pcomment(,30,reply,nomove);
|
