#author("2017-08-15T22:13:11+09:00;2017-08-15T22:12:20+09:00","default:user","user")
RIGHT:&size(12){Category:[[Design>:Design]], [[CSS]]};
* List(ul,ol,li)のmargin,paddingをCSSで指定する[#u04a4c04]
- ページ: [[BugTrack]]
- 投稿者: [[hirokasa]]
- 優先順位: 普通
- 状態: 提案
- カテゴリー: その他
- 投稿日: 2006-07-15 (土) 19:36:37
- バージョン: 1.4.7
** メッセージ [#a62726f9]
3カラムのスキンを作っていてul,li,olのmargin,paddingを変更したかったが分からず、pukiwiki.css.phpにて「! important」宣言をし、カスケード順位を上げました。 &br; 元は何処に書いてあるのだろう。pukiwiki.css.phpに記述していただいた方が便利だと思いました。
*** 1.5.1までの実装 [#kd4a2502]
default.ini.php
// リスト構造の左マージン
$_ul_left_margin = 0; // リストと画面左端との間隔(px)
$_ul_margin = 16; // リストの階層間の間隔(px)
$_ol_left_margin = 0; // リストと画面左端との間隔(px)
$_ol_margin = 16; // リストの階層間の間隔(px)
$_dl_left_margin = 0; // リストと画面左端との間隔(px)
$_dl_margin = 16; // リストの階層間の間隔(px)
$_list_pad_str = ' class="list%d" style="padding-left:%dpx;margin-left:%dpx"';
*** 要件 [#lb07f69f]
[[開発日記/2003-03-29]] より、リスト表示位置の要件
- (a) リストの対象: ul, ol, dl
- (b) リストの階層とマークを、リストレベル (- or -- or ---) に合わせて設定したい
-- 「- なしで --」のときにも、「- の後に --」のときにも、同じマーク・インデントで表示したい
- (c) 多くのブラウザで同じ表示を行いたい
-- (c-1) %%CSS対応: 単一DOM要素に複数classを指定できないブラウザでの表示%% 2017-08現在、不要
-- (c-2) 現在多く利用されているブラウザでの表示
- (d) blockquote内でlist出力をしたときに左マージンが大きくなりすぎないようにする
-- 「第1レベルにだけmargin-leftを少し上乗せする、というような記述」が必要
- (e) 旧型式の指定を前提にした実装でレイアウトが大きく崩れないようにする
-- ls2やlistと同じ実装を使っている外部プラグインなど
--- 確認できている範囲では [[official:自作プラグイン/ls2_1.inc.php]] [[official:自作プラグイン/contents2_1.inc.php]]
- (f) 特定の条件で、リストレベルが飛んだ時のインデントを圧縮できるようにする (ls2でインデントが大きくなりすぎないように [[BugTrack/261]] )
--------
- list1(頭に-を附ける)で記述すると自動的に「style="padding-left:16px;margin-left:16px"」が付加されます。 &br; このstyleは本来CSSで記述されるものだと思います。流石にMenuBarに同記述をするとこのstyle=～は付加されません。 &br; どうなっているのか調査中です。お教えいただければ幸いです。 -- [[hirokasa]] &new{2006-07-15 (土) 19:48:10};
- 私もちょっと引っかかっていた部分です。default.ini.phpに記述しているのですね。ご質問しているのは Menu は list1 が付かず、Body には list1が付く、と言う部分ですか？それとも Styleが記述されている場所ですか？ -- [[Yoshii]] &new{2006-07-15 (土) 20:43:05};
- default.ini.phpの記述を教えていただきありがとうございます。 &br; 何故メニューバーは list1 が付かないのか。試しに「<?php echo convert_html(get_source('MenuBar')) ?>」にしてメニューバーを出力したら、リスト構造の左マージンが適用されました。 &br; リスト構造のmargin,paddingはpukiwiki.css.phpにて記述したほうが良いのではないかと考えました。 -- [[hirokasa]] &new{2006-07-15 (土) 21:08:52};
pukiwiki.css.php
ul.list1 {
list-style-type:disc;
padding: 0px 0px 0px 16px;
margin: 0px 0px 0px 16px;
}
#menubar ul.list1 {
list-style-type:disc;
padding: 0px;
margin: 0px;
}
他のリスト構造も同様です。
- 一応事情があるですよ。 see: [[BugTrack2/126]] -- [[にぶんのに]] &new{2006-07-15 (土) 22:41:06};
- 過去の BugTrack を読み解くと現状の仕様はブラウザのCSS解釈差異に対する苦肉の策であると理解しました。今では hirokasa さんの提案する方法で回避できそうですね。 -- [[Yoshii]] &new{2006-07-16 (日) 00:19:24};
-- そう単純でもないみたい。see [[開発日記/2003-03-29]] -- [[名無しさん]] &new{2008-01-10 (木) 16:34:36};
- [[BugTrack2/126]] -- &new{2008-01-10 (木) 20:04:17};
- styleを抜いた場合は以下のcssをpukiwiki.css.phpに追加することで位置合わせに対応できると思います。 -- &new{2017-07-28 (金) 12:20:37};
.list1 {
padding-left: 16px;
margin-left: 16px
}
.list2 {
padding-left: 32px;
margin-left: 32px
}
.list3 {
padding-left: 48px;
margin-left: 48px
}
.list1 .list2 {
padding-left: 16px;
margin-left: 16px
}
.list1 .list3 {
padding-left: 32px;
margin-left: 32px
}
.list2 .list3 {
padding-left: 16px;
margin-left: 16px
}
- 再提案ありがとうございます。もう、古すぎるブラウザのことは考慮しなくていいので、当時の要件を整理したうえでCSS化に踏み切ってもよさそうです -- [[umorigu]] &new{2017-08-01 (火) 23:21:02};
- 当時の議論([[開発日記/2003-03-29]])から、要件を抜き出して整理しました。タイトル変更しました。「ul,li,olのmargin,paddingはpukiwiki.css.phpに記述する方が便利だと思います。」→「List(ul,ol,li)のmargin,paddingをCSSで指定する」 -- [[umorigu]] &new{2017-08-15 (火) 07:32:53};
-- > >> >>> のレベル違いのblockquoteができることをこの流れで知りました。これって今使われてるのかな... -- [[umorigu]] &new{2017-08-15 (火) 07:55:12};
- list以外での利用箇所: lsプラグインでtitleオプションを付けた時には list1 ... list4 が使われる -- [[umorigu]] &new{2017-08-15 (火) 15:55:17};
- やはり今のHTMLの構造だとCSSで実現できないケースが出てきますね。ls系プラグインが階層表現にlistを使う場合、list1,2,3,..,N となり、さらに見出しを同じlistツリーで表示すると、深い階層でリストレベルの逆転が起きます -- [[umorigu]] &new{2017-08-15 (火) 21:20:26};
- A/B/C/D/E/F というページを作り、ls2_1とlsxで階層表示を行い、更にレベルが逆転した見出しを表示するサンプルです -- [[umorigu]] &new{2017-08-15 (火) 21:20:26};
--- ls2_1: ls2_1(A/,relative,title,title_compact=false,display=hierarchy) (旧実装、意図通りに表示できている)
--- lsx: lsx(A/,depth=1:10,contents=(num=1:10)) (割り切り実装、らしい: pukiwiki.sonots.com/?Plugin%2Flsx.inc.php Fページ内の見出しレベルの逆転を表現できていない)
--- &ref(pw2188_failure_pattern_css.png);
- 見出しのリストに使うCSS classと階層表示に使うListのclassを分ければ何とかなるかもしれませんが、手間のわりに実りの少ない設計/実装になりそうなので、lsxと同じように割り切りにします。理由としては(1)標準プラグインの範疇では発生しない。(2)ls2_1は自作プラグインで紹介されている外部プラグインであり、さらに後継のlsx pluginが提供されており今後更新されないと推測される。つまりプラグインの実装変更が必要であれば結局のところ対応されない。(3)発生条件が厳しく、デバッグ以外で遭遇するケースは少ないと考えられる（ls2_1/contents2_1を使い、階層表示、見出し表示を行い、さらに対象見出し順が逆転している） -- [[umorigu]] &new{2017-08-15 (火) 21:39:44};
#comment
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
