#author("2017-08-15T07:55:35+09:00;2017-08-15T07:55:12+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に記述していただいた方が便利だと思いました。
*** 要件 [#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) 旧型式の指定を前提にしたCSSでレイアウトが大きく崩れないようにする
- (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};
#comment
![[PukiWiki]](image/pukiwiki-dev.png "[PukiWiki]")
