Top > styleプラグインの用意スタイル一覧 > 複製
#nosidebar ~#styleプラグイン用に用意されているスタイル一覧です。 使用方法は[[装飾>装飾#d22a4eb6]]に記載されています。 スタイルは適時追加されていきます。 *メニュー [#ldae8269] #contents *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; } #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); |
