Edit of 開発日記/2010-11-17
https://pukiwiki.logue.be/%E9%96%8B%E7%99%BA%E6%97%A5%E8%A8%98/2010-11-17
Front page
Diff
Backup
Reload
List of pages
Search
Recent changes
Help
Login
開発日記
2010-11-17
Edit of 開発日記/2010-11-17
#navi(../) *どこまでを標準のスタイルシートとするべきか? [#c2e21169] PukiWiki Advでは、スタイルシートを作る上での基準として、[[Richard Clark氏>http://richclarkdesign.com]]の[[html5reset>http://code.google.com/p/html5resetcss/]]とYahoo UIの[[font.css>http://developer.yahoo.com/yui/fonts/]]などを組み合わせた、[[HTML5 Boilerplate>http://html5boilerplate.com/]]のスタイルシートを読み込ませ、フォントのサイズ指定は極力%による相対指定にするようにしている。 統一された基準を使うことで、環境によるデザイン崩れのリスクをコアレベルで防ぐためである。 しかしながら、PukiWikiはご存知のとおり、プラグインで使用するデザインや、テーブルやリスト、文字のハイライトなどのようなPukiWikiの機能として指定するべきスタイルなどが存在する。ここ設定のどこまでを標準とするべきかが問題である。例えば、テーブル。枠組みのデザインなどは、基本的に以下のようになっている。 #sh(css){{ /* Table */ thead td.style_td, tfoot td.style_td { color:inherit; background-color:#D0D8E0; } thead th.style_th, tfoot th.style_th { color:inherit; background-color:#E0E8F0; } .style_table{ border-spacing:2px; padding:0px; border:0px; margin:auto; border-collapse:separate; border-spacing:1px; background-color:#ccd5dd; } .style_th { padding:5px; margin:1px; text-align:center; color:inherit; background-color:#EEEEEE; } .style_td { padding:5px; margin:1px; color:inherit; background-color:#EEF5FF; } }} 普通考えるならば、独自デザインでもせいぜい色を変えるぐらいしか思いつかないように無いように見えるし、実際スキンを作っている人のスキンを参考にする限り、違うのはカラーリングぐらいで、borderやmargin、paddingなどの設定が変わるということはそうなかった。しかし、もしかしたらpadding:5pxという指定方法も個人の主観が入っているかもしれない。もしもデザイナーがborder-styleをridgeにしたいとかあった場合、当然ここの内容は変わってくる。 これに加えて、Adv.ではフッターの関連ページ一覧や、添付ファイル一覧などの処理に定義文(dl,dt,dd)タグやリストタグ(ul,ol,li)を使用している。同じように見えるのはスタイルシートでそうさせているからであって、中身は全然DOM構造が異なるのだ。 AdvでDOM構造がこうなった理由は、下手な場所でテキストが改行されるのを防ぐ(その都度、text-warpで指定すれば済むが・・・)とか、スムーズスクロール後にハイライトさせる機能の都合上という機能面での目的もあるが、もうひとつの理由として、[[Whiteflow>http://note.openvista.jp/2007/pukiwiki-skin/]]というスキンで、かなりの本体改造を行っていたと見受けられるからである。最低限、これくらいのカスタマイズを本体改造なしにできるレベルのカスタマイズ性がないと、「PukiWikiはデザインがしにくい」という評価は変わらないだろう。
#navi(../) *どこまでを標準のスタイルシートとするべきか? [#c2e21169] PukiWiki Advでは、スタイルシートを作る上での基準として、[[Richard Clark氏>http://richclarkdesign.com]]の[[html5reset>http://code.google.com/p/html5resetcss/]]とYahoo UIの[[font.css>http://developer.yahoo.com/yui/fonts/]]などを組み合わせた、[[HTML5 Boilerplate>http://html5boilerplate.com/]]のスタイルシートを読み込ませ、フォントのサイズ指定は極力%による相対指定にするようにしている。 統一された基準を使うことで、環境によるデザイン崩れのリスクをコアレベルで防ぐためである。 しかしながら、PukiWikiはご存知のとおり、プラグインで使用するデザインや、テーブルやリスト、文字のハイライトなどのようなPukiWikiの機能として指定するべきスタイルなどが存在する。ここ設定のどこまでを標準とするべきかが問題である。例えば、テーブル。枠組みのデザインなどは、基本的に以下のようになっている。 #sh(css){{ /* Table */ thead td.style_td, tfoot td.style_td { color:inherit; background-color:#D0D8E0; } thead th.style_th, tfoot th.style_th { color:inherit; background-color:#E0E8F0; } .style_table{ border-spacing:2px; padding:0px; border:0px; margin:auto; border-collapse:separate; border-spacing:1px; background-color:#ccd5dd; } .style_th { padding:5px; margin:1px; text-align:center; color:inherit; background-color:#EEEEEE; } .style_td { padding:5px; margin:1px; color:inherit; background-color:#EEF5FF; } }} 普通考えるならば、独自デザインでもせいぜい色を変えるぐらいしか思いつかないように無いように見えるし、実際スキンを作っている人のスキンを参考にする限り、違うのはカラーリングぐらいで、borderやmargin、paddingなどの設定が変わるということはそうなかった。しかし、もしかしたらpadding:5pxという指定方法も個人の主観が入っているかもしれない。もしもデザイナーがborder-styleをridgeにしたいとかあった場合、当然ここの内容は変わってくる。 これに加えて、Adv.ではフッターの関連ページ一覧や、添付ファイル一覧などの処理に定義文(dl,dt,dd)タグやリストタグ(ul,ol,li)を使用している。同じように見えるのはスタイルシートでそうさせているからであって、中身は全然DOM構造が異なるのだ。 AdvでDOM構造がこうなった理由は、下手な場所でテキストが改行されるのを防ぐ(その都度、text-warpで指定すれば済むが・・・)とか、スムーズスクロール後にハイライトさせる機能の都合上という機能面での目的もあるが、もうひとつの理由として、[[Whiteflow>http://note.openvista.jp/2007/pukiwiki-skin/]]というスキンで、かなりの本体改造を行っていたと見受けられるからである。最低限、これくらいのカスタマイズを本体改造なしにできるレベルのカスタマイズ性がないと、「PukiWikiはデザインがしにくい」という評価は変わらないだろう。
Update
Preview
Do not change timestamp
Cancel
View Text Formatting Rules
New
Source
Rename
Front page
List of pages
Search
Recent changes
Backup
Referer
Log
Help
RSS of recent changes