開発日記

XSS/バグ修正 -- ぱんだ

リストの位置あわせをclass指定で -- ぱんだ

見てくれはcssに任せるためにその1。

例を交えて書いているので、読みにくいのはご容赦ください。

classにスペースで区切って複数のクラスを指定する書き方は、WindowsのIE6/NN7でしか試していません。他のブラウザでうまくいくかどうか知らないんですが。

現状、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"';

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

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

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

  • 3
  • 1
    • 3
    • 2
      • 3

このようなタグを吐く仕掛けをしてあるんですが、

<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>

これを廃止して、cssに以下のような記述を追加して

ul,ol,dl { margin-left:1em; padding-left:1em; }
dd { margin-left:1em; padding-left:1em; }
/*li,dt { margin-left:0px; padding-left:0px; } */
blockquote { margin-left:1em; padding-left:1em; }

.skip1 { margin-left:2em; padding-left:2em; }
.skip2 { margin-left:3em; padding-left:3em; }

ul.list1 { list-style-type:disc; }
ul.list2 { list-style-type:circle; }
ul.list3 { list-style-type:square; }
ol.list1 { list-style-type:decimal; }
ol.list2 { list-style-type:lower-roman; }
ol.list3 { list-style-type:lower-alpha; }

以下のようなタグを吐くように変更したいんですが、

<ul class="list3 skip2">
 <li>3</li>
</ul>
<ul class="list1">
 <li>1
  <ul class="list3 skip1">
   <li>3</li>
  </ul>
  <ul class="list2">
   <li>2
    <ul class="list3">
     <li>3</li>
    </ul>
   </li>
  </ul>
 </li>
</ul>

何か問題ありますか?

たとえば、BugTrack/261での要望のように、レベルが飛んだときのマージンが不要なときは、ls2.inc.phpで以下のようなタグを吐くようにしておいて、

<div class="ls2">
 <ul class="list3 skip2">
  <li>3</li>
 </ul>
 <ul class="list2 skip1">
  <li>3</li>
 </ul>
</div>

cssに以下の定義をすればOKかなと。

div.ls2 ul.skip1 { margin-left:1em; padding-left:1em; }
div.ls2 ul.skip2 { margin-left:1em; padding-left:1em; }

*1 微妙~に頭がずれて見えるのは、borderの1pxのせいです。

添付ファイル: filedefault.css 635件 [詳細] filetest.html 709件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-06-15 (日) 06:35:58
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.508 sec.

OSDN