Category:Design, CSS

List(ul,ol,li)のmargin,paddingをCSSで指定する

メッセージ

3カラムのスキンを作っていてul,li,olのmargin,paddingを変更したかったが分からず、pukiwiki.css.phpにて「! important」宣言をし、カスケード順位を上げました。
元は何処に書いてあるのだろう。pukiwiki.css.phpに記述していただいた方が便利だと思いました。

要件

開発日記/2003-03-29 より、リスト表示位置の要件

既存実装と対応策

1.5.1までの実装

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"';

CSS と default.ini.php に定義されたインデント量を組み合わせてPHPロジックでList style (主にインデント量)を決定する

BugTrack/2188 実装案A (不採用)

Listに list-n (固定) とレベルに応じた listN の2クラスを付与する。インデント量はCSSですべて決定する

skin/pukiwiki.css

/* Default list style */
.list-n {
	padding-left: 16px;
	margin-left: 16px
}
/* Specific list style for list1-list4 */
.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
}
.list1 .list4 {
	padding-left: 48px;
	margin-left: 48px
}
.list2 .list4 {
	padding-left: 32px;
	margin-left: 32px
}
.list3 .list4 {
	padding-left: 16px;
	margin-left: 16px
}

default.ini.php

$_list_pad_str = ' class="list-n list%d"';

BugTrack/2188 実装案B (採用)

List に レベルに応じた listN と 親Listとの階層差を表す list-indnetM の2クラスを付与する。階層差はPHPロジックで算出し、階層差に対するインデント幅はCSSで決定する。

skin/pukiwiki.css

.list-indent1 {
	padding-left: 16px;
	margin-left: 16px
}
/* list-indent2,3,4 are used for leaping list level indentation */
.list-indent2 {
	padding-left: 32px;
	margin-left: 32px
}
.list-indent3 {
	padding-left: 48px;
	margin-left: 48px
}
.list-indent4 {
	padding-left: 64px;
	margin-left: 64px
}

default.ini.php

// Obsolete: リスト構造の左マージン (Leaves for compatibility of plugins)
// Use list-indent1 CSS class instead
$_ul_left_margin = 0;   // Must be 0 (Plugin backward compatibility)
$_ul_margin = 1;        // Must be 1 (Plugin backward compatibility)
$_ol_left_margin = 0;   // Must be 0
$_ol_margin = 1;        // Must be 1
$_dl_left_margin = 0;   // Must be 0
$_dl_margin = 1;        // Must be 1
// Use pkwk_list_attrs_template() instead
$_list_pad_str = ' class="list%d list-indent%d"';

案Bの出力例

以下のような記述があった時に

---3
-1
---3
--2
---3

リストマークをレベルに一致させたり、マージンを合わせている。

(旧実装でのHTML出力)

<ul class="list3" style="padding-left:48px;margin-left:48px">
 <li>3</li>
</ul>
<ul class="list1" style="padding-left:16px;margin-left:16px">
 <li>1
  <ul class="list3" style="padding-left:32px;margin-left:32px">
   <li>3</li>
  </ul>
  <ul class="list2" style="padding-left:16px;margin-left:16px">
   <li>2
    <ul class="list3" style="padding-left:16px;margin-left:16px">
     <li>3</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

(新実装での出力)

<ul class="list3 list-indent3">
 <li>3</li>
</ul>
<ul class="list1 list-indent1">
 <li>1
  <ul class="list3 list-indent2">
   <li>3</li>
  </ul>
  <ul class="list2 list-indent1">
   <li>2
    <ul class="list3 list-indent1">
     <li>3</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

コメント



*1 コメントするときにお名前を入れていただけると助かります

添付ファイル: filepw2188_list_indent_solution_b.png 111件 [詳細] filepw2188_new_list_css.png 127件 [詳細] filepw2188_failure_pattern_css.png 126件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-08-17 (木) 09:04:09
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.206 sec.

OSDN