Template‐ノート:Columns-list

改修提案（2021年12月）

1: margin-top関連

ミネルバ以外の外装（デスクトップ版のみ）で本テンプレート（および{{Div col}}{{Div col end}} + 箇条書き）を使用すると、<ul>...</ul>、<ol>...</ol>要素のmargin-topが1つ目の<li>...</li>にのみ反映されることによりレイアウトが崩れる問題があります。具体的には、

ほげ ふが

ぴよ foo

bar baz

という表示が期待される場合、

ほげ

ふが ぴよ

foo bar

baz

と表示されたり、

ほげ

ふが

ぴよ

foo

bar

という表示が期待される場合、

ほげ

ふが

ぴよ

foo

bar

と表示されてしまう場合があります。確認に用いた以下のいずれの環境でもこの問題は発生しました（いずれも特記ないかぎり最新版）。

• Win10 + Chrome（レガシー・ベクター、ニュー・ベクター、Timeless、MonoBook）
• Win10 + FireFox（レガシー・ベクター）
• Win10 + IE（ニュー・ベクター）
• Android 10 + Chrome（レガシー・ベクター）

この問題を解消するためにテンプレートスタイルを当てるようにしたいと考えております。

なお、{{Div col}}...{{div col end}}でも同様の問題が発生しますが、箇条書き以外を囲んでいる場合の対応が困難であるため、今回は本テンプレートのみの改修とし、{{Div col}}側ではドキュメンテーションにこの問題についての註記と本テンプレートへの誘導を行うに留めたいと考えております。

［追記ここから］<li>...</li>の途中でカラムがブレーク（切り替わる）してしまう現象については、Chromeではこの変更で解消しますが、IEおよびFirefoxでは解消しないようです。column-widthないしcolumn-countを<div>...</div>から<ul>...</ul>および<ol>...</ol>に変更すれば解消されますが、

{{columns-list|2|
* 文1
* 文2

* 文3
}}

のような途中の改行により<ul>...</ul>ないし<ol>...</ol>が分割された場合、上記以上に可読性を損ねるレイアウト崩れが発生するため、今回は適用を見送ることにします。--2021年12月27日 (月) 00:55 (UTC)

2: 引数の追加等とlua化

上記に併せ、以下の変更も実施したいと考えております。

1. 第1引数への列幅の指定を可能にする。
2. |style=の追加
   • 第1引数内での追加スタイル指定機能は後方互換のために残していますが、非推奨とした上で「Category:Columns-list/第1引数に追加スタイルが指定されている記事」に分類するようにします（将来的には廃止したい）。
   • |style="color: red;"のように指定された場合、引用符は除去します。
3. |plainlist=の追加。
   • |plainlist=1と指定すると{{Plainlist}}のようにビュレットなしのリストになります。なお、.plainlistのスタイル設定はMediaWiki:Common.cssでなされているようです。
4. |colwidth=のエイリアスとして|col-width=および|colmun-width=を追加。
   • 2つ目はCSSに慣れている方へのわかりやすさ、1つ目は誤記防止を意図しています。
5. 列数指定解消作業用カテゴリーの追加
   • 列幅ではなく列数が指定されている場合「Category:Columns-list/列幅が指定されていない記事」に分類するようにします。

後方互換性も確保すると条件分岐等が複雑になるため、Luaモジュール化します。

コード、テスト

• サンドボックス
• モジュール
• ./styles.css
• テストケース

表示テストは、Windows10 + Chrome + レガシー・ベクターを中心に、他のいくつかの環境（「利用者:JuthaDDA/閲覧環境」を参照）でも行っております。

コメント

提案 以上2点の変更の実施を提案します。1週間ほど異論が出なければ変更を実施します。--Jutha DDA（会話） 2021年12月25日 (土) 13:20 (UTC)

追加検証をもとに「#1: margin-top関連」を加筆しました。--Jutha DDA（会話） 2021年12月27日 (月) 00:55 (UTC)

「#1: margin-top関連」のうち勘違いのあった箇所（今回の変更提案には直接関係しません）に打ち消し線を引きました。<li>...</li>内のカラム・ブレーク問題については、「Template‐ノート:Reflist#段組み表示改善用CSS_&_JS案」にて関連する提案を行っているのでご参照ください。--Jutha DDA（会話） 2021年12月30日 (木) 13:46 (UTC)

テストの過程で、2-2の後方互換用コード周りでバグが見つかったため一昨日から昨日にかけてモジュール案を修正しました。もう少しテストを行って問題がないようなら、明日・明後日辺りに本テンプレート及びドキュメンテーションの変更を行う予定です。また追跡カテゴリーは作成済みです。--Jutha DDA（会話） 2022年1月4日 (火) 13:19 (UTC)

済 複数のブラウザで追加テストを行った結果問題は見当たらなかったため、変更を実施しました。--Jutha DDA（会話） 2022年1月4日 (火) 20:13 (UTC)

引数追加提案

{{div col}}から本テンプレートへの書き換えを容易にするために、

1. |small= - font-size: 90%;
2. |rules= - column-rule
3. |gap= - column-gap
4. |content= - 第2引数のエイリアス

の追加を提案します。

• モジュール改修案
• テストケース

styles.cssには以下のコードを追加します。

.columns-list__wrapper--small-font {
    font-size: 90%;
}

以上です。--Jutha DDA（会話） 2022年1月8日 (土) 23:43 (UTC)

報告 引数の追加を実施しました。--Jutha DDA（会話） 2022年1月16日 (日) 12:44 (UTC)